:root {
    /* Arrow cursors: hotspot 0 0 (top-left). Plus/X: hotspot 16 16 (center for crosshair targeting) */
    --cursor-default: url('assets/images/ui/cursor-default.png') 0 0, auto;
    --cursor-drag: url('assets/images/ui/cursor-drag.png') 0 0, auto;
    --cursor-plus: url('assets/images/ui/cursor-plus.png') 16 16, auto;
    --cursor-x: url('assets/images/ui/cursor-x.png') 16 16, auto;
}

/* When mouse is down (click feedback), force descendants to inherit body's cursor (set via JS) - do NOT include body itself or it would inherit from html and lose our cursor */
body.cursor-click-feedback * {
    cursor: inherit !important;
}

/* Tutorial mode: red X only on blocked clickables (buttons, inventory items, etc.); default cursor elsewhere */
body.tutorial-mode button,
body.tutorial-mode a[href],
body.tutorial-mode [role="button"],
body.tutorial-mode .cta-button,
body.tutorial-mode .tab-button,
body.tutorial-mode .scenario-dropdown-option,
body.tutorial-mode .scenario-dropdown-selected,
body.tutorial-mode .inventory-item {
    cursor: var(--cursor-x) !important;
}
/* Allowed elements for current step: show default cursor and ensure clickable */
body.tutorial-mode .tutorial-allowed,
body.tutorial-mode .tutorial-allowed * {
    cursor: var(--cursor-default) !important;
    pointer-events: auto !important;
}
/* When placing tower/item during tutorial, canvas must inherit body cursor (red X / green +) - overrides tutorial-allowed */
body.tutorial-mode.placing-item #gameCanvas {
    cursor: inherit !important;
}
/* Modal overlay when open: allow all interactions */
body.tutorial-mode .modal-overlay.active,
body.tutorial-mode .modal-overlay.active * {
    cursor: var(--cursor-default) !important;
}
/* Step 21: invisible overlay over shield - guarantees click is received */
.tutorial-shield-overlay {
    position: fixed;
    z-index: 9998; /* Below tutorial arrow (2147483647) but above shop */
    cursor: var(--cursor-default);
    pointer-events: auto;
    background: transparent;
}
/* Step 27 post-Resume: speech bubble near water tank (no arrow) */
.tutorial-water-tank-bubble {
    position: fixed;
    z-index: 2147483646; /* Just below tutorial arrow */
    background: #fff;
    color: #000;
    padding: 14px 18px 20px 22px;
    border-radius: 12px;
    pointer-events: none;
    min-width: 220px;
    max-width: 280px;
    font-size: 19px;
    font-weight: 400;
    font-family: "Exo 2", sans-serif;
    line-height: 1.35;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.8);
}
.tutorial-water-tank-bubble .tutorial-speech-bubble-text {
    display: block;
}
/* Tutorial step 21: shield must be clickable with default cursor (override .inventory-item red X) */
body.tutorial-mode.tutorial-step-21 #shield-1-shop,
body.tutorial-mode.tutorial-step-21 #shield-1-shop * {
    cursor: var(--cursor-default) !important;
    pointer-events: auto !important;
}
/* Tutorial-disabled: shop sub-tabs that are blocked (red X cursor on hover; click handler blocks action) */
body.tutorial-mode .tutorial-disabled {
    cursor: var(--cursor-x) !important;
    pointer-events: auto !important;
    opacity: 0.5;
}
/* Step 20: Towers is the active tab (viewing Towers content) but not clickable - keep full opacity so it looks active */
body.tutorial-mode.tutorial-step-20 #shopTab .shop-sub-tab-button[data-shop-sub-tab="towers"].tutorial-disabled {
    opacity: 1 !important;
}
/* Tutorial blocked click notification - floats up and fades near click position */
.tutorial-blocked-notification {
    position: fixed;
    transform: translate(-50%, 0);
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 14px;
    font-family: "Exo 2", sans-serif;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2147483645;
    opacity: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease-out, transform 1.5s ease-out;
}
.tutorial-blocked-notification.tutorial-blocked-notification-visible {
    opacity: 1;
}
.tutorial-blocked-notification.tutorial-blocked-notification-fade {
    transform: translate(-50%, -80px);
    opacity: 0;
}

/* Tutorial complete (past last step): default cursor everywhere */
body.tutorial-mode.tutorial-steps-complete button,
body.tutorial-mode.tutorial-steps-complete a[href],
body.tutorial-mode.tutorial-steps-complete [role="button"],
body.tutorial-mode.tutorial-steps-complete .cta-button,
body.tutorial-mode.tutorial-steps-complete .tab-button,
body.tutorial-mode.tutorial-steps-complete .scenario-dropdown-option,
body.tutorial-mode.tutorial-steps-complete .scenario-dropdown-selected,
body.tutorial-mode.tutorial-steps-complete .inventory-item {
    cursor: var(--cursor-default) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Exo 2', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Custom cursor - must be 32x32px or smaller for Chrome/Edge compatibility */
/* :root --cursor-* may be overridden at runtime in main.js to match inputHandler absolute URLs */
html,
body {
    font-family: 'Exo 2', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a2e;
    color: #eee;
    overflow: hidden;
    overscroll-behavior: none;
}
html {
    cursor: var(--cursor-default);
}
body {
    cursor: var(--cursor-default);
}

.game-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    overscroll-behavior: none;
    cursor: inherit; /* Use body's custom cursor */
}

/* Canvas Area */
.canvas-container {
  cursor: inherit; /* Use body's custom cursor */
  touch-action: none; /* Map pan is handled in JS; blocks browser swipe navigation */
  overscroll-behavior: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0f14; /* Darkened with reduced blue saturation and luminance */
    padding: 0px; /* Removed padding to see full map edge */
    /* Ensure backdrop-filter works on child elements */
    transform: translateZ(0);
    isolation: isolate; /* Changed from auto to isolate to create proper stacking context */
}

#gameCanvas {
    border: 2px solid #1f2226; /* Desaturated and darkened to match hex colors */
    border-radius: 8px;
    background: #101620; /* Matches CONFIG.COLOR_BACKGROUND */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    touch-action: none;
    overscroll-behavior: none;
    cursor: inherit; /* Use body's custom cursor */
}

/* Screen shake animation for boss abilities */
@keyframes screen-shake {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-3px, 2px); }
    20% { transform: translate(4px, -2px); }
    30% { transform: translate(-2px, 3px); }
    40% { transform: translate(3px, -1px); }
    50% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 1px); }
    70% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 1px); }
    90% { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}

#gameCanvas.screen-shake {
    animation: screen-shake 0.4s ease-out;
    /* Drop soft shadow while transforming — shadow+transform thrash is expensive on a large canvas */
    box-shadow: none;
    will-change: transform;
}

/* Sustained screen shake (loops until removed, for surround / provoked-burn / long casts) */
#gameCanvas.screen-shake-sustained {
    animation: screen-shake 0.15s ease-in-out infinite;
    box-shadow: none;
    will-change: transform;
}

/* Side Panel Toggle Button */
.side-panel-toggle {
    position: fixed;
    right: 300px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 115px;
    background: #0C1A30;
    border: 2px solid #22456C;
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: var(--cursor-default);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease, background 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    padding: 8px 4px;
    box-sizing: border-box;
}

.side-panel-toggle:hover {
    background: #1a2332;
}

.side-panel-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.toggle-icons-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.toggle-icon {
    width: 35px;
    height: auto;
    object-fit: contain;
    image-rendering: crisp-edges;
}

.toggle-divider {
    width: 35px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 4px 0;
}

/* Side Panel */
.side-panel {
    position: fixed;
    top: 0;
    right: -30px;
    width: 350px;
    height: calc(100vh - 19px);
    padding-left: 20px;
    padding-right: 30px;
    /* Middle repeating image on element background - starts at 81px (after top) */
    background-image: url('assets/images/ui/sidebar-middle.png');
    background-position: left 81px; /* Start after top image */
    background-size: 100% auto;
    background-repeat: repeat-y;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    z-index: 100;
    transform: translateX(0);
    margin-top: 20px;
    margin-bottom:58px;

}

/* Top edge image using ::before - positioned above middle background */
.side-panel::before {
    content: '';
    position: absolute;
    top: -63px;
    left: 0;
    right: 0;
    height: 81px; /* Height of top image */
    background-image: url('assets/images/ui/sidebar-top.png');
    background-position: top left;
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10; /* Above middle background image */
}

/* Bottom edge image using ::after - positioned above middle background */
.side-panel::after {
    content: '';
    position: absolute;
    bottom: -69px;
    left: 0;
    right: 0;
    height: 89px; /* Height of bottom image */
    background-image: url('assets/images/ui/sidebar-bottom.png');
    background-position: bottom left;
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10; /* Above middle background image */
}

.side-panel.collapsed {
    transform: translateX(calc(100% - 48px));
}

.side-panel.side-panel-drop-zone {
    /* Keep the 3-patch background, just add overlay effect */
    box-shadow: inset 0 0 20px rgba(76, 175, 80, 0.3);
}

/* Drop zone overlay - add green tint using a background overlay on the element itself */
.side-panel.side-panel-drop-zone {
    background-image: url('assets/images/ui/sidebar-middle.png'),
                      linear-gradient(rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.2));
}

.side-panel.side-panel-drop-zone::before {
    background-image: url('assets/images/ui/sidebar-top.png'),
                      linear-gradient(rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.2));
}

.side-panel.side-panel-drop-zone::after {
    background-image: url('assets/images/ui/sidebar-bottom.png'),
                      linear-gradient(rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.2));
}

.side-panel.side-panel-drop-zone > * {
    position: relative;
    z-index: 4; /* Above all background layers */
}

/* Title Section */
.title-section {
    padding: 0 20px 0 20px;
    background: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.title-section h2 {
    color: #ff6b35;
    font-size: 24px;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 107, 53, 1);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-btn:not(.cta-button) {
    flex-shrink: 0;
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    width: auto;
}

.cta-button.settings-btn {
    flex-shrink: 0;
    /* padding-left and padding-right are set by .cta-button (28px each) */
    /* padding-top and padding-bottom are handled by .cta-button height (66px) */
    /* font-size, font-weight, letter-spacing, and text-transform come from .cta-button */
    /* Don't override - let .cta-button handle it */
    color: #fff;
    width: auto;
    display: flex; /* Use flex to center content */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

/* ============================================
   CTA BUTTON UTILITY CLASS - 3-Patch System
   ============================================ */
/* All button imagery/styling in one place - no duplication */
.cta-button {
    position: relative;
    /* Middle repeating image on element background - positioned in content area only */
    background-image: url('assets/images/ui/button_blue_middle.png');
    background-size: 1px 66px;
    background-repeat: repeat-x;
    background-origin: content-box; /* Background positioning relative to content box (after padding) */
    background-clip: content-box; /* Background only visible in content area, not padding */
    background-position: 0 center;
    border: none;
    border-radius: 0;
    cursor: var(--cursor-default);
    transition: transform 0.08s ease-out, filter 0.2s ease, background-image 0.3s ease;
    z-index: 0;
    height: 66px;
    background-color: transparent;
    padding-left: 28px; /* Space for left cap */
    padding-right: 28px; /* Space for right cap */
    box-sizing: border-box; /* Include padding in width calculations */
    display: flex; /* Use flex to center content */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    font-size: 14px; /* Standard CTA button font size - applies to ALL CTA buttons */
    font-weight: 600; /* Standard CTA button font weight - applies to ALL CTA buttons */
    letter-spacing: 0.5px; /* Standard CTA button letter spacing - applies to ALL CTA buttons */
    text-transform: uppercase; /* All CTA buttons use uppercase text */
}

/* Left cap using ::before - positioned in left padding area */
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* Position in padding area, now clickable */
    width: 28px;
    height: 100%;
    background-image: url('assets/images/ui/button_blue_left.png');
    background-position: left center;
    background-size: 28px 66px;
    background-repeat: no-repeat;
    pointer-events: none; /* Allow clicks to pass through to button */
    z-index: 1;
    transition: all 0.3s;
}

/* Right cap using ::after - positioned in right padding area */
.cta-button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; /* Position in padding area, now clickable */
    width: 28px;
    height: 100%;
    background-image: url('assets/images/ui/button_blue_right.png');
    background-position: right center;
    background-size: 28px 66px;
    background-repeat: no-repeat;
    pointer-events: none; /* Allow clicks to pass through to button */
    z-index: 1;
    transition: all 0.3s;
}

/* Ensure button text is above caps */
.cta-button > * {
    position: relative;
    z-index: 2;
}

/* All images within CTA buttons should be 32px by 32px */
.cta-button img {
    width: 32px;
    height: 32px;
    image-rendering: crisp-edges;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0;
}

/* Pause/Resume/Start Wave icon in control buttons (text + icon), ~25% smaller than standard CTA img */
.control-btn .control-btn-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    image-rendering: crisp-edges;
    margin-right: 0.5em;
}

.cta-button.disabled,
.cta-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: brightness(0.6);
}

.cta-button.disabled:hover,
.cta-button:disabled:hover {
    filter: brightness(0.6);
}

/* Hover: darken background, keep text bright white (exclude tab-button and shop-sub-tab-button – they have their own hover) */
.cta-button:not(.tab-button):not(.shop-sub-tab-button):hover {
    filter: brightness(0.88);
}
.cta-button:not(.tab-button):not(.shop-sub-tab-button):hover * {
    filter: brightness(1.136); /* Counteract parent so text stays bright white */
}

/* Click/press: shift down then back up on any CTA button (exclude shop sub-tabs – they keep original behavior) */
.cta-button:active:not(:disabled):not(.disabled):not(.shop-sub-tab-button) {
    transform: translateY(2px);
}
.cta-button:disabled:active,
.cta-button.disabled:active {
    transform: none;
}
/* Preserve tab layout transform when pressed */
.tabs .tab-button:last-child:active:not(:disabled):not(.disabled) {
    transform: translateX(-10px) translateY(2px);
}
/* Shop sub-tabs: no press effect, keep original transition for their hover */
.shop-sub-tab-button {
    transition: all 0.3s;
}

/* Since filter applies to the whole element including pseudo-elements, 
   we don't need separate rules for ::before and ::after */

/* Color variants - override the blue button image URLs */
.cta-lime {
    background-image: url('assets/images/ui/button_lime_middle.png');
}

.cta-lime::before {
    background-image: url('assets/images/ui/button_lime_left.png');
}

.cta-lime::after {
    background-image: url('assets/images/ui/button_lime_right.png');
}

.cta-green {
    background-image: url('assets/images/ui/button_green_middle.png');
}

.cta-green::before {
    background-image: url('assets/images/ui/button_green_left.png');
}

.cta-green::after {
    background-image: url('assets/images/ui/button_green_right.png');
}

.cta-red {
    background-image: url('assets/images/ui/button_red_middle.png');
}

.cta-red::before {
    background-image: url('assets/images/ui/button_red_left.png');
}

.cta-red::after {
    background-image: url('assets/images/ui/button_red_right.png');
}

.cta-orange {
    background-image: url('assets/images/ui/button_orange_middle.png');
}

.cta-orange::before {
    background-image: url('assets/images/ui/button_orange_left.png');
}

.cta-orange::after {
    background-image: url('assets/images/ui/button_orange_right.png');
}

.cta-purple {
    background-image: url('assets/images/ui/button_purple_middle.png');
}

.cta-purple::before {
    background-image: url('assets/images/ui/button_purple_left.png');
}

.cta-purple::after {
    background-image: url('assets/images/ui/button_purple_right.png');
}

.cta-yellow {
    background-image: url('assets/images/ui/button_yellow_middle.png');
}

.cta-yellow::before {
    background-image: url('assets/images/ui/button_yellow_left.png');
}

.cta-yellow::after {
    background-image: url('assets/images/ui/button_yellow_right.png');
}

.cta-special {
    background-image: url('assets/images/ui/button_special_middle.png');
}

.cta-special::before {
    background-image: url('assets/images/ui/button_special_left.png');
}

.cta-special::after {
    background-image: url('assets/images/ui/button_special_right.png');
}

.cta-blue {
    background-image: url('assets/images/ui/button_blue_middle.png');
}

.cta-blue::before {
    background-image: url('assets/images/ui/button_blue_left.png');
}

.cta-blue::after {
    background-image: url('assets/images/ui/button_blue_right.png');
}

/* Small CTA button utility class - 46px height instead of 66px */
.cta-small {
    height: 47px;
    background-size: 1px 47px;
    padding-left: 20px; /* Scaled down from 28px proportionally */
    padding-right: 20px; /* Scaled down from 28px proportionally */
    font-size: 9px; /* Slightly smaller font for smaller button */
    font-weight:400;
    text-shadow: 0 0 1px black;
    color:white;
}

.cta-small::before {
    width: 20px; /* Scaled down from 28px proportionally */
    background-size: 20px 47px;
}

.cta-small::after {
    width: 20px; /* Scaled down from 28px proportionally */
    background-size: 20px 47px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-label {
    color: #aaa;
    font-size: 14px;
}

.stat-value {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.stat-value.fire-count {
    color: #ff6b35;
}

.stat-value.home-status {
    color: #4CAF50;
}

.xp-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 12px 0;
    overflow: hidden;
}

.xp-progress {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px 0 0 4px; /* match .xp-bar rounding on left only; right edge straight */
}

/* Tabs */
.tabs {
    display: flex;
    background: transparent;
    border-bottom: none;
    gap: 0;
    padding: 0;
}

.tab-button {
    flex: 1;
    position: relative;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s;
}

.tabs .tab-button:last-child {
    transform:translateX(-10px);
}

/* Content wrapper for tab buttons */
.tab-content-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Desaturate images in inactive tabs */
.tab-button:not(.active) .tab-content-wrapper img {
    filter: grayscale(80%); /* Remove 80% of saturation (80% grayscale) */
    transition: filter 0.3s;
}

/* Restore full color when hovering over inactive tab */
.tab-button:not(.active):hover .tab-content-wrapper img {
    filter: grayscale(0%); /* Full color on hover */
}

/* Non-active tab - use dimmed button images instead of bright ones */
.tab-button:not(.active).cta-lime {
    background-image: url('assets/images/ui/button_lime_dim_middle.png');
}

.tab-button:not(.active).cta-lime::before {
    background-image: url('assets/images/ui/button_lime_dim_left.png');
}

.tab-button:not(.active).cta-lime::after {
    background-image: url('assets/images/ui/button_lime_dim_right.png');
}

.tab-button:not(.active).cta-orange {
    background-image: url('assets/images/ui/button_orange_dim_middle.png');
}

.tab-button:not(.active).cta-orange::before {
    background-image: url('assets/images/ui/button_orange_dim_left.png');
}

.tab-button:not(.active).cta-orange::after {
    background-image: url('assets/images/ui/button_orange_dim_right.png');
}

/* When hovering over non-active tab, restore bright images */
.tab-button:not(.active):hover.cta-lime {
    background-image: url('assets/images/ui/button_lime_middle.png');
}

.tab-button:not(.active):hover.cta-lime::before {
    background-image: url('assets/images/ui/button_lime_left.png');
}

.tab-button:not(.active):hover.cta-lime::after {
    background-image: url('assets/images/ui/button_lime_right.png');
}

.tab-button:not(.active):hover.cta-orange {
    background-image: url('assets/images/ui/button_orange_middle.png');
}

.tab-button:not(.active):hover.cta-orange::before {
    background-image: url('assets/images/ui/button_orange_left.png');
}

.tab-button:not(.active):hover.cta-orange::after {
    background-image: url('assets/images/ui/button_orange_right.png');
}

/* Active tab - no hover effect, normal brightness */
.tab-button.active {
    color: #FFFFFF;
    background-color: transparent;
}

/* Remove hover effect from active tab */
.tab-button.active:hover {
    /* No hover dimming for active tab */
    filter: brightness(1.0);
}

/* Repair mode: immediately show red X cursor on blocked controls */
body.repair-selection-mode .tab-button[data-tab="shop"],
body.repair-selection-mode #inventoryTab .shop-sub-tab-button[data-inventory-sub-tab="artifacts"],
body.repair-selection-mode #startWaveBtn,
body.movement-token-mode .tab-button,
body.movement-token-mode #inventoryTab .shop-sub-tab-button[data-inventory-sub-tab],
body.movement-token-mode #shopTab .shop-sub-tab-button[data-shop-sub-tab],
body.movement-token-mode #startWaveBtn,
body.movement-token-mode #settingsBtn,
body.tower-sellback-selection-mode .tab-button[data-tab="shop"],
body.tower-sellback-selection-mode #inventoryTab .shop-sub-tab-button[data-inventory-sub-tab="artifacts"],
body.tower-sellback-selection-mode #settingsBtn,
body.upgrade-selection-mode .tab-button[data-tab="shop"],
body.upgrade-selection-mode #inventoryTab .shop-sub-tab-button[data-inventory-sub-tab="artifacts"] {
    cursor: var(--cursor-x) !important;
}

/* Repair mode inventory targets must win against global/body cursor writes */
body.repair-selection-mode #inventoryGrid .inventory-item.repair-mode-repairable {
    cursor: var(--cursor-plus) !important;
}

body.repair-selection-mode #inventoryGrid .inventory-item.repair-mode-blocked {
  cursor: var(--cursor-x) !important;
}

body.tower-sellback-selection-mode #inventoryGrid .inventory-item.sellback-mode-target {
  cursor: var(--cursor-plus) !important;
}

body.tower-sellback-selection-mode #inventoryGrid .inventory-item.sellback-mode-blocked {
  cursor: var(--cursor-x) !important;
}

body.movement-token-mode #inventoryGrid .inventory-item,
body.movement-token-mode #inventoryGridArtifacts .inventory-item,
body.movement-token-mode #shopGridTowers .inventory-item,
body.movement-token-mode #shopGridItems .inventory-item,
body.movement-token-mode #shopGridPowerups .inventory-item {
  cursor: var(--cursor-x) !important;
}

body.movement-token-mode #inventoryGrid .inventory-item.movement-mode-stored-target {
  cursor: var(--cursor-default) !important;
}

/* Shield apply mode (click shield then target): plus on tower cards, X on other inventory items */
body.placing-item #inventoryGrid .inventory-item.shield-mode-target {
    cursor: var(--cursor-plus) !important;
}

body.placing-item #inventoryGrid .inventory-item.shield-mode-blocked {
    cursor: var(--cursor-x) !important;
}

.tab-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #FF6B6B;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.tab-badge#shopBadge,
#shopTab .shop-sub-tabs .tab-badge {
    background: #FFD700;
    color: #000;
}

/* Tab Content */
.tab-content {
    display: none;
    flex: 1;
    padding: 20px 10px 20px 15px;
    overflow-y: auto;
    min-height: 0; /* Allow flex shrinking */
    /* Reserve space for scrollbar to prevent content shifting when switching tabs */
    scrollbar-gutter: stable;
}


.tab-content.active {
    display: block;
}

/* Remove padding from shop tab content */
#shopTab.tab-content {
    padding: 0;
}

/* Match shop: sub-tabs align to edges; padding lives on .shop-sub-tab-content */
#inventoryTab.tab-content {
    padding: 0;
}

/* Shop Sub-tabs - sticky at top when scrolling */
.shop-sub-tabs {
    display: flex;
    position: sticky;
    top: 0;
    /* Above shop/inventory item innards (e.g. price text uses z-index: 1000 in main.js) */
    z-index: 10050;
    isolation: isolate;
    background: #071025; /* Match sidebar/tab area so content doesn't show through when scrolling */
    border-bottom: none;
    gap: -10px; /* Negative gap to overlap buttons */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Sub-tab buttons - use CTA button styling with small size */
.shop-sub-tab-button {
    flex: 1 1 0;
    min-width: 0;
}

.shop-sub-tab-button:first-child {
    transform: translateX(5px);
}

.shop-sub-tab-button:last-child {
    transform: translateX(-5px);
}

/* Towers sub-tab - blue */
.shop-sub-tab-button[data-shop-sub-tab="towers"] {
    /* Inherits all CTA button styling */
}

/* Items sub-tab - purple */
.shop-sub-tab-button[data-shop-sub-tab="items"] {
    /* Inherits all CTA button styling */
}

/* Power-ups sub-tab - red */
.shop-sub-tab-button[data-shop-sub-tab="powerups"] {
    /* Inherits all CTA button styling */
}

/* Non-active sub-tab - use dimmed button images (same approach as parent tabs) */
.shop-sub-tab-button:not(.active).cta-blue {
    background-image: url('assets/images/ui/button_blue_dim_middle.png');
}

.shop-sub-tab-button:not(.active).cta-blue::before {
    background-image: url('assets/images/ui/button_blue_dim_left.png');
}

.shop-sub-tab-button:not(.active).cta-blue::after {
    background-image: url('assets/images/ui/button_blue_dim_right.png');
}

.shop-sub-tab-button:not(.active).cta-purple {
    background-image: url('assets/images/ui/button_purple_dim_middle.png');
}

.shop-sub-tab-button:not(.active).cta-purple::before {
    background-image: url('assets/images/ui/button_purple_dim_left.png');
}

.shop-sub-tab-button:not(.active).cta-purple::after {
    background-image: url('assets/images/ui/button_purple_dim_right.png');
}

.shop-sub-tab-button:not(.active).cta-red {
    background-image: url('assets/images/ui/button_red_dim_middle.png');
}

.shop-sub-tab-button:not(.active).cta-red::before {
    background-image: url('assets/images/ui/button_red_dim_left.png');
}

.shop-sub-tab-button:not(.active).cta-red::after {
    background-image: url('assets/images/ui/button_red_dim_right.png');
}

/* When hovering over non-active sub-tab, restore bright images */
.shop-sub-tab-button:not(.active):hover.cta-blue {
    background-image: url('assets/images/ui/button_blue_middle.png');
}

.shop-sub-tab-button:not(.active):hover.cta-blue::before {
    background-image: url('assets/images/ui/button_blue_left.png');
}

.shop-sub-tab-button:not(.active):hover.cta-blue::after {
    background-image: url('assets/images/ui/button_blue_right.png');
}

.shop-sub-tab-button:not(.active):hover.cta-purple {
    background-image: url('assets/images/ui/button_purple_middle.png');
}

.shop-sub-tab-button:not(.active):hover.cta-purple::before {
    background-image: url('assets/images/ui/button_purple_left.png');
}

.shop-sub-tab-button:not(.active):hover.cta-purple::after {
    background-image: url('assets/images/ui/button_purple_right.png');
}

.shop-sub-tab-button:not(.active):hover.cta-red {
    background-image: url('assets/images/ui/button_red_middle.png');
}

.shop-sub-tab-button:not(.active):hover.cta-red::before {
    background-image: url('assets/images/ui/button_red_left.png');
}

.shop-sub-tab-button:not(.active):hover.cta-red::after {
    background-image: url('assets/images/ui/button_red_right.png');
}

/* Special has no dim 3-patch; dim inactive Collection tab with filter */
.shop-sub-tab-button:not(.active).cta-special {
    filter: brightness(0.52) saturate(0.88);
}

.shop-sub-tab-button:not(.active):hover.cta-special {
    filter: brightness(0.8) saturate(0.95);
}

/* Collection uses green set: dim when inactive, brighten on hover */
.shop-sub-tab-button:not(.active).cta-green {
    filter: brightness(0.52) saturate(0.88);
}

.shop-sub-tab-button:not(.active):hover.cta-green {
    filter: brightness(0.8) saturate(0.95);
}

/* Active sub-tab - no hover dimming, normal brightness */
.shop-sub-tab-button.active {
    color: #FFFFFF;
    background-color: transparent;
    filter: none;
}

.shop-sub-tab-button.active:hover {
    filter: brightness(1.0);
}

.shop-sub-tab-content {
    display: none;
    flex: 1;
    padding: 20px 10px 20px 15px;
    overflow-y: auto;
    min-height: 0;
}

/* ============================================
   LABEL UTILITY CLASSES
   ============================================
   Reusable label elements with 3-patch background images.
   Based on the sub-tab button styling, repurposed as labels.
   ============================================ */

/* Base label class */
.label {
    position: relative;
    height: 48px;
    padding: 0 46px 0 17px; /* Padding accounts for endcap widths */
    box-sizing: border-box;
    background-image: none;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 0 1px black;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent text wrapping */
}

/* Label text - normal flow, no absolute positioning needed */
.label .label-text {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

/* Label middle background - positioned between endcaps, expands with content */
.label .label-middle-bg {
    position: absolute;
    left: 17px;
    right: 46px;
    top: 0;
    bottom: 0;
    background-size: 1px 48px;
    background-repeat: repeat-x;
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
    transition: filter 0.3s;
}

/* Label endcaps - left and right */
.label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 100%;
    background-position: left center;
    background-size: 17px 48px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    transition: filter 0.3s;
}

.label::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 100%;
    background-position: right center;
    background-size: 46px 48px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
    transition: filter 0.3s;
}

/* Blue label variant */
.label-blue::before {
    background-image: url('assets/images/ui/label_blue_left.png');
}

.label-blue::after {
    background-image: url('assets/images/ui/label_blue_right.png');
}

.label-blue .label-middle-bg {
    background-image: url('assets/images/ui/label_blue_middle.png');
}

/* Purple label variant */
.label-purple::before {
    background-image: url('assets/images/ui/label_purple_left.png');
}

.label-purple::after {
    background-image: url('assets/images/ui/label_purple_right.png');
}

.label-purple .label-middle-bg {
    background-image: url('assets/images/ui/label_purple_middle.png');
}


/* Red label variant */
.label-red::before {
    background-image: url('assets/images/ui/label_red_left.png');
}

.label-red::after {
    background-image: url('assets/images/ui/label_red_right.png');
}

.label-red .label-middle-bg {
    background-image: url('assets/images/ui/label_red_middle.png');
}


/* Green label variant */
.label-green::before {
    background-image: url('assets/images/ui/label_green_left.png');
}

.label-green::after {
    background-image: url('assets/images/ui/label_green_right.png');
}

.label-green .label-middle-bg {
    background-image: url('assets/images/ui/label_green_middle.png');
}

/* Orange label variant */
.label-orange::before {
    background-image: url('assets/images/ui/label_orange_left.png');
}

.label-orange::after {
    background-image: url('assets/images/ui/label_orange_right.png');
}

.label-orange .label-middle-bg {
    background-image: url('assets/images/ui/label_orange_middle.png');
}

/* White label variant */
.label-white::before {
    background-image: url('assets/images/ui/label_white_left.png');
}

.label-white::after {
    background-image: url('assets/images/ui/label_white_right.png');
}

.label-white .label-middle-bg {
    background-image: url('assets/images/ui/label_white_middle.png');
}

/* White label - black text with white shadow (reversed from default) */
.label-white {
    color: black;
    text-shadow: 0 0 1px white;
}

.shop-sub-tab-content.active {
    display: block;
}

/* Inventory Grid */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    transition: all 0.3s;
    overflow: visible; /* Allow expanding rings to be visible */
}

.inventory-grid.inventory-drop-zone {
    background: rgba(76, 175, 80, 0.2);
    border: 2px solid #4CAF50;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}

.inventory-item {
    background: none;
    border: none;
    padding: 33px 20px 10px 20px;
    text-align: center;
    cursor: var(--cursor-default);
    transition: all 0.3s;
    position: relative;
    aspect-ratio: 1 / 1; /* Perfectly square */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
#inventoryGrid .inventory-item.tower {
    padding-top:43px;
}

/* Blue frame for towers */
.inventory-item.tower {
    background-image: url('assets/images/ui/frame-blue.png');
}

.inventory-item.tower .tower-frame-supercharger-tokens {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    pointer-events: none;
    z-index: 30;
}

.inventory-item.tower .tower-frame-supercharger-token {
    width: 22px;
    height: 27px;
    object-fit: contain;
    image-rendering: pixelated;
}

.inventory-item.tower .tower-frame-supercharger-token + .tower-frame-supercharger-token {
    margin-left: -8px;
}

.inventory-item.tower .tower-frame-supercharge-badges {
    position: absolute;
    top: 14px;
    right: 9px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    pointer-events: none;
    z-index: 30;
}

.inventory-item.tower .tower-frame-supercharge-badges .tower-frame-supercharge-badge {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}

.inventory-item.tower .tower-frame-supercharge-badges .tower-frame-supercharge-badge + .tower-frame-supercharge-badge {
    margin-left: -13px;
}

.inventory-item#tower-repair-inventory .icon, .inventory-item#tower-sellback-inventory .icon, .inventory-item#parts-voucher-inventory .icon {
    margin-top:8px;
}

/* Broken stored towers: gray frame, hammer overlay, desaturated tower art (see .inventory-tower-broken-hammer, .icon-inner) */
.inventory-item.tower.inventory-tower-broken {
    background-image: url('assets/images/ui/frame-gray.png');
}

.inventory-item.tower.inventory-tower-broken:hover:not(.locked) {
    background-image: url('assets/images/ui/frame-gray.png');
}

.inventory-item.locked.tower.inventory-tower-broken:hover {
    background-image: url('assets/images/ui/frame-gray.png');
}

.inventory-item.tower.inventory-tower-broken.placing-active,
.inventory-item.tower.inventory-tower-broken.shield-selected {
    background-image: url('assets/images/ui/frame-gray.png');
}

.inventory-item.tower.inventory-tower-broken.newly-unlocked,
.inventory-item.tower.inventory-tower-broken.newly-unlocked:hover:not(.locked) {
    background-image: url('assets/images/ui/frame-gray.png') !important;
}

.inventory-item.tower.inventory-tower-broken .inventory-tower-broken-hammer {
    position: absolute;
    left: 12px;
    bottom: 15px;
    width: 48px;
    height: 48px;
    background: url('assets/images/misc/hammer.png') no-repeat center / contain;
    z-index: 25;
    pointer-events: none;
    image-rendering: pixelated;
}

.inventory-item.tower.inventory-tower-broken .icon {
    position: relative;
    z-index: 2;
}

.inventory-item.tower.inventory-tower-broken .icon .icon-inner {
    filter: grayscale(75%);
}

.inventory-item.tower.inventory-tower-broken .icon .icon-inner img {
    animation: none !important;
}

/* Pink repair-target rings sit behind hammer so the tool stays readable */
.inventory-item.tower.inventory-tower-broken.upgradeable-pulse .inventory-tower-broken-hammer {
    z-index: 40;
}

/* Upgrade-mode dim uses filter on whole card — keep gray frame + hammer clear; fade tower art only */
.inventory-item.tower.inventory-tower-broken.upgrade-mode-dimmed {
    filter: none !important;
    opacity: 1;
}

.inventory-item.tower.inventory-tower-broken.upgrade-mode-dimmed .icon {
    opacity: 0.42;
}

/* Purple frame for items */
.inventory-item.item {
    background-image: url('assets/images/ui/frame-purple.png');
}

/* Red frame for power-ups */
.inventory-item.powerup {
    background-image: url('assets/images/ui/frame-red.png');
}

/* Collection artifacts only: center sprite in frame; intrinsic aspect ratio (no stretch) */
.inventory-item.artifact {
    background-image: url('assets/images/ui/frame-green.png');
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    box-sizing: border-box;
}

.inventory-item.artifact .icon {
    width: 70px;
    height: 70px;
    margin: 0;
    flex-shrink: 0;
}

.inventory-item.artifact .icon .icon-inner img {
    display: block;
    max-width: 62px;
    max-height: 62px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.inventory-item.locked.artifact:hover {
    background-image: url('assets/images/ui/frame-green.png');
}

.inventory-item.artifact:hover:not(.locked) {
    background-image: url('assets/images/ui/frame-green.png');
}

/* Loanable collection artifacts: clickable but keep game default cursor (not browser pointer) */
.inventory-item.artifact.artifact-loanable,
.inventory-item.artifact.artifact-loanable:hover:not(.locked) {
    cursor: var(--cursor-default) !important;
}

.inventory-item:hover:not(.locked) {
    background-image: url('assets/images/ui/frame-hover.png');
}

/* When placing (click or drag), inherit body's cursor (set via JS with absolute URL for reliable loading) */
body.placing-item .side-panel,
body.placing-item .side-panel .inventory-item:not(.locked) {
    cursor: inherit !important;
}

/* Shield selected for placement - keep highlighted like hover so player sees which one they're applying */

.inventory-item.shield-selected,
.inventory-item.placing-active {
    background-image: url('assets/images/ui/frame-hover.png');
}
.inventory-item.shield-selected {
    cursor: var(--cursor-drag);
}

.inventory-item.locked {
    opacity: 0.3;
    cursor: var(--cursor-x);
}

.inventory-item.locked:hover {
    transform: none;
    cursor: var(--cursor-x);
    /* Keep original frame background based on item type, don't use hover frame */
}

/* Explicitly maintain frame colors for locked items on hover */
.inventory-item.locked.tower:hover {
    background-image: url('assets/images/ui/frame-blue.png');
}

.inventory-item.locked.item:hover {
    background-image: url('assets/images/ui/frame-purple.png');
}

.inventory-item.locked.powerup:hover {
    background-image: url('assets/images/ui/frame-red.png');
}

/* Shop bundle cards: discount badge in top-left (~half of 56px item art) */
.inventory-item.shop-bundle-discount .shop-discount-badge {
    position: absolute;
    top: 1px;
    left: 4px;
    width: 40px;
    height: auto;
    z-index: 30;
    pointer-events: none;
}

.inventory-item .icon {
    /* Icon area behaves like tower graphics: fixed-size relative box with absolute-centered content */
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    overflow: visible;
}

.inventory-item .icon .icon-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Allow sprite graphics to exceed the icon box when needed */
.inventory-item .icon .icon-inner img {
    max-width: none;
    max-height: none;
}

.inventory-item .icon .icon-inner .emoji-icon {
    font-size: 32px;
    line-height: 1;
}

.inventory-item .name {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
}

.inventory-item .count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff6b35;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

/* Stack quantity (bombs, shields, upgrade plans, movement tokens) — bottom-right of card */
.inventory-item .inventory-stack-count {
    position: absolute;
    bottom: 20px;
    right: 17px;
    text-align:right;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85), -1px -1px 2px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    pointer-events: none;
}

/* Inventory tab only: shift upgrade plan scroll art down (shop unchanged) */
#upgrade-plan-inventory > .icon, #movement-token-inventory > .icon, #specialty-plan-inventory > .icon, #tree-juice-inventory > .icon {
    margin-top: 10px;
}

/* Upgrades List */
.upgrades-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upgrade-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #2a2a4a;
    border-radius: 8px;
    padding: 16px;
    cursor: var(--cursor-default);
    transition: all 0.3s;
}

.upgrade-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4CAF50;
}

.upgrade-item .title {
    font-weight: bold;
    margin-bottom: 4px;
}

.upgrade-item .description {
    font-size: 12px;
    color: #aaa;
}

.empty-message {
    color: #666;
    text-align: center;
    padding: 40px 20px;
    font-style: italic;
}

/* Controls */
.controls {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 0;
    z-index: 10010; /* Above bottom-edge power-up indicators (9999) */
}

.control-btn:not(.cta-button) {
    flex: 1;
    padding: 12px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* CTA control buttons inherit everything from .cta-button */
.control-btn.cta-button {
    flex: 1;
    /* All other styling comes from .cta-button */
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Size to content — never shrink/wrap when siblings (Clear All, Back) appear. */
.controls .control-btn {
    flex: none;
    white-space: nowrap;
}

.control-btn:disabled {
    background: #333;
    color: #666;
    cursor: not-allowed;
    transform: none;
}

/* "Back" button during placement mode — flex sibling in `.controls`. */
.control-btn.placement-back-btn {
    margin-left: -10px;
}

/* Generic arrow.png is drawn as a flat colored sprite. Force it to pure white at full
   brightness for the Back button (matches the white "BACK" text), then mirror it
   horizontally so it points left. */
.placement-back-arrow {
    filter: brightness(0) invert(1);
    transform: scaleX(-1);
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* Very transparent to allow modal blur to work on canvas */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    /* Don't blur the overlay itself - let the modal do the blurring */
}

.modal-overlay.upgrade-token-mask {
    background: rgba(0, 0, 0, 0.85);
}

/* Padding handled by JavaScript dynamically */

.modal-overlay.skip-upgrade-mask {
    background: rgba(0, 0, 0, 0.85);
}

/* Save/Load modals - dark background mask to cover underlying modals */
.modal-overlay.save-load-mask {
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000; /* Higher than settings modal (1000) to appear on top */
}

/* Splash Screen Overlay - Full Viewport */
.splash-screen {
    background: rgba(0, 0, 0, 1);
    padding: 0;
}

/* Wave modals (placement, complete, group complete) - same darkness as settings */
#waveCompleteModal {
    background: rgba(0, 0, 0, 0.85);
}

#waveCompleteModal.modal-overlay.victory-modal {
    overflow-x: visible;
}

/* Modal content above hero graphic (hero appears behind modal text/buttons) */
#waveCompleteModal .modal {
    position: relative;
    z-index: 2;
}

/* 3-star rating cluster (wave complete + realms map) */
.star-rating {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}
.star-rating-slot {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.star-rating-slot--left {
    z-index: 1;
}
.star-rating-slot--right {
    z-index: 2;
}
.star-rating-slot--mid {
    z-index: 3;
}
.star-rating-empty,
.star-rating-fill {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    pointer-events: none;
}
.star-rating-fill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transform-origin: 50% 60%;
}
.star-rating-fill--pop {
    animation: starRatingPopIn 0.58s cubic-bezier(0.22, 1.55, 0.32, 1) both;
}
.star-rating-fill--perfect {
    z-index: 2;
}

.star-rating--modal .star-rating-slot--left,
.star-rating--modal .star-rating-slot--right {
    width: 60px;
    height: 59px;
    margin: 0 -16px;
}
.star-rating--modal .star-rating-slot--mid {
    width: 78px;
    height: 77px;
    margin: 0 -13px;
    transform: translateY(-10px);
}
.wave-complete-star-rating {
    position: absolute;
    left: 50%;
    top: 14%;
    transform: translate(-50%, calc(-20% - 20px));
    z-index: 4;
    width: max-content;
}
.wave-complete-star-rating.is-cinematic-pending {
    visibility: hidden;
}

.wave-complete-header-container {
    overflow: visible;
    padding-top: 30px;
}
.wave-complete-header-container > div:not(.wave-complete-star-rating) {
    top: calc(50% + 15px) !important;
}

/* Stars sit above the title; don't clip them at the modal content box. */
#waveCompleteModal:not(.placement-phase) .modal-frame-content {
    overflow: visible;
}

/* Clash-style wave-complete star showcase (center pops, then fly to the title) */
.star-cinematic {
    --rays-on-opacity: 0.42;
    --glow-on-opacity: 0.5;
    --mask-on-opacity: 1;
    --ray-spin-dur: 18s;
    --mote-max: 0.55;
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    contain: layout style;
}
.star-cinematic-ray-canvas,
.star-cinematic-fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.star-cinematic-ray-canvas {
    z-index: 1;
    mix-blend-mode: screen;
}
.star-cinematic-fx-canvas {
    z-index: 2;
}
.star-cinematic[data-flourish="1"] {
    --rays-on-opacity: 0.16;
    --glow-on-opacity: 0.22;
    --mask-on-opacity: 0.72;
    --mote-max: 0.28;
}
.star-cinematic[data-flourish="2"] {
    --rays-on-opacity: 0.4;
    --glow-on-opacity: 0.48;
    --mask-on-opacity: 0.88;
    --mote-max: 0.45;
}
.star-cinematic[data-flourish="3"] {
    --rays-on-opacity: 0.72;
    --glow-on-opacity: 0.82;
    --mask-on-opacity: 1;
    --mote-max: 0.65;
}
.star-cinematic[data-flourish="4"] {
    --rays-on-opacity: 1;
    --glow-on-opacity: 1;
    --mask-on-opacity: 1;
    --mote-max: 0.9;
}
.star-cinematic-mask {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(40, 70, 110, 0.28) 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0.88) 100%);
    opacity: 0;
    transition: opacity 0.42s ease;
    pointer-events: auto;
}
.star-cinematic.is-on .star-cinematic-mask {
    opacity: var(--mask-on-opacity, 1);
}
.star-cinematic.is-outro .star-cinematic-mask {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.62s ease;
}
.star-cinematic-rays {
    position: absolute;
    width: 140vmax;
    height: 140vmax;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(0.6px);
    mix-blend-mode: screen;
    transition: opacity 0.35s ease, transform 0.55s ease, filter 0.35s ease;
}
.star-cinematic-rays-spin {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.0) 0deg 9deg,
        rgba(255, 215, 0, 0.16) 10deg 13deg,
        rgba(125, 211, 252, 0.08) 14deg 16deg,
        rgba(255, 215, 0, 0.0) 17deg 24deg
    );
    -webkit-mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.65) 38%, transparent 70%);
    mask-image: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.65) 38%, transparent 70%);
    animation: starCinematicRaySpin var(--ray-spin-dur, 18s) linear infinite;
}
.star-cinematic-rays--alt .star-cinematic-rays-spin {
    animation-direction: reverse;
    animation-duration: calc(var(--ray-spin-dur, 18s) * 1.4);
    opacity: 0.55;
    background: repeating-conic-gradient(
        from 8deg,
        rgba(255, 215, 0, 0.0) 0deg 11deg,
        rgba(255, 236, 170, 0.2) 12deg 14deg,
        rgba(255, 120, 60, 0.1) 15deg 17deg,
        rgba(255, 215, 0, 0.0) 18deg 28deg
    );
}
.star-cinematic.is-on .star-cinematic-rays {
    opacity: var(--rays-on-opacity, 0.72);
    transform: translate(-50%, -50%) scale(1);
}
.star-cinematic.is-perfect-surge .star-cinematic-rays {
    opacity: 1;
    filter: blur(0.35px) saturate(1.35) brightness(1.28);
}
.star-cinematic.is-outro .star-cinematic-rays {
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.5s ease;
}
.star-cinematic-glow {
    position: absolute;
    width: min(90vmin, 720px);
    height: min(90vmin, 720px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.28) 0%, rgba(125, 211, 252, 0.1) 38%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
    transition: opacity 0.4s ease;
}
.star-cinematic.is-on .star-cinematic-glow,
.star-cinematic.is-perfect-surge .star-cinematic-glow {
    opacity: 0;
}
.star-cinematic.is-outro .star-cinematic-glow {
    opacity: 0;
}

.star-cinematic-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.star-cinematic-mote {
    position: absolute;
    left: 50%;
    top: 48%;
    width: var(--size, 8px);
    height: var(--size, 8px);
    margin: calc(var(--size, 8px) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 35%, #ffd24a 40% 100%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.85);
    opacity: 0;
    animation: starCinematicMote var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}
.star-cinematic[data-flourish="1"] .star-cinematic-mote {
    filter: blur(0.4px);
}

.star-rating--cinematic {
    position: relative;
    z-index: 3;
    transform: scale(0.86);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.22, 1.2, 0.32, 1);
}
.star-cinematic.is-on .star-rating--cinematic {
    opacity: 1;
    transform: scale(1);
}
.star-rating--cinematic .star-rating-empty {
    opacity: 0.58;
    filter: brightness(0.9) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.star-cinematic.is-outro .star-rating--cinematic .star-rating-empty,
.star-cinematic.is-outro .star-rating--cinematic .star-rating-fill {
    filter: none;
}
.star-rating--cinematic .star-rating-slot {
    will-change: transform;
    overflow: visible;
}
.star-rating--cinematic .star-rating-slot--left,
.star-rating--cinematic .star-rating-slot--right {
    width: min(28vw, 220px);
    height: min(27.6vw, 217px);
    margin: 0 calc(min(28vw, 220px) * -0.27);
}
.star-rating--cinematic .star-rating-slot--mid {
    width: min(36vw, 286px);
    height: min(35.6vw, 283px);
    margin: 0 calc(min(36vw, 286px) * -0.17);
    transform: translateY(-11%);
}
.star-rating--cinematic .star-rating-fill {
    opacity: 0;
    transform: scale(0.12) rotate(var(--spin-from, -110deg));
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.star-rating--cinematic .star-rating-fill--perfect {
    transform: scale(0.08);
}
.star-rating--cinematic .star-rating-fill.is-popped {
    animation: starCinematicPop 0.56s cubic-bezier(0.18, 1.62, 0.32, 1) both;
}
.star-rating--cinematic .star-rating-fill--perfect.is-popped {
    animation: starCinematicPopPerfect 0.56s cubic-bezier(0.18, 1.62, 0.32, 1) both;
}

.star-cinematic-perfect-word {
    position: absolute;
    z-index: 6;
    margin: 0;
    padding: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: "Luckiest Guy", "Lilita One", Impact, sans-serif;
    font-size: clamp(44px, 7.4vw, 92px);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 0.9;
    color: #ffe566;
    text-shadow:
        0 0 10px rgba(255, 220, 80, 0.95),
        0 0 28px rgba(255, 180, 40, 0.55),
        0 3px 0 #c47a00,
        0 6px 0 #7a3e00,
        0 10px 18px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.35);
    transform-origin: 50% 100%;
}
.star-cinematic-perfect-word.is-on {
    animation: starPerfectWordIn 0.62s cubic-bezier(0.16, 1.55, 0.32, 1) forwards;
}
.star-cinematic.is-outro .star-cinematic-perfect-word {
    animation: starPerfectWordOut 0.64s ease forwards;
}
@keyframes starPerfectWordIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -36%) scale(0.28);
    }
    58% {
        opacity: 1;
        transform: translate(-50%, -112%) scale(1.16);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -104%) scale(1);
    }
}
@keyframes starPerfectWordOut {
    from {
        opacity: 1;
        transform: translate(-50%, -104%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -168%) scale(0.86);
    }
}

.star-cinematic-burst {
    position: absolute;
    inset: -35%;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}
.star-cinematic-spark {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 9px;
    height: 9px;
    margin: -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0 38%, #ffd700 40% 100%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
    opacity: 0;
    transform: rotate(var(--a)) translateY(0) scale(0.15);
}
.star-rating-slot.is-popped .star-cinematic-spark {
    animation: starCinematicSpark 0.62s ease-out forwards;
}
.star-cinematic-ring {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 42%;
    height: 42%;
    margin: -21% 0 0 -21%;
    border: 2px solid rgba(255, 224, 140, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
    opacity: 0;
    pointer-events: none;
}
.star-rating-slot.is-popped .star-cinematic-ring {
    animation: starCinematicRing 0.68s ease-out forwards;
}
.star-cinematic-shard {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 3px;
    height: 16px;
    margin-left: -1.5px;
    border-radius: 1px;
    background: linear-gradient(#fff, #ffd24a);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8);
    opacity: 0;
    pointer-events: none;
}
.star-rating-slot.is-popped .star-cinematic-shard {
    animation: starCinematicShard 0.72s ease-out forwards;
}
.star-cinematic-orbit {
    position: absolute;
    inset: 8%;
    pointer-events: none;
    animation: starCinematicOrbitSpin 3.6s linear infinite;
    opacity: 0;
}
.star-rating-slot.is-popped .star-cinematic-orbit {
    opacity: 0.9;
}
.star-cinematic-orbit em {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px;
    border-radius: 50%;
    background: #fff6c2;
    box-shadow: 0 0 8px rgba(255, 230, 140, 0.95);
    transform: rotate(var(--a)) translateY(-118%);
    display: block;
}

.star-cinematic-perfect-boom {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.star-cinematic-perfect-flash {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 28vmax;
    height: 28vmax;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 230, 0.95) 0%, rgba(255, 210, 70, 0.45) 32%, transparent 70%);
    mix-blend-mode: screen;
    animation: starPerfectFlash 0.7s ease-out forwards;
}
.star-cinematic-perfect-ring {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 12vmax;
    height: 12vmax;
    margin: -6vmax 0 0 -6vmax;
    border: 3px solid rgba(255, 236, 170, 0.9);
    border-radius: 50%;
    animation: starPerfectRing 0.85s cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}
.star-cinematic-perfect-flare {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 90vmax;
    height: 4px;
    margin: -2px 0 0 -45vmax;
    background: linear-gradient(90deg, transparent, rgba(255, 240, 180, 0.95), #fff, rgba(255, 240, 180, 0.95), transparent);
    mix-blend-mode: screen;
    animation: starPerfectFlare 0.65s ease-out forwards;
    filter: blur(0.6px);
}
.star-cinematic-confetti {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 8px;
    height: 8px;
    margin: -4px;
    border-radius: 1px;
    opacity: 0;
    animation: starCinematicConfetti 0.95s cubic-bezier(0.12, 0.72, 0.28, 1) forwards;
    animation-delay: var(--delay, 0ms);
    box-shadow: 0 0 8px currentColor;
}
.star-rating-slot.is-perfect-finale {
    z-index: 5;
}

@keyframes starCinematicRaySpin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes starCinematicPop {
    0% {
        opacity: 0;
        transform: scale(0.12) rotate(var(--spin-from, -110deg));
    }
    58% {
        opacity: 1;
        transform: scale(1.22) rotate(var(--spin-mid, 14deg));
    }
    78% {
        transform: scale(0.9) rotate(var(--spin-back, -4deg));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}
@keyframes starCinematicPopPerfect {
    0% {
        opacity: 0;
        transform: scale(0.08);
    }
    55% {
        opacity: 1;
        transform: scale(1.38);
    }
    78% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes starCinematicSpark {
    0% {
        opacity: 1;
        transform: rotate(var(--a)) translateY(8px) scale(0.45);
    }
    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateY(calc(-1 * var(--d, 78px))) scale(0.05);
    }
}
@keyframes starCinematicRing {
    0% {
        opacity: 0.85;
        transform: scale(0.2);
    }
    100% {
        opacity: 0;
        transform: scale(2.35);
    }
}
@keyframes starCinematicShard {
    0% {
        opacity: 1;
        transform: rotate(var(--a)) translateY(6px) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateY(-108px) scale(0.35);
    }
}
@keyframes starCinematicOrbitSpin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes starCinematicMote {
    0%, 100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(0.4);
    }
    20% {
        opacity: var(--mote-max, 0.55);
    }
    50% {
        opacity: calc(var(--mote-max, 0.55) * 0.7);
        transform: translate(calc(var(--x) * 0.7), calc(var(--y) - 6vh)) scale(1);
    }
    80% {
        opacity: 0.25;
    }
}
@keyframes starPerfectFlash {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.4);
    }
}
@keyframes starPerfectRing {
    0% {
        opacity: 0.95;
        transform: scale(0.15);
    }
    100% {
        opacity: 0;
        transform: scale(6.2);
    }
}
@keyframes starPerfectFlare {
    0% {
        opacity: 0;
        transform: scaleX(0.15);
    }
    24% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1.05);
    }
}
@keyframes starCinematicConfetti {
    0% {
        opacity: 1;
        transform: rotate(var(--a)) translateY(8px) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: rotate(var(--a)) translateY(calc(-1 * var(--d, 160px))) rotate(var(--rot, 180deg)) scale(0.4);
    }
}

.star-rating--map .star-rating-slot--left,
.star-rating--map .star-rating-slot--right {
    width: 58px;
    height: 57px;
    margin: 0 -14px;
}
.star-rating--map .star-rating-slot--mid {
    width: 76px;
    height: 75px;
    margin: 0 -11px;
    transform: translateY(-11px);
}
.map-progression-stars {
    position: absolute;
    left: 50%;
    top: calc(26% - 15px);
    transform: translate(-50%, -50%);
    z-index: 5;
    width: max-content;
}

@keyframes starRatingPopIn {
    0% {
        opacity: 0;
        transform: scale(0.18);
    }
    58% {
        opacity: 1;
        transform: scale(1.38);
    }
    78% {
        transform: scale(0.88);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .star-rating-fill--pop {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .star-cinematic,
    .star-cinematic-rays,
    .star-cinematic-rays-spin,
    .star-rating--cinematic .star-rating-fill.is-popped,
    .star-rating-slot.is-popped .star-cinematic-spark,
    .star-rating-slot.is-popped .star-cinematic-ring,
    .star-rating-slot.is-popped .star-cinematic-shard,
    .star-cinematic-orbit,
    .star-cinematic-mote,
    .star-cinematic-perfect-flash,
    .star-cinematic-perfect-ring,
    .star-cinematic-perfect-flare,
    .star-cinematic-confetti,
    .star-cinematic-perfect-word {
        animation: none !important;
        transition: none !important;
    }
}

.modal-overlay.artifact-trader-modal .modal {
    z-index: 3;
    max-width: calc(100vw - 48px);
    width: 100%;
}

/* Trader portrait — scoped to artifact-trader modal + portrait class only (campaign heroes unchanged) */
.modal-overlay.artifact-trader-modal > .wave-complete-hero-graphic.artifact-trader-portrait {
    z-index: 4;
    left: 0;
    width: 260px !important;
    /* img + pill are position:absolute, so height:auto collapses to 0 and paints the sprite below the viewport */
    height: min(48vh, 380px) !important;
    min-height: 280px;
    max-height: min(52vh, 420px);
    overflow: visible;
    transform-origin: bottom left;
    transform: translateX(-100%) scale(1);
    opacity: 0;
}

.modal-overlay.artifact-trader-modal > .wave-complete-hero-graphic.artifact-trader-portrait.shifted-in {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.modal-overlay.artifact-trader-modal > .wave-complete-hero-graphic.artifact-trader-portrait img {
    width: 240px !important;
    max-height: calc(100% - 52px);
    height: auto;
    left: 0 !important;
    top: auto;
    bottom: 52px;
    object-fit: contain;
    object-position: left bottom;
    transform: scaleX(-1);
    transform-origin: center bottom;
}

.modal-overlay.artifact-trader-modal > .wave-complete-hero-graphic.artifact-trader-portrait img.pulsing {
    animation: waveCompleteHeroPulseArtifactTrader 2s ease-in-out infinite;
}

@keyframes waveCompleteHeroPulseArtifactTrader {
    0%, 100% {
        transform: scaleX(-1) translateY(0);
    }
    50% {
        transform: scaleX(-1) translateY(-8px);
    }
}

.modal-overlay.artifact-trader-modal > .wave-complete-hero-graphic.artifact-trader-portrait .wave-complete-hero-pill {
    left: 28px;
}

.modal-overlay.artifact-trader-modal .character-speech-bubble.character-speech-bubble-hero,
#waveCompleteModal.placement-phase .character-speech-bubble.character-speech-bubble-hero {
    z-index: 5;
}

/* Wave complete hero graphic - bottom left, fixed pixel dimensions (no viewport scaling) */
/* z-index: 1 so it appears behind modal content but above the overlay background mask */
/* 20% larger: scale(1.2) with bottom-left origin */
.wave-complete-hero-graphic {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 520px;
    max-height: 100vh;
    overflow: visible;
    margin-left: 0px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform-origin: bottom left;
    transform: translateX(-100%) scale(1.2);
    transition:
        opacity 0.4s ease-in,
        transform 0.4s ease-in,
        width 0.35s ease-in-out,
        height 0.35s ease-in-out;
}

.wave-complete-hero-graphic.shifted-in {
    opacity: 1;
    transform: translateX(0) scale(1.2);
}

/* Instant swap during artifact-trader ↔ placement morph (no width/height/transform tween) */
.wave-complete-hero-graphic.hero-portrait-instant-swap,
.wave-complete-hero-graphic.hero-portrait-instant-swap img {
    transition: none !important;
}

.wave-complete-hero-graphic img.pulsing {
    animation: waveCompleteHeroPulse 2s ease-in-out infinite;
}

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

/* Personal best / high-score ribbons on wave-complete fires stat */
@keyframes waveCompleteStatCelebratePulse {
    0%, 100% {
        transform: rotate(35deg) scale(1);
    }
    50% {
        transform: rotate(35deg) scale(1.08);
    }
}

.wave-complete-stat-celebrate {
    animation: waveCompleteStatCelebratePulse 1.15s ease-in-out infinite;
    transform-origin: center center;
}

.wave-complete-high-score {
    position: absolute;
    top: 10px;
    right: -22px;
    font-size: 13px;
    line-height: 13px;
    width: 60px;
    text-align: center;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0;
    font-family: "Exo 2", sans-serif;
}

.wave-complete-hero-graphic img {
    position: absolute;
    top: 50px;
    left: 0;
    width: 400px;
    height: auto;
    object-fit: contain;
    object-position: top left;
    image-rendering: crisp-edges;
    transform: scaleX(-1);
    transition: width 0.35s ease-in-out, opacity 0.25s ease-in-out;
}

/* Hero size variants - container/img only; pill stays fixed size */
.wave-complete-hero-graphic.hero-size-78\.75 {
    width: 315px;
    height: 410px;
}
.wave-complete-hero-graphic.hero-size-78\.75 img {
    width: 315px;
}

.wave-complete-hero-graphic.hero-size-90 {
    width: 360px;
    height: 468px;
}
.wave-complete-hero-graphic.hero-size-90 img {
    width: 360px;
}

.wave-complete-hero-graphic.hero-size-120 {
    width: 480px;
    height: 624px;
}
.wave-complete-hero-graphic.hero-size-120 img {
    width: 480px;
}

.wave-complete-hero-graphic.hero-size-110 {
    width: 440px;
    height: 572px;
}
.wave-complete-hero-graphic.hero-size-110 img {
    width: 440px;
}

.wave-complete-hero-graphic.hero-size-135 {
    width: 540px;
    height: 702px;
}
.wave-complete-hero-graphic.hero-size-135 img {
    width: 540px;
}

.wave-complete-hero-graphic.hero-size-140\.6 {
    width: 563px;
    height: 731px;
}
.wave-complete-hero-graphic.hero-size-140\.6 img {
    width: 563px;
}

.wave-complete-hero-graphic.hero-size-125 {
    width: 500px;
    height: 650px;
}
.wave-complete-hero-graphic.hero-size-125 img {
    width: 500px;
}

.wave-complete-hero-graphic.hero-size-150 {
    width: 600px;
    height: 780px;
}
.wave-complete-hero-graphic.hero-size-150 img {
    width: 600px;
}

/* Group 19: 85% of hero-size-150 (600×780 → 510×663) */
.wave-complete-hero-graphic.hero-size-127\.5 {
    width: 510px;
    height: 663px;
}
.wave-complete-hero-graphic.hero-size-127\.5 img {
    width: 510px;
}

.wave-complete-hero-graphic.hero-size-160 {
    width: 640px;
    height: 832px;
}
.wave-complete-hero-graphic.hero-size-160 img {
    width: 640px;
}

.wave-complete-hero-graphic.hero-size-144 {
    width: 576px;
    height: 749px;
}
.wave-complete-hero-graphic.hero-size-144 img {
    width: 576px;
}

.wave-complete-hero-graphic.hero-size-170 {
    width: 680px;
    height: 884px;
}
.wave-complete-hero-graphic.hero-size-170 img {
    width: 680px;
}

/* Hero vertical shift - move img down (base top: 50px) */
.wave-complete-hero-graphic.hero-shift-100 img {
    top: 150px;
}
.wave-complete-hero-graphic.hero-shift-50 img {
    top: 100px;
}
.wave-complete-hero-graphic.hero-shift-150 img {
    top: 200px;
}
.wave-complete-hero-graphic.hero-shift-200 img {
    top: 250px;
}
.wave-complete-hero-graphic.hero-shift-300 img {
    top: 350px;
}
/* Group 19: vertical position (includes −50px up from prior) */
.wave-complete-hero-graphic.hero-shift-280 img {
    top: 210px;
}

/* Hero vertical shift - move img up (base top: 50px) */
.wave-complete-hero-graphic.hero-shift-up-50 img {
    top: 0;
}
.wave-complete-hero-graphic.hero-shift-up-100 img {
    top: -50px;
}
.wave-complete-hero-graphic.hero-shift-up-150 img {
    top: -100px;
}

/* Hero vertical shift - move img down */
.wave-complete-hero-graphic.hero-shift-down-25 img {
    top: 75px;
}
.wave-complete-hero-graphic.hero-shift-down-50 img {
    top: 100px;
}
.wave-complete-hero-graphic.hero-shift-down-75 img {
    top: 125px;
}
.wave-complete-hero-graphic.hero-shift-down-80 img {
    top: 130px;
}
.wave-complete-hero-graphic.hero-shift-down-100 img {
    top: 150px;
}
.wave-complete-hero-graphic.hero-shift-down-200 img {
    top: 250px;
}

/* Hero horizontal shift - move img left */
.wave-complete-hero-graphic.hero-shift-left-50 img {
    left: -50px;
}
.wave-complete-hero-graphic.hero-shift-left-100 img {
    left: -100px;
}
.wave-complete-hero-graphic.hero-shift-left-200 img {
    left: -200px;
}
/* Group 19: horizontal (includes −30px left from prior) */
.wave-complete-hero-graphic.hero-shift-left-250 img {
    left: -130px;
}

/* Group 18: 40px left */
.wave-complete-hero-graphic.hero-shift-left-40 img {
    left: -40px;
}

/* Hero name/title pill - frame-nameplate.png background, like boss overlay */
/* Positioned to stay fully visible (container has 80px off left edge) */
.wave-complete-hero-pill {
    position: absolute;
    bottom: 12px;
    left: 100px;
    right: auto;
    box-sizing: border-box;
    width: max-content;
    aspect-ratio: 398 / 186;
    padding: 13px 35px;
    background: transparent url('assets/images/ui/frame-nameplate.png') center / 100% 100% no-repeat;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    z-index: 2;
}

.wave-complete-hero-pill-name {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    font-family: "Exo 2", sans-serif;
    line-height: 1.2;
    text-transform: uppercase;
}

.wave-complete-hero-pill-title {
    color: #FFFFFF;
    font-size: 10px;
    font-family: "Exo 2", sans-serif;
    line-height: 1.2;
}

/* Character speech bubble - white bg, black text, tail pointing down */
.character-speech-bubble {
    position: fixed;
    width: fit-content;
    min-width: 0;
    max-width: 340px;
    padding: 25px 25px 30px 25px;
    background: #151B29;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 400;
    font-family: "Exo 2", sans-serif;
    line-height: 1.4;
    text-align: center;
    border-radius: 55px;
    box-shadow: 0 0 10px rgba(143, 255, 141, 0.6),0 0 60px rgba(70, 255, 70, 0.8);
    pointer-events: none;
    z-index: 10;
}

.character-speech-bubble::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    margin-left: -20px;
    border: 20px solid transparent;
    border-top-color: #151B29;
}

/* Tail centered for hero speech bubble */
.character-speech-bubble-hero::after {
    left: 50%;
    margin-left: -20px;
}

/* Group 30 rotating allies: stay below hero portrait tooltips */
.survival-hero-speech-bubble {
    z-index: 9000;
}

/* Boss speech bubble: shrinks to fit content, black text (story classes can override for effects) */
.character-speech-bubble-boss {
    width: fit-content;
    min-width: 280px;
    max-width: 340px;
    color: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 83, 83, 0.8), 0 0 60px rgb(255, 11, 11);
}

/* Tail points toward boss on right */
.character-speech-bubble-boss::after {
    left: 50%;
    margin-left: -10px;
}

/* Speech bubbles: desaturate story color classes by 15% (brightness unchanged) */
.character-speech-bubble :is(
    .text-grove,
    .text-water,
    .text-fire,
    .text-upgrade,
    .text-hexalon,
    .text-rainbow,
    .text-fire-cinder,
    .text-fire-flame,
    .text-fire-blaze,
    .text-fire-firestorm,
    .text-fire-inferno,
    .text-fire-cataclysm,
    .text-fire-blackfyre
) {
    filter: saturate(85%);
}

/*
 * Gradient / cycle text: filter does not reliably affect background-clip gradients.
 * Override color tokens only (never the background shorthand) so clipping stays intact.
 */
.character-speech-bubble .text-gradient-fire {
    --text-grad-fire-a: #f28a60;
    --text-grad-fire-b: #ee2828;
    --text-grad-fire-c: #ecaf14;
    --text-grad-fire-d: #e81313;
}
.character-speech-bubble .text-gradient-grove {
    --text-grad-grove-a: #27eabd;
    --text-grad-grove-b: #52ef33;
    --text-grad-grove-c: #baf36b;
    --text-grad-grove-d: #33ef8a;
}
.character-speech-bubble .text-gradient-water {
    --text-grad-water-a: #3362ef;
    --text-grad-water-b: #3b99ef;
    --text-grad-water-c: #528ff1;
    --text-grad-water-d: #4b88f1;
    --text-grad-water-e: #4051f0;
}
.character-speech-bubble .text-gradient-upgrade {
    --text-grad-upgrade-a: #c946ea;
    --text-grad-upgrade-b: #f473df;
    --text-grad-upgrade-c: #ee2593;
    --text-grad-upgrade-d: #d633ef;
}
.character-speech-bubble .text-gradient-hexalon {
    --text-grad-hexalon-a: #a75f26;
    --text-grad-hexalon-b: #ec9913;
    --text-grad-hexalon-c: #b6681e;
    --text-grad-hexalon-d: #ed5a23;
}
/* Rainbow spans many hues — ~65% saturation in bubbles (solids use filter 85% on one color) */
.character-speech-bubble .text-gradient-rainbow {
    --text-grad-rainbow-a: #df2020;
    --text-grad-rainbow-b: #df8620;
    --text-grad-rainbow-c: #dfdf20;
    --text-grad-rainbow-d: #20df20;
    --text-grad-rainbow-e: #20dfdf;
    --text-grad-rainbow-f: #2086df;
    --text-grad-rainbow-g: #df20df;
}
.character-speech-bubble .text-cycle-fire {
    --text-cycle-fire-a: #ec1313;
    --text-cycle-fire-b: #ecba13;
    --text-cycle-fire-c: #ec6d13;
}
.character-speech-bubble .text-cycle-grove {
    --text-cycle-grove-a: #27ea72;
    --text-cycle-grove-b: #b0ef33;
    --text-cycle-grove-c: #33ef68;
}
.character-speech-bubble .text-cycle-water {
    --text-cycle-water-a: #337bef;
    --text-cycle-water-b: #17d7ec;
    --text-cycle-water-c: #39acef;
}
.character-speech-bubble .text-cycle-upgrade {
    --text-cycle-upgrade-a: #c946ea;
    --text-cycle-upgrade-b: #f473df;
    --text-cycle-upgrade-c: #d633ef;
}
.character-speech-bubble .text-cycle-hexalon {
    --text-cycle-hexalon-a: #a75f26;
    --text-cycle-hexalon-b: #ec9913;
    --text-cycle-hexalon-c: #ed5a23;
}
.character-speech-bubble .text-cycle-rainbow {
    --text-cycle-rainbow-a: #df2020;
    --text-cycle-rainbow-b: #df8620;
    --text-cycle-rainbow-c: #dfdf20;
    --text-cycle-rainbow-d: #20df20;
    --text-cycle-rainbow-e: #20dfdf;
    --text-cycle-rainbow-f: #2086df;
    --text-cycle-rainbow-g: #df20df;
}

/* Boss power activation speech bubble - positioned above boss during casting */
.boss-power-speech-bubble {
    position: fixed;
    width: fit-content;
    min-width: 150px;
    max-width: 340px;
    margin: 0;
    padding: 15px 20px;
    font-size: 50px;
    font-weight:bold;
    pointer-events: none;
    z-index: 100001;
    box-sizing: border-box;
    transform-origin: bottom center;
    word-break: normal;
    overflow-wrap: normal;
}

/* Large floating boss ability name (e.g. PURIFY) — black halo + orange glow for legibility */
.boss-ability-float-text {
    display: inline-block;
    font-weight: 700;
    animation: bossAbilityFloatText 0.15s ease-in-out infinite alternate;
}

@keyframes bossAbilityFloatText {
    0% {
        transform: scale(1) translateY(0);
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 1),
            0 0 10px rgba(0, 0, 0, 0.95),
            0 0 22px rgba(0, 0, 0, 0.85),
            -2px -2px 0 rgba(0, 0, 0, 0.9),
            2px -2px 0 rgba(0, 0, 0, 0.9),
            -2px 2px 0 rgba(0, 0, 0, 0.9),
            2px 2px 0 rgba(0, 0, 0, 0.9),
            0 0 8px currentColor,
            0 0 18px currentColor,
            0 0 36px currentColor;
    }
    50% {
        transform: scale(1.015) translateY(-0.75px);
        text-shadow:
            0 2px 5px rgba(0, 0, 0, 1),
            0 0 12px rgba(0, 0, 0, 0.95),
            0 0 26px rgba(0, 0, 0, 0.85),
            -2px -2px 0 rgba(0, 0, 0, 0.95),
            2px -2px 0 rgba(0, 0, 0, 0.95),
            -2px 2px 0 rgba(0, 0, 0, 0.95),
            2px 2px 0 rgba(0, 0, 0, 0.95),
            0 0 10px currentColor,
            0 0 24px currentColor,
            0 0 48px currentColor;
    }
    100% {
        transform: scale(1.0075) translateY(-0.4px);
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 1),
            0 0 10px rgba(0, 0, 0, 0.95),
            0 0 22px rgba(0, 0, 0, 0.85),
            -2px -2px 0 rgba(0, 0, 0, 0.9),
            2px -2px 0 rgba(0, 0, 0, 0.9),
            -2px 2px 0 rgba(0, 0, 0, 0.9),
            2px 2px 0 rgba(0, 0, 0, 0.9),
            0 0 8px currentColor,
            0 0 18px currentColor,
            0 0 36px currentColor;
    }
}

/* ========== Text effects - colors and effects are separate and combinable ========== */
/*
 * COLORS (6): grove, water, fire, upgrade, hexalon, rainbow
 * Each has 3 variations: text-[color], text-gradient-[color], text-cycle-[color]
 *
 * EFFECTS (combinable with colors): text-wave, text-wave-fast, text-glow, text-glow-pulse,
 *   text-breathe, text-jitter, text-jitter-fast, text-shimmer, text-grow-pulse
 *
 * FIRE TYPES (game-specific): text-fire-cinder, text-fire-flame, text-fire-blaze,
 *   text-fire-firestorm, text-fire-inferno, text-fire-cataclysm
 *
 * Examples:
 *   <span class="text-fire">fire</span>
 *   <span class="text-wave text-water">water wielder</span>
 *   <span class="text-gradient-grove text-glow">shop</span>
 *   <span class="text-jitter text-fire text-uppercase">BOSSES</span>
 *   <span class="text-cycle-rainbow text-glow-pulse">rainbow pulse</span>
 */

/* ---- COLORS: solid (text-[color]) ---- */
.text-grove { color: #16fb16; font-weight: 600; }
.text-water { color: #0bcaff; font-weight: 600; }
.text-fire { color: #f34317; font-weight: 600; }
.text-upgrade { color: #ff67cf; font-weight: 600; }
.text-hexalon { color: #ff9d00; font-weight: 600; }
.text-rainbow { color: #ff8800; font-weight: 600; }

/* ---- COLORS: gradient (text-gradient-[color]) - animated ---- */

/* Gradient: fire colors across text - animated */
.text-gradient-fire {
    --text-grad-fire-a: #ff8453;
    --text-grad-fire-b: #ff1616;
    --text-grad-fire-c: #ffb701;
    --text-grad-fire-d: #fb0000;
    background: repeating-linear-gradient(90deg,
        var(--text-grad-fire-a) 0%,
        var(--text-grad-fire-b) 25%,
        var(--text-grad-fire-c) 50%,
        var(--text-grad-fire-d) 75%,
        var(--text-grad-fire-a) 100%
    );
    background-size: 50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight:bold;
    animation: textGradientFire 4s linear infinite;
}
@keyframes textGradientFire {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Gradient: grove (green) - animated */
.text-gradient-grove {
    --text-grad-grove-a: #16fbc6;
    --text-grad-grove-b: #47ff22;
    --text-grad-grove-c: #bcff5f;
    --text-grad-grove-d: #22ff89;
    background: repeating-linear-gradient(90deg,
        var(--text-grad-grove-a) 0%,
        var(--text-grad-grove-b) 25%,
        var(--text-grad-grove-c) 50%,
        var(--text-grad-grove-d) 75%,
        var(--text-grad-grove-a) 100%
    );
    background-size: 50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight:bold;
    animation: textGradientGrove 4s linear infinite;
}
@keyframes textGradientGrove {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Gradient: water (blue) - animated */
.text-gradient-water {
    --text-grad-water-a: #2259ff;
    --text-grad-water-b: #2b99ff;
    --text-grad-water-c: #448cff;
    --text-grad-water-d: #3c84ff;
    --text-grad-water-e: #3044ff;
    background: repeating-linear-gradient(90deg,
        var(--text-grad-water-a) 0%,
        var(--text-grad-water-b) 25%,
        var(--text-grad-water-c) 50%,
        var(--text-grad-water-d) 75%,
        var(--text-grad-water-e) 100%
    );
    background-size: 50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight:bold;
    animation: textGradientWater 4s linear infinite;
}
@keyframes textGradientWater {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Gradient: upgrade (purple) - animated */
.text-gradient-upgrade {
    --text-grad-upgrade-a: #d137f8;
    --text-grad-upgrade-b: #ff67e7;
    --text-grad-upgrade-c: #ff1395;
    --text-grad-upgrade-d: #e222ff;
    background: repeating-linear-gradient(90deg,
        var(--text-grad-upgrade-a) 0%,
        var(--text-grad-upgrade-b) 25%,
        var(--text-grad-upgrade-c) 50%,
        var(--text-grad-upgrade-d) 75%,
        var(--text-grad-upgrade-a) 100%
    );
    background-size: 50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight:bold;
    animation: textGradientUpgrade 4s linear infinite;
}
@keyframes textGradientUpgrade {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Gradient: hexalon (orange) - animated */
.text-gradient-hexalon {
    --text-grad-hexalon-a: #b25e1a;
    --text-grad-hexalon-b: #ff9d00;
    --text-grad-hexalon-c: #c36710;
    --text-grad-hexalon-d: #ff5111;
    background: repeating-linear-gradient(90deg,
        var(--text-grad-hexalon-a) 0%,
        var(--text-grad-hexalon-b) 25%,
        var(--text-grad-hexalon-c) 50%,
        var(--text-grad-hexalon-d) 75%,
        var(--text-grad-hexalon-a) 100%
    );
    background-size: 50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-weight:bold;
    animation: textGradientHexalon 4s linear infinite;
}
@keyframes textGradientHexalon {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Rainbow gradient - seamless loop (repeating pattern, scroll by one tile) */
.text-gradient-rainbow {
    --text-grad-rainbow-a: #ff0000;
    --text-grad-rainbow-b: #ff8800;
    --text-grad-rainbow-c: #ffff00;
    --text-grad-rainbow-d: #00ff00;
    --text-grad-rainbow-e: #00ffff;
    --text-grad-rainbow-f: #0088ff;
    --text-grad-rainbow-g: #ff00ff;
    background: repeating-linear-gradient(90deg,
        var(--text-grad-rainbow-a) 0%,
        var(--text-grad-rainbow-b) 12.5%,
        var(--text-grad-rainbow-c) 25%,
        var(--text-grad-rainbow-d) 37.5%,
        var(--text-grad-rainbow-e) 50%,
        var(--text-grad-rainbow-f) 62.5%,
        var(--text-grad-rainbow-g) 75%,
        var(--text-grad-rainbow-a) 87.5%
    );
    background-size: 50% 100%;
    font-weight:bold;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    animation: textGradientRainbow 4s linear infinite;
}
@keyframes textGradientRainbow {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* ---- COLORS: cycle (text-cycle-[color]) - animated color transition ---- */
.text-cycle-fire {
    --text-cycle-fire-a: #ff0000;
    --text-cycle-fire-b: #ffc400;
    --text-cycle-fire-c: #ff6a00;
    display: inline-block;
    animation: textCycleFire 2s ease-in-out infinite;
}
@keyframes textCycleFire {
    0%, 100% { color: var(--text-cycle-fire-a); }
    33% { color: var(--text-cycle-fire-b); }
    66% { color: var(--text-cycle-fire-c); }
}
.text-cycle-grove {
    --text-cycle-grove-a: #16fb6e;
    --text-cycle-grove-b: #b5ff22;
    --text-cycle-grove-c: #22ff61;
    display: inline-block;
    animation: textCycleGrove 2s ease-in-out infinite;
}
@keyframes textCycleGrove {
    0%, 100% { color: var(--text-cycle-grove-a); }
    33% { color: var(--text-cycle-grove-b); }
    66% { color: var(--text-cycle-grove-c); }
}
.text-cycle-water {
    --text-cycle-water-a: #2277ff;
    --text-cycle-water-b: #04e6ff;
    --text-cycle-water-c: #29b0ff;
    display: inline-block;
    animation: textCycleWater 2s ease-in-out infinite;
}
@keyframes textCycleWater {
    0%, 100% { color: var(--text-cycle-water-a); }
    33% { color: var(--text-cycle-water-b); }
    66% { color: var(--text-cycle-water-c); }
}
.text-cycle-upgrade {
    --text-cycle-upgrade-a: #d137f8;
    --text-cycle-upgrade-b: #ff67e7;
    --text-cycle-upgrade-c: #e222ff;
    display: inline-block;
    animation: textCycleUpgrade 2s ease-in-out infinite;
}
@keyframes textCycleUpgrade {
    0%, 100% { color: var(--text-cycle-upgrade-a); }
    33% { color: var(--text-cycle-upgrade-b); }
    66% { color: var(--text-cycle-upgrade-c); }
}
.text-cycle-hexalon {
    --text-cycle-hexalon-a: #b25e1a;
    --text-cycle-hexalon-b: #ff9d00;
    --text-cycle-hexalon-c: #ff5111;
    display: inline-block;
    animation: textCycleHexalon 2s ease-in-out infinite;
}
@keyframes textCycleHexalon {
    0%, 100% { color: var(--text-cycle-hexalon-a); }
    33% { color: var(--text-cycle-hexalon-b); }
    66% { color: var(--text-cycle-hexalon-c); }
}
.text-cycle-rainbow {
    --text-cycle-rainbow-a: #ff0000;
    --text-cycle-rainbow-b: #ff8800;
    --text-cycle-rainbow-c: #ffff00;
    --text-cycle-rainbow-d: #00ff00;
    --text-cycle-rainbow-e: #00ffff;
    --text-cycle-rainbow-f: #0088ff;
    --text-cycle-rainbow-g: #ff00ff;
    display: inline-block;
    animation: textCycleRainbow 4s ease-in-out infinite;
}
@keyframes textCycleRainbow {
    0% { color: var(--text-cycle-rainbow-a); }
    14% { color: var(--text-cycle-rainbow-b); }
    28% { color: var(--text-cycle-rainbow-c); }
    42% { color: var(--text-cycle-rainbow-d); }
    57% { color: var(--text-cycle-rainbow-e); }
    71% { color: var(--text-cycle-rainbow-f); }
    85% { color: var(--text-cycle-rainbow-g); }
    100% { color: var(--text-cycle-rainbow-a); }
}

/* ---- Fire type colors (game-specific, use CSS vars from config) ---- */
.text-fire-cinder { color: var(--fire-cinder, hsl(46, 100%, 60%)); font-weight: 600; }
.text-fire-flame { color: var(--fire-flame, hsl(31, 100%, 55%)); font-weight: 600; }
.text-fire-blaze { color: var(--fire-blaze, hsl(16, 100%, 55%)); font-weight: 600; }
.text-fire-firestorm { color: var(--fire-firestorm, hsl(350, 100%, 55%)); font-weight: 600; }
.text-fire-inferno { color: var(--fire-inferno, hsl(310, 100%, 60%)); font-weight: 600; }
.text-fire-cataclysm { color: var(--fire-cataclysm, hsl(275, 100%, 60%)); font-weight: 600; }
.text-fire-blackfyre { color: var(--fire-blackfyre, hsl(275, 12%, 8%)); font-weight: 600; }

/* ---- EFFECTS (combinable, no colors) ---- */
/* Wave: letters move up/down in staggered wave (requires JS - text-wave or text-wave-fast) */
.text-wave, .text-wave-fast {
    display: inline-block;
}
.text-wave-letter {
    display: inline-block; /* Required for transform animation to work */
}
.text-wave .text-wave-letter { animation: textWaveBounce 2s ease-in-out infinite; }
.text-wave-fast .text-wave-letter { animation: textWaveBounce 1s ease-in-out infinite; }
@keyframes textWaveBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Glow: static glow (uses currentColor) */
.text-glow {
    display: inline-block;
    text-shadow: 0 0 5px currentColor, 0 0 8px currentColor, 0 0 22px currentColor, 0 0 45px currentColor;
}

/* Glow pulse: text-shadow breathes */
.text-glow-pulse {
    display: inline-block;
    animation: textGlowPulse 2s ease-in-out infinite;
}
@keyframes textGlowPulse {
    0%, 100% { text-shadow: 0 0 2px currentColor, 0 0 4px currentColor; }
    50% { text-shadow: 0 0 6px currentColor, 0 0 10px currentColor, 0 0 30px currentColor, 0 0 45px currentColor; }
}

/* Glow + Jitter: animation must include text-shadow so glow persists (animation overrides static styles) */
.text-jitter.text-glow,
.text-glow.text-jitter {
    animation: textJitterFlickerGlow 0.15s ease-in-out infinite alternate;
}
@keyframes textJitterFlickerGlow {
    0% { transform: scale(1) translateY(0); text-shadow: 0 0 5px currentColor, 0 0 8px currentColor, 0 0 22px currentColor, 0 0 45px currentColor; }
    50% { transform: scale(1.015) translateY(-0.75px); text-shadow: 0 0 5px currentColor, 0 0 8px currentColor, 0 0 22px currentColor, 0 0 45px currentColor; }
    100% { transform: scale(1.0075) translateY(-0.4px); text-shadow: 0 0 5px currentColor, 0 0 8px currentColor, 0 0 22px currentColor, 0 0 45px currentColor; }
}

/* Breathe: letter-spacing pulse */
.text-breathe {
    display: inline-block;
    animation: textLetterSpacingPulse 2s ease-in-out infinite;
}
@keyframes textLetterSpacingPulse {
    0%, 100% { letter-spacing: 0.02em; }
    50% { letter-spacing: 0.12em; }
}

/* Jitter: rapid flicker (from legacy text-fire) */
.text-jitter {
    display: inline-block;
    animation: textJitterFlicker 0.15s ease-in-out infinite alternate;
}
@keyframes textJitterFlicker {
    0% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.015) translateY(-0.75px); }
    100% { transform: scale(1.0075) translateY(-0.4px); }
}

/* Jitter fast: wobble (from legacy text-jitter) */
.text-jitter-fast {
    display: inline-block;
    animation: textJitterWobble 0.4s ease-in-out infinite;
}
@keyframes textJitterWobble {
    0%, 100% { transform: translate(0, 0); }
    12% { transform: translate(0.6px, -1px); }
    25% { transform: translate(-0.75px, 0.5px); }
    37% { transform: translate(0.5px, 0.75px); }
    50% { transform: translate(-0.6px, -0.5px); }
    62% { transform: translate(0.9px, 0.4px); }
    75% { transform: translate(-0.4px, 0.6px); }
    87% { transform: translate(0.5px, -0.6px); }
}

/* Shimmer: light sweep across text (uses currentColor - combine with text-[color]) */
.text-shimmer {
    background: linear-gradient(90deg, currentColor 0%, currentColor 35%, #fff 50%, currentColor 65%, currentColor 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: textShimmer 2.5s linear infinite;
}
@keyframes textShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

/* Grow pulse: text animates larger/smaller */
.text-grow-pulse {
    display: inline-block;
    animation: textGrowPulse 2s ease-in-out infinite;
}
@keyframes textGrowPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Utility */
.text-uppercase { text-transform: uppercase; }

.splash-modal {
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    text-align: center;
}

/* Main menu — version + feedback (top right of panel); shifted up so they sit nearer the modal top */
#settingsModal.splash-screen .splash-modal.modal-frame-9patch .modal-frame-content {
    overflow: visible;
}

.splash-menu-corner {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    transform: translateY(-50px);
}

.splash-version {
    position: relative;
    z-index: 3;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(180, 210, 255, 0.45);
    text-shadow: 0 0 8px rgba(100, 160, 255, 0.15);
    pointer-events: none;
    user-select: none;
}

.splash-feedback-btn {
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: var(--cursor-default);
    line-height: 0;
    border-radius: 8px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.splash-feedback-btn:hover {
    opacity: 0.92;
    transform: scale(1.04);
}

.splash-feedback-btn:focus-visible {
    outline: 2px solid rgba(120, 180, 255, 0.65);
    outline-offset: 3px;
}

.splash-feedback-btn img {
    display: block;
    width: auto;
    height: auto;
    max-width: 57px;
    max-height: 57px;
    image-rendering: auto;
    pointer-events: none;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px;
}

.splash-title {
    font-size: 4rem;
    font-weight: bold;
    color: #FF6B35;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.8), 0 0 40px rgba(255, 107, 53, 0.6);
    margin: 0;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 20px;
}

.splash-description {
    font-size: 1.2rem;
    color: #e0e0e0;
    line-height: 1.6;
    max-width: 600px;
    margin: 0;
}

.splash-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 630px;
}

.splash-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
}
#splashShowTutorialBtn {
    margin-left:-15px;
}
#splashLoadGameBtn {
    margin-right:-15px;
}
#splashDailyChallengeBtn {
    margin-right:-7.5px;
}
#splashLeaderboardBtn {
    margin-left:-7.5px;
}

.splash-buttons-row .splash-btn {
    flex: 1;
}

.splash-btn .splash-btn-icon {
    vertical-align: middle;
    image-rendering: crisp-edges;
    margin-right: 8px;
}

.splash-btn .splash-btn-icon-daily {
    image-rendering: auto;
    object-fit: contain;
}

/* Settings modal (inner) should appear above splash screen */
#settingsModalInner,
#advancedSettingsModal {
    z-index: 1500;
    background: rgba(0, 0, 0, 0.85); /* Dark overlay mask to cover main menu behind it */
}

/* Run history / meta progression — above advanced settings */
#runHistoryModal,
#metaProgressionModal {
    z-index: 1650;
    background: rgba(0, 0, 0, 0.85);
    align-items: flex-start;
    padding: 16px 20px 24px;
    overflow: hidden;
}

.meta-progression-modal-panel {
    max-width: 1040px;
    width: 94%;
    height: min(88vh, calc(100vh - 32px));
    max-height: min(88vh, calc(100vh - 32px));
    min-height: 0;
    overflow: hidden;
    flex: 0 1 auto;
}

.meta-progression-gallery-intro {
    margin: 0 0 14px;
    color: rgba(220, 228, 240, 0.88);
    font-size: 0.95rem;
    text-align: center;
}

#metaProgressionModal .modal-frame-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden; /* not auto — keeps Done in view; .meta-progression-gallery-grid scrolls */
}

#metaProgressionModal .modal-frame-content::after {
    display: none; /* no outer fade; the inner grid owns scrolling */
}

#metaProgressionModal .modal-frame-content > h2,
#metaProgressionModal .modal-frame-content > .meta-progression-gallery-intro,
#metaProgressionModal .modal-frame-content > .modal-choices {
    flex-shrink: 0;
}

.meta-progression-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 8px;
}

.meta-progression-gallery-card {
    width: 100%;
    min-height: 166.5px;
    height: auto;
    padding: 18px 20px;
}

.meta-progression-gallery-icon-wrap {
    position: relative;
    width: 90px;
    min-width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.meta-progression-gallery-card.is-locked .meta-progression-gallery-icon-wrap > :not(.meta-progression-gallery-lock) {
    filter: brightness(0) saturate(0);
}

.meta-progression-gallery-card.is-locked .placement-new-item-name {
    letter-spacing: 0.16em;
}

.meta-progression-gallery-lock {
    position: absolute;
    width: 68px;
    height: auto;
    image-rendering: pixelated;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
    z-index: 2;
}

.meta-progression-gallery-empty {
    color: rgba(220, 228, 240, 0.78);
    text-align: center;
    padding: 36px 12px;
}

.run-history-modal-panel {
    max-width: 920px;
    width: 94%;
    height: min(88vh, calc(100vh - 32px));
    max-height: min(88vh, calc(100vh - 32px));
    min-height: 0;
    /* Contain the frame; list/detail panels own vertical overflow */
    overflow: hidden;
    flex: 0 1 auto;
}

#runHistoryModal .modal-frame-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden; /* not auto — keeps Close in view; .run-history-list / .run-history-detail scroll */
}

#runHistoryModal .modal-frame-content::after {
    display: none; /* no outer fade; inner panels have their own scrollbars */
}

#runHistoryModal .modal-frame-content > h2,
#runHistoryModal .modal-frame-content > .run-history-intro {
    flex-shrink: 0;
}

#runHistoryModal .modal-frame-content > .modal-choices {
    flex-shrink: 0;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
}

#runHistoryModal .modal-frame-content > .modal-choices .choice-btn.cta-button {
    width: auto;
    flex: 1 1 0;
}

#runHistoryModal .run-history-layout {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    align-items: stretch;
}

#runHistoryModal .run-history-list-col {
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

#runHistoryModal .run-history-list {
    min-height: 0;
    flex: 1 1 0;
}

#runHistoryModal .run-history-detail-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#runHistoryModal .run-history-detail {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow-y: auto;
}

.run-history-intro {
    text-align: left;
    margin: 0 0 12px;
    color: rgba(220, 228, 240, 0.88);
    font-size: 0.95rem;
}

.run-history-layout {
    display: flex;
    gap: 16px;
    min-height: 320px;
    max-height: min(58vh, 520px);
    align-items: stretch;
}

.run-history-list-col {
    flex: 0 0 220px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.run-history-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid rgba(120, 180, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    padding: 8px;
}

.run-history-list-item {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #e8eef8;
    cursor: var(--cursor-default);
    font-family: inherit;
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}

.run-history-list-item:hover {
    background: rgba(100, 160, 255, 0.12);
    border-color: rgba(140, 190, 255, 0.35);
}

.run-history-list-item.is-selected {
    background: rgba(79, 195, 247, 0.15);
    border-color: rgba(79, 195, 247, 0.45);
    box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.2);
}

.run-history-list-date {
    display: block;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.run-history-debug-asterisk {
    color: #ffb347;
    font-weight: 800;
    margin-left: 2px;
}

.run-history-debug-note {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ffb347;
}

.run-history-list-meta {
    display: block;
    font-size: 0.8rem;
    color: rgba(200, 210, 230, 0.85);
    line-height: 1.35;
}

.run-history-detail-col {
    flex: 1;
    min-width: 0;
}

.run-history-detail {
    height: 100%;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid rgba(120, 180, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.run-history-detail-placeholder,
.run-history-empty {
    color: rgba(200, 210, 230, 0.65);
    text-align: center;
    padding: 48px 16px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.run-history-detail-inner {
    padding-bottom: 8px;
}

.run-history-detail-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.run-history-detail-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.run-history-detail-date {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.run-history-outcome {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #e0e8f8;
}

.run-history-outcome--game_over {
    background: rgba(255, 80, 100, 0.2);
    color: #ffb4bf;
}

.run-history-outcome--victory {
    background: rgba(76, 175, 80, 0.22);
    color: #b9f6b0;
}

.run-history-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.run-history-stat-grid--small {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.run-history-stat-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}

.run-history-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(180, 195, 220, 0.75);
    margin-bottom: 6px;
}

.run-history-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.run-history-stat-sub {
    font-size: 0.72rem;
    color: rgba(180, 195, 220, 0.8);
    margin-top: 6px;
    line-height: 1.35;
}

.run-history-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #8ec5ff;
    margin: 18px 0 10px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.run-history-detail-inner > .run-history-section-title:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.run-history-fire-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.run-history-fire-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 100, 60, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(255, 120, 80, 0.15);
    font-size: 0.9rem;
    color: #f0e8e4;
}

.run-history-fire-n {
    font-weight: 800;
    color: #ffb74d;
}

.run-history-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.run-history-pill {
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(100, 160, 255, 0.15);
    color: #b8d8ff;
    border: 1px solid rgba(100, 160, 255, 0.25);
}

.run-history-pill--gold {
    background: rgba(255, 193, 7, 0.12);
    color: #ffe082;
    border-color: rgba(255, 193, 7, 0.3);
}

.run-history-pill--debug {
    background: rgba(255, 179, 71, 0.18);
    border-color: rgba(255, 179, 71, 0.45);
    color: #ffd59a;
}

.run-history-muted {
    font-size: 0.88rem;
    color: rgba(180, 190, 210, 0.65);
    margin: 8px 0;
}

.run-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin: 8px 0 12px;
}

.run-history-table th,
.run-history-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.run-history-table th {
    color: rgba(180, 200, 230, 0.85);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
}

.run-history-table td {
    color: #e4eaf4;
}

@media (max-width: 700px) {
    .run-history-layout {
        flex-direction: column;
        max-height: none;
    }
    .run-history-list-col {
        flex: none;
        max-height: 200px;
    }
    .run-history-list {
        max-height: 180px;
    }
    .run-history-detail {
        max-height: 48vh;
    }

    /* Run history modal: keep single outer frame; stack list + detail with independent scroll */
    #runHistoryModal .run-history-layout {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
    }
    #runHistoryModal .run-history-list-col {
        flex: 0 0 auto;
        max-height: min(200px, 38vh);
    }
    #runHistoryModal .run-history-list {
        max-height: min(180px, 35vh);
        flex: 1 1 auto;
    }
    #runHistoryModal .run-history-detail-col {
        flex: 1 1 0;
        min-height: 0;
    }
    #runHistoryModal .run-history-detail {
        max-height: none;
        min-height: 0;
    }
}

/* Update log — above advanced settings */
#updateLogModal {
    z-index: 1600;
    background: rgba(0, 0, 0, 0.85);
}

/* Feedback modal — same layer as update log */
#feedbackModal {
    z-index: 1600;
    background: rgba(0, 0, 0, 0.85);
}

.feedback-modal-panel {
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
}

.feedback-modal-intro {
    text-align: left;
}

#feedbackModal .modal-choices.feedback-modal-choices {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

#feedbackModal .modal-choices.feedback-modal-choices .choice-btn {
    flex: 1 1 0;
    min-width: 0;
}

.feedback-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    padding: 12px 14px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e8eef8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(120, 180, 255, 0.2);
    border-radius: 8px;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.feedback-textarea::placeholder {
    color: rgba(200, 210, 230, 0.45);
}

.feedback-textarea:focus {
    outline: none;
    border-color: rgba(140, 190, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(100, 160, 255, 0.25);
}

.update-log-modal-panel {
    max-width: 560px;
    width: 92%;
    max-height: 78vh;
}

.update-log-body {
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #d8e0ec;
    margin: 8px 0 16px;
    padding: 12px 14px;
    max-height: min(48vh, 420px);
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(120, 180, 255, 0.12);
    border-radius: 8px;
}

/* Confirm modal should appear above other modals */
#confirmModal.modal-overlay {
    z-index: 3000 !important; /* Higher than save/load modals (2000) */
}

/* Nested max-purchase confirm stacks above the shop quantity confirm */
#confirmModalMax.modal-overlay {
    z-index: 3100 !important;
}

#confirmModalMax.modal-overlay.confirm-modal-purchase.active {
    align-items: center;
    justify-content: center;
    padding: 20px 50px 20px 20px;
}

#confirmModalMax.modal-overlay.confirm-modal-purchase.active > .modal.modal-frame-9patch {
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: auto;
}

#confirmModalMax .modal-choices {
    display: flex;
    gap: 12px;
    width: 100%;
}

#confirmModalMax .modal-choices .choice-btn {
    flex: 1 1 0;
}

/* Tutorial arrow above confirm modal (step 22 confirm purchase) - confirm modal is 3000 */
body.tutorial-mode:has(#confirmModal.active) .tutorial-arrow {
    z-index: 10000 !important;
}

/* Restart/Exit tutorial confirm modal above tutorial bubble (step 28) - tutorial bubble is 2147483647 */
#confirmModal.confirm-modal-above-tutorial {
    z-index: 2147483648 !important;
}

/* Shop purchase / costed confirms / repair-tower confirms — pin dialog toward viewport right */
#confirmModal.modal-overlay.confirm-modal-purchase.active {
    align-items: center;
    justify-content: center;
    padding: 20px 50px 20px 20px;
}

/* Override .modal { margin: auto } so the frame can sit toward the shop / right */
#confirmModal.modal-overlay.confirm-modal-purchase.active > .modal.modal-frame-9patch {
    margin-left: auto;
    margin-right: 0;
    margin-top: auto;
    margin-bottom: auto;
}

#confirmModal {
    z-index: 2000;
}

/* Confirm + Load Scenario + Rename: pair Cancel / primary on one row (override CTA width:100%) */
#confirmModal .modal-choices,
#loadScenarioModal .modal-choices,
#renameModal .modal-choices {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#confirmModal .modal-choices .choice-btn,
#loadScenarioModal .modal-choices .choice-btn,
#renameModal .modal-choices .choice-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

#confirmModal .modal-choices.modal-choices-single {
    justify-content: center;
}

#confirmModal .modal-choices.modal-choices-single .choice-btn {
    flex: 0 1 auto;
    min-width: 140px;
}

#renameModal .modal-choices.modal-choices-single {
    justify-content: center;
}

#renameModal .modal-choices.modal-choices-single .choice-btn {
    flex: 1 1 0;
    min-width: 140px;
}

#confirmModal .modal-choices.modal-choices-triple {
    flex-wrap: wrap;
}

#confirmModal .modal-choices.modal-choices-triple .choice-btn {
    flex: 1 1 auto;
    min-width: 140px;
}

/* Shop purchase confirm — item icon × quantity stepper */
#confirmModal .modal-purchase-item-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 8px auto 16px;
    flex-wrap: wrap;
}

#confirmModal .modal-purchase-item-row .modal-item-icon,
#confirmModal .modal-item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 16px;
}

#confirmModal .modal-item-icon--above-title {
    margin: 18px auto 16px;
    min-height: 76px;
    overflow: visible;
}

#confirmModal .supercharge-confirm-tower-icon {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.86);
    transform-origin: center center;
    overflow: visible;
    pointer-events: none;
}

#confirmModal .modal-item-icon .artifact-trader-reward-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#confirmModal .modal-item-icon .artifact-trader-reward-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#confirmModal .artifact-trader-reward-count {
    font-size: 17px;
}

#confirmModal .modal-purchase-item-row .modal-item-icon,
#confirmModal .modal-item-icon.modal-item-icon--with-qty {
    margin: 0;
}

#confirmModal .modal-quantity-times {
    color: rgba(255, 255, 255, 0.85);
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    user-select: none;
}

#confirmModal .modal-quantity-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    user-select: none;
    flex-shrink: 0;
}

#confirmModal .modal-quantity-value {
    min-width: 48px;
    text-align: center;
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

#confirmModal .modal-quantity-btn {
    width: 48px;
    height: 28px;
    padding: 0 2px;
    border: 2px solid rgba(0, 220, 255, 0.75);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(40, 90, 140, 0.95) 0%, rgba(18, 48, 88, 0.98) 100%);
    color: #7FE9FF;
    font-size: 14px;
    line-height: 1;
    cursor: var(--cursor-default);
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
    transition: background 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-sizing: border-box;
}

#confirmModal .modal-quantity-btn.modal-quantity-btn-step5 {
    width: 48px;
    min-width: 48px;
    padding: 0 2px;
}

#confirmModal .modal-quantity-btn-step-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    opacity: 0.95;
}

#confirmModal .modal-quantity-btn:hover:not(:disabled):not(.is-disabled) {
    background: linear-gradient(180deg, rgba(56, 120, 180, 0.98) 0%, rgba(28, 70, 120, 1) 100%);
    border-color: rgba(120, 240, 255, 0.95);
    color: #FFFFFF;
}

#confirmModal .modal-quantity-btn:active:not(:disabled):not(.is-disabled) {
    transform: translateY(1px);
}

#confirmModal .modal-quantity-btn:disabled,
#confirmModal .modal-quantity-btn.is-disabled {
    opacity: 0.35;
    cursor: var(--cursor-default);
    box-shadow: none;
}

/* Purple CTA max button — same 3-patch family as other main buttons */
#confirmModal .modal-quantity-max-btn.choice-btn.cta-button {
    width: auto;
    min-width: 0;
    height: 53px;
    margin-left: 6px;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 26px;
    padding-right: 26px;
    flex-shrink: 0;
    gap: 7px;
    font-size: 16px;
    letter-spacing: 0.04em;
    align-self: center;
}

#confirmModal .modal-quantity-max-btn.cta-button::before,
#confirmModal .modal-quantity-max-btn.cta-button::after {
    width: 26px;
    background-size: 26px 53px;
}

#confirmModal .modal-quantity-max-btn.cta-button {
    background-size: 1px 53px;
}

#confirmModal .modal-quantity-max-btn:disabled,
#confirmModal .modal-quantity-max-btn.is-disabled {
    opacity: 0.45;
    filter: brightness(0.7);
    cursor: var(--cursor-default);
}

#confirmModal .modal-quantity-max-label {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #FFFFFF;
    text-transform: uppercase;
}

#confirmModal .modal-quantity-max-count {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #F4B8FF;
    text-transform: none;
}

#confirmModal .modal-cost-amount {
    text-align: center;
    max-width: 100%;
    line-height: 1.15;
}

/* Leaderboard: keep a stable frame width across Today / Yesterday / All Time */
#leaderboardModal .modal.modal-frame-9patch {
    width: 640px;
    max-width: min(640px, calc(100vw - 40px));
    box-sizing: border-box;
}

#leaderboardModal .leaderboard-list p {
    max-width: 100%;
    text-align: center;
}

#leaderboardRefreshBtn .splash-btn-icon {
    margin-right: 0;
    margin-left: 8px;
}

/* Leaderboard: Reset + Close on one row */
#leaderboardModal .modal-choices.leaderboard-modal-choices {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#leaderboardModal .modal-choices.leaderboard-modal-choices .choice-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

/* Bottom Edge Power-Up Indicators */
.bottom-edge-power-ups {
    position: fixed;
    bottom: 5px; /* Move up 5px from bottom edge */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    padding: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: visible; /* Don't clip at container level */
}

.bottom-edge-power-ups .power-up-indicator {
    position: relative;
    width: 64px; /* 75.264px * 0.85 = 63.9744px, rounded to 64px */
    height: 45px; /* Reduced by 10% to show less of the graphic (50px * 0.9 = 45px) */
    pointer-events: auto !important; /* Ensure indicators can be hovered */
    overflow: visible; /* Allow countdown timers and image tops to be visible above container */
    cursor: var(--cursor-default); /* Show pointer cursor on hover */
    padding-top: 30px; /* Add space at top for countdown timers and image animation */
    margin-top: -30px; /* Offset padding so container position stays the same */
}

/* Staggered animation delays for cascading effect - applied to images */
.bottom-edge-power-ups .power-up-indicator[data-index="0"] img { animation-delay: 0s; }
.bottom-edge-power-ups .power-up-indicator[data-index="1"] img { animation-delay: 0.3s; }
.bottom-edge-power-ups .power-up-indicator[data-index="2"] img { animation-delay: 0.6s; }
.bottom-edge-power-ups .power-up-indicator[data-index="3"] img { animation-delay: 0.9s; }
.bottom-edge-power-ups .power-up-indicator[data-index="4"] img { animation-delay: 1.2s; }
.bottom-edge-power-ups .power-up-indicator[data-index="5"] img { animation-delay: 1.5s; }
.bottom-edge-power-ups .power-up-indicator[data-index="6"] img { animation-delay: 1.8s; }
.bottom-edge-power-ups .power-up-indicator[data-index="7"] img { animation-delay: 2.1s; }
.bottom-edge-power-ups .power-up-indicator[data-index="8"] img { animation-delay: 2.4s; }
.bottom-edge-power-ups .power-up-indicator[data-index="9"] img { animation-delay: 2.7s; }

/* Animate transform (compositor-only) instead of `top`, which forced a layout +
   paint pass every animation frame for each visible power-up indicator. */
@keyframes powerUpFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
}

.bottom-edge-power-ups .power-up-indicator img {
    position: absolute;
    top: 0; /* Start position - will be animated */
    left: 50%;
    transform: translateX(-50%);
    width: 64px; /* 75.264px * 0.85 = 63.9744px, rounded to 64px */
    height: auto;
    display: block;
    pointer-events: none; /* Don't block hover events on parent */
    animation: powerUpFloat 3s ease-in-out infinite; /* Slow, gentle pulse - image moves within container */
}

/* Temporary power-ups should NOT pulse */
.bottom-edge-power-ups .power-up-indicator.temp img {
    animation: none; /* No animation for temporary power-ups */
    top: 0; /* Keep at fixed position */
}

.bottom-edge-power-ups .power-up-indicator .level-text {
    position: absolute;
    top: 14px; /* Moved down by 10px (was 4px, now 14px) */
    right: 4px;
    background: white; /* Changed from green to white */
    color: black;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 12px; /* Increased by 2px (was 10px) */
    font-weight: bold;
    z-index: 10;
    pointer-events: none;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Drop shadow to bottom and right for sticker effect */
}

.bottom-edge-power-ups .power-up-indicator.temp .level-text {
    background: #00E6CC; /* Bright electric teal/aqua background for temporary power-ups */
    color: black; /* Black text on teal for better readability */
}

.bottom-edge-power-ups .power-up-separator {
    width: 24px; /* Gap between permanent and temporary power-ups */
    flex-shrink: 0;
}

/* Tooltips for bottom-edge power-ups now use the centralized #game-tooltip system */

/* Countdown circle for temporary power-ups */
.bottom-edge-power-ups .power-up-indicator .temp-countdown-circle {
    position: absolute;
    top: -18px; /* Moved up more */
    left: 50%;
    transform: translateX(-50%);
    background: transparent; /* No background */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    z-index: 11;
    pointer-events: none; /* Don't block hover events on parent */
    /* White text with black outline and glow */
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 4px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(0, 0, 0, 0.6);
    /* Remove width/height constraints since it's just text now */
    width: auto;
    height: auto;
    padding: 0;
}

/* Hide any leftover temp power-up panel elements that might still exist */
#tempPowerupList,
.overlay-panel.overlay-bottom-left:empty,
.overlay-panel.overlay-bottom-left:has(#tempPowerupList) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Rename modal should appear above save/load modals */
#renameModal.modal-overlay {
    z-index: 3000 !important; /* Higher than save/load modals (2000) */
}

.modal-overlay.active {
    display: flex;
}

/* Full-screen modal overlay enter / exit transitions */
@keyframes gameModalBackdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

.modal-overlay.game-modal-enter {
    animation: gameModalBackdropFadeIn 0.3s ease-out forwards;
}

.modal-overlay.game-modal-enter > .modal,
.modal-overlay.game-modal-enter > .splash-modal,
.modal-overlay.game-modal-enter > .story-screen-container,
.modal-overlay.game-modal-enter .map-progression-screen,
.modal-overlay.game-modal-enter .specialty-screen,
.modal-overlay.game-modal-enter .supercharge-screen,
.modal-overlay.game-modal-enter .supercharge-options-screen {
    animation: gameModalContentFadeIn 0.338s ease-out forwards;
}

/* Game over: match hex-map reveal (~3s ease-out) */
#gameOverModal.game-over-slow-enter.game-modal-enter {
    animation-duration: 3s;
}
#gameOverModal.game-over-slow-enter.game-modal-enter > .modal {
    animation-duration: 3s;
}

.modal-overlay.game-modal-exit {
    animation: gameModalBackdropFadeOut 0.263s ease-in forwards;
    pointer-events: none;
}

.modal-overlay.game-modal-exit > .modal,
.modal-overlay.game-modal-exit > .splash-modal,
.modal-overlay.game-modal-exit > .story-screen-container,
.modal-overlay.game-modal-exit .map-progression-screen,
.modal-overlay.game-modal-exit .specialty-screen,
.modal-overlay.game-modal-exit .supercharge-screen,
.modal-overlay.game-modal-exit .supercharge-options-screen {
    animation: gameModalContentFadeOut 0.263s ease-in forwards;
}

/* Same overlay, new content — backdrop stays opaque (e.g. artifact trader → placement) */
.modal-overlay.game-modal-shell-swap-out > .modal,
.modal-overlay.game-modal-shell-swap-out > .wave-complete-hero-graphic:not(.modal-shell-persist),
.modal-overlay.game-modal-shell-swap-out > .character-speech-bubble:not(.modal-shell-persist) {
    animation: gameModalContentFadeOut 0.263s ease-in forwards;
    pointer-events: none;
}

.modal-overlay.game-modal-shell-swap-in > .modal,
.modal-overlay.game-modal-shell-swap-in > .wave-complete-hero-graphic:not(.modal-shell-persist),
.modal-overlay.game-modal-shell-swap-in > .character-speech-bubble:not(.modal-shell-persist) {
    animation: gameModalContentFadeIn 0.338s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay.game-modal-enter,
    .modal-overlay.game-modal-exit,
    .modal-overlay.game-modal-shell-swap-out,
    .modal-overlay.game-modal-shell-swap-in,
    .modal-overlay.game-modal-enter > .modal,
    .modal-overlay.game-modal-enter > .splash-modal,
    .modal-overlay.game-modal-enter > .story-screen-container,
    .modal-overlay.game-modal-enter .map-progression-screen,
    .modal-overlay.game-modal-enter .specialty-screen,
    .modal-overlay.game-modal-enter .supercharge-screen,
    .modal-overlay.game-modal-enter .supercharge-options-screen,
    #gameOverModal.game-over-slow-enter.game-modal-enter,
    #gameOverModal.game-over-slow-enter.game-modal-enter > .modal,
    .modal-overlay.game-modal-exit > .modal,
    .modal-overlay.game-modal-exit > .splash-modal,
    .modal-overlay.game-modal-exit > .story-screen-container,
    .modal-overlay.game-modal-exit .map-progression-screen,
    .modal-overlay.game-modal-exit .specialty-screen,
    .modal-overlay.game-modal-exit .supercharge-screen,
    .modal-overlay.game-modal-exit .supercharge-options-screen,
    .modal-overlay.game-modal-shell-swap-out > .modal,
    .modal-overlay.game-modal-shell-swap-out > .wave-complete-hero-graphic:not(.modal-shell-persist),
    .modal-overlay.game-modal-shell-swap-out > .character-speech-bubble:not(.modal-shell-persist),
    .modal-overlay.game-modal-shell-swap-in > .modal,
    .modal-overlay.game-modal-shell-swap-in > .wave-complete-hero-graphic:not(.modal-shell-persist),
    .modal-overlay.game-modal-shell-swap-in > .character-speech-bubble:not(.modal-shell-persist) {
        animation: none;
    }
}

/* Special styling for wave group completion */
@keyframes waveGroupCompletePulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 1.0), 0 0 80px rgba(255, 215, 0, 0.8);
    }
}

@keyframes waveGroupCompleteTitle {
    0%, 100% {
        transform: scale(1);
        text-shadow: none;
    }
    50% {
        transform: scale(1.05);
        text-shadow: none;
    }
}

.modal {
    border-radius: 12px;
    padding: 60px 40px 80px;
    max-width: 770px;
    max-height: calc(100vh - 40px);
    overflow-y: auto; /* Allow scrolling when content exceeds viewport */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    box-shadow: none;
    margin: auto;
    position: relative;
    /* Background removed - all modals now use modal-frame-9patch class */
    border: none;
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 45, 75, 0.8) rgba(22, 33, 62, 0.3);
    animation: none;
}

/* Utility class to remove all frames and backgrounds from modal */
.modal-no-frame {
    background: none !important;
    background-image: none !important;
    background-size: none !important;
    background-position: none !important;
    background-repeat: none !important;
    background-origin: initial !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}

/* More specific rule to override modal-frame-9patch when modal-no-frame is present */
.modal.modal-no-frame,
.modal.modal-no-frame.modal-frame-9patch {
    background: none !important;
    background-image: none !important;
    background-size: none !important;
    background-position: none !important;
    background-repeat: none !important;
    background-origin: initial !important;
    padding: 0 !important;
}

.modal-no-frame .modal-frame-content {
    background: transparent !important;
}

/* 9-Patch Frame System - Reusable utility class for modals */
.modal-frame-9patch {
    padding: 80px 50px; /* Space for 180px corners on all sides - content is inset */
    border-radius: 0;
    position: relative;
    /* No background color on modal itself - frame images only */
    /* Modal frame should not exceed viewport height */
    max-height: calc(100vh - 40px); /* Match standard modal max-height */
    /* Frame images should not scroll - modal container stays fixed size */
    overflow: visible; /* Frame images need to be visible, not clipped */
    display: flex;
    flex-direction: column;
    /* Min-width ensures calc(100% - 360px) results in whole pixels, preventing sub-pixel gaps */
    min-width: 500px;
    
    /* Frame images - positioned to form edges */
    background-image: 
        /* Corners at exact corners */
        url('assets/images/ui/frame_top_left.png'),
        url('assets/images/ui/frame_top_right.png'),
        url('assets/images/ui/frame_bottom_left.png'),
        url('assets/images/ui/frame_bottom_right.png'),
        /* Middle sections - use calc to size only between corners */
        url('assets/images/ui/frame_top_middle.png'),
        url('assets/images/ui/frame_bottom_middle.png'),
        url('assets/images/ui/frame_middle_left.png'),
        url('assets/images/ui/frame_middle_right.png');
    
    background-size: 
        /* Corners: exact size 180px x 180px */
        180px 180px, 180px 180px, 180px 180px, 180px 180px,
        /* Middle sections: stretch 1px images to fill space between corners (1px stretches cleanly) */
        calc(100% - 360px) 180px,  /* Top: stretch 1px width to fill space between corners, height is 180px */
        calc(100% - 360px) 180px,  /* Bottom: stretch 1px width to fill space between corners, height is 180px */
        180px calc(100% - 360px),  /* Left: width is 180px, stretch 1px height to fill space between corners */
        180px calc(100% - 360px);  /* Right: width is 180px, stretch 1px height to fill space between corners */
    
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,  /* Corners: no repeat */
                       no-repeat,  /* Top middle: no repeat (stretched to exact size) */
                       no-repeat,  /* Bottom middle: no repeat (stretched to exact size) */
                       no-repeat,  /* Left middle: no repeat (stretched to exact size) */
                       no-repeat;  /* Right middle: no repeat (stretched to exact size) */
    
    background-position: 
        top left, top right, bottom left, bottom right,  /* Corners at exact corners */
        top 0 left 180px,      /* Top middle: starts 180px from left */
        bottom 0 left 180px,   /* Bottom middle: starts 180px from left */
        top 180px left 0,      /* Left middle: starts 180px from top */
        top 180px right 0;     /* Right middle: starts 180px from top */
    
    background-origin: border-box; /* Background images positioned relative to border box */
}

/* Inner content wrapper - background color only fills content area (inside padding) */
.modal-frame-9patch .modal-frame-content {
    background-color: #071025;
    width: 100%;
    flex: 1; /* Fill available space in flex container */
    min-height: 0; /* Allow flex item to shrink below content size */
    overflow-y: auto; /* Allow scrolling when content exceeds viewport */
    overflow-x: visible; /* Allow horizontal overflow for buttons if needed */
    position: relative; /* For gradient mask positioning */
    /* Firefox scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 45, 75, 0.8) rgba(22, 33, 62, 0.3);
    /* Webkit scrollbar styling */
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Bottom gradient mask - fades from opaque to transparent over 80px */
.modal-frame-9patch .modal-frame-content::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, transparent 0%, #071025 100%);
    pointer-events: none; /* Allow clicks through */
    z-index: 10; /* Ensure it's above content */
    display: block;
}

/* Remove gradient mask for modals without frames */
.modal-no-frame .modal-frame-content::after {
    display: none;
}

.modal-frame-9patch .modal-frame-content::-webkit-scrollbar {
    width: 10px;
}

.modal-frame-9patch .modal-frame-content::-webkit-scrollbar-track {
    background: rgba(22, 33, 62, 0.3);
    border-radius: 5px;
}

.modal-frame-9patch .modal-frame-content::-webkit-scrollbar-thumb {
    background: rgba(34, 45, 75, 0.8);
    border-radius: 5px;
    border: 1px solid rgba(22, 33, 62, 0.5);
}

.modal-frame-9patch .modal-frame-content::-webkit-scrollbar-thumb:hover {
    background: rgba(40, 52, 85, 0.9);
}

.modal.modal-upgrade-token h2 {
    margin-bottom: 8px;
}

/* Level-up modal */
.modal.modal-upgrade-token {
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* Overlay settings for level-up modal */
.modal-overlay.upgrade-token-mask {
    align-items: center;
    overflow-y: auto;
    padding: 20px;
}


/* Ensure modal content scales properly */
.modal.modal-upgrade-token .modal-frame-content {
    transform: none; /* Prevent double scaling */
    flex: 0 1 auto !important; /* Don't grow, allow shrink, size to content - override flex: 1 */
    min-height: auto !important; /* Don't force minimum height */
    height: auto !important; /* Let content determine height */
}

/* Artifact trader: vertical scroll only; invisible scrollbars on the overlay */
.modal-overlay.artifact-trader-modal.modal-overlay {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modal-overlay.artifact-trader-modal.modal-overlay::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.modal-overlay.artifact-trader-modal .modal-frame-content,
.modal-overlay.artifact-trader-modal .wave-stats {
    max-width: 100%;
    overflow-x: visible;
    box-sizing: border-box;
}

.modal-overlay.artifact-trader-modal .artifact-trader-body {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    overflow-x: visible;
}

/* Horizontal scroll only when trade columns exceed viewport; hidden scrollbar */
.modal-overlay.artifact-trader-modal .artifact-trader-columns-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
}

.modal-overlay.artifact-trader-modal .artifact-trader-columns-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.modal-overlay.artifact-trader-modal .artifact-trader-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 22px 36px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.modal-overlay.artifact-trader-modal .artifact-trader-continue-wrap {
    position: relative;
    width: 100%;
    margin: 16px 0 4px;
    display: flex;
    justify-content: center;
    z-index: 4;
}

/* Artifact trader: match in-game default (white) cursor; set pluses read as white */
.modal-overlay.artifact-trader-modal,
.modal-overlay.artifact-trader-modal * {
    cursor: var(--cursor-default) !important;
}

.modal-overlay.artifact-trader-modal .artifact-trader-set-plus {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* Reward icon(s) above Claim, centered */
.modal-overlay.artifact-trader-modal .artifact-trader-reward-row {
    width: 100%;
    margin-bottom: 0;
}

/* Reward icons above Claim — one sprite per type, with an xN count */
.modal-overlay.artifact-trader-modal .artifact-trader-reward-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible;
}

.modal-overlay.artifact-trader-modal .artifact-trader-reward-stack img {
    flex-shrink: 0;
}

.artifact-trader-reward-unit {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.artifact-trader-reward-count {
    color: #F1F5F9;
    font-size: 17px;
    font-weight: 800;
    font-family: "Exo 2", sans-serif;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.modal-overlay.artifact-trader-modal .artifact-trader-reward-part {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay.artifact-trader-modal .artifact-trader-reward-currency-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
}

.modal-overlay.artifact-trader-modal .artifact-trader-reward-currency-value {
    color: #00FF88;
    font-size: 22px;
    font-weight: 800;
    font-family: "Exo 2", sans-serif;
    line-height: 1;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
}

/* Align completed checkmark with reward column (scroll) center line */
.modal-overlay.artifact-trader-modal .artifact-trader-reward-col .artifact-trader-completed-check {
    margin-left: 0;
}

/* Want box borders: can claim = dark green, missing items = dark red, claimed = black + very dim grey edge */
.modal-overlay.artifact-trader-modal .artifact-trader-want-box.artifact-trader-want-box--available {
    background: #000000 !important;
    border-color: rgba(96, 230, 140, 0.99) !important;
    box-shadow: none !important;
}

.modal-overlay.artifact-trader-modal .artifact-trader-want-box.artifact-trader-want-box--available .artifact-trader-want-box-inner {
    background: #000000 !important;
}

.modal-overlay.artifact-trader-modal .artifact-trader-want-box.artifact-trader-want-box--locked {
    background: #000000 !important;
    border-color: rgba(182, 52, 58, 0.98) !important;
    box-shadow: none !important;
}

.modal-overlay.artifact-trader-modal .artifact-trader-want-box.artifact-trader-want-box--locked .artifact-trader-want-box-inner {
    background: #000000 !important;
}

.modal-overlay.artifact-trader-modal .artifact-trader-want-box.artifact-trader-want-box--traded {
    background: #000000 !important;
    border-color: rgba(120, 130, 145, 0.32) !important;
    box-shadow: none !important;
}

.modal-overlay.artifact-trader-modal .artifact-trader-want-box.artifact-trader-want-box--traded .artifact-trader-want-box-inner {
    background: #000000 !important;
}

/* Claim uses shared .cta-button.cta-yellow (3-patch); avoid choice-btn 100% width in reward column */
.modal-overlay.artifact-trader-modal .artifact-trader-reward-col .artifact-trader-trade-btn.choice-btn.cta-button {
    width: auto;
    min-width: min-content;
    align-self: center;
    margin: 0;
}

/* Always show Claim; when disabled, match row/column dimness (avoid global CTA :disabled double-dim) */
.modal-overlay.artifact-trader-modal .artifact-trader-reward-col .artifact-trader-trade-btn.cta-button:disabled {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none;
    cursor: var(--cursor-default) !important;
}

.modal.skip-upgrade-modal {
    padding-top: 75px;
    padding-bottom: 60px;
    min-width: 500px; /* Ensure modal is wide enough for "UPGRADE MORE" button */
}

.skip-upgrade-remaining {
    margin-bottom: 0px;
}

.tower-upgrade-panel .tower-upgrade-top {
    margin-bottom: 50px;
}

.sentinel-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
}

.sentinel-mode-panel {
    position: fixed;
    pointer-events: auto;
    min-width: 140px;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: rgba(12, 18, 36, 0.94);
    border: 2px solid rgba(255, 215, 0, 0.55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    cursor: var(--cursor-default);
}

.sentinel-mode-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.sentinel-mode-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sentinel-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    overflow: hidden;
    cursor: var(--cursor-default);
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.sentinel-mode-btn-icon {
    display: block;
    width: auto;
    height: 34px;
    max-height: 34px;
    max-width: 43px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.sentinel-mode-btn-icon--vortex {
    animation: sentinel-mode-vortex-spin 2.8s linear infinite;
}

@keyframes sentinel-mode-vortex-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sentinel-mode-btn--active {
    background: rgba(255, 215, 0, 0.28);
    border-color: #FFD700;
    color: #fff;
}

.sentinel-mode-btn--inactive {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
}

.sentinel-mode-btn--inactive:hover {
    background: rgba(255, 196, 29, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    color: #fff;
}

.perimeter-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
}

.perimeter-mode-panel {
    position: fixed;
    pointer-events: auto;
    min-width: 140px;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: rgba(12, 18, 36, 0.94);
    border: 2px solid rgba(55, 90, 200, 0.72);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(32, 58, 168, 0.22);
    cursor: var(--cursor-default);
}

.perimeter-mode-title {
    color: #8eb4f0;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.perimeter-mode-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.perimeter-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    min-height: 48px;
    cursor: var(--cursor-default);
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.perimeter-mode-btn-label {
    font-size: 18px;
    font-weight: 700;
    color: #5a7fd4;
    line-height: 1;
    pointer-events: none;
}

.perimeter-mode-btn--active {
    background: rgba(32, 58, 168, 0.38);
    border-color: #5a7fd4;
    color: #fff;
}

.perimeter-mode-btn--active .perimeter-mode-btn-label {
    color: #b8d4ff;
}

.perimeter-mode-btn--inactive {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(55, 90, 200, 0.35);
    color: rgba(255, 255, 255, 0.72);
}

.perimeter-mode-btn--inactive:hover {
    background: rgba(32, 58, 168, 0.28);
    border-color: rgba(90, 127, 212, 0.85);
    color: #fff;
}

.perimeter-mode-btn--inactive:hover .perimeter-mode-btn-label {
    color: #8eb4f0;
}

.charge-mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
}

.charge-mode-panel {
    position: fixed;
    pointer-events: auto;
    min-width: 220px;
    max-width: min(92vw, 360px);
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: rgba(12, 18, 36, 0.94);
    border: 2px solid rgba(85, 255, 95, 0.72);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(55, 255, 70, 0.28);
    cursor: var(--cursor-default);
}

.charge-mode-title {
    color: #9aff8e;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.charge-mode-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.charge-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 4px 2px;
    min-height: 36px;
    cursor: var(--cursor-default);
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.charge-mode-btn-label {
    font-size: 14px;
    font-weight: 700;
    color: #55ff5a;
    line-height: 1;
    pointer-events: none;
}

.charge-mode-btn--active {
    background: rgba(45, 200, 55, 0.38);
    border-color: #6cff62;
    color: #fff;
}

.charge-mode-btn--active .charge-mode-btn-label {
    color: #d4ffd0;
}

.charge-mode-btn--inactive {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(85, 255, 95, 0.35);
    color: rgba(255, 255, 255, 0.72);
}

.charge-mode-btn--inactive:hover {
    background: rgba(45, 200, 55, 0.28);
    border-color: rgba(90, 255, 100, 0.85);
    color: #fff;
}

.charge-mode-btn--inactive:hover .charge-mode-btn-label {
    color: #9aff8e;
}

.charge-mode-btn--disabled,
.charge-mode-btn:disabled {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    cursor: var(--cursor-x) !important;
    opacity: 0.35;
}

.charge-mode-title--spaced {
    margin-top: 10px;
}

.charge-mode-impact-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 4px;
}

.charge-mode-impact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
    min-height: 48px;
    cursor: var(--cursor-default);
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.charge-mode-impact-btn-icon {
    display: block;
    width: auto;
    height: 34px;
    max-width: 43px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.charge-mode-impact-btn--active .charge-mode-impact-btn-icon {
    opacity: 1;
    filter: none;
}

.charge-mode-impact-btn--inactive .charge-mode-impact-btn-icon {
    opacity: 0.71;
    filter: brightness(0.75) saturate(0.83);
}

.charge-mode-impact-btn--inactive:hover .charge-mode-impact-btn-icon {
    opacity: 1;
    filter: none;
}

.charge-mode-impact-btn-label {
    font-size: 13px;
    font-weight: 700;
    color: #55ff5a;
    line-height: 1.1;
    text-align: center;
    pointer-events: none;
}

.charge-mode-impact-btn--active {
    color: #fff;
}

.charge-mode-impact-btn--active .charge-mode-impact-btn-label {
    color: #d4ffd0;
}

.charge-mode-impact-btn--inactive {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
}

.charge-mode-impact-btn--inactive:hover {
    color: #fff;
}

.charge-mode-impact-btn--inactive:hover .charge-mode-impact-btn-label {
    color: #9aff8e;
}

/* Area — red */
.charge-mode-impact-btn--area.charge-mode-impact-btn--active {
    background: rgba(247, 55, 92, 0.38);
    border-color: #ff6b85;
}

.charge-mode-impact-btn--area.charge-mode-impact-btn--active .charge-mode-impact-btn-label {
    color: #ffd0d8;
}

.charge-mode-impact-btn--area.charge-mode-impact-btn--inactive {
    border-color: rgba(247, 55, 92, 0.35);
}

.charge-mode-impact-btn--area.charge-mode-impact-btn--inactive:hover {
    background: rgba(247, 55, 92, 0.28);
    border-color: rgba(255, 107, 133, 0.85);
}

.charge-mode-impact-btn--area.charge-mode-impact-btn--inactive:hover .charge-mode-impact-btn-label {
    color: #ff9eb0;
}

/* Balance — green */
.charge-mode-impact-btn--balanced.charge-mode-impact-btn--active {
    background: rgba(45, 200, 55, 0.38);
    border-color: #6cff62;
}

.charge-mode-impact-btn--balanced.charge-mode-impact-btn--active .charge-mode-impact-btn-label {
    color: #d4ffd0;
}

.charge-mode-impact-btn--balanced.charge-mode-impact-btn--inactive {
    border-color: rgba(85, 255, 95, 0.35);
}

.charge-mode-impact-btn--balanced.charge-mode-impact-btn--inactive:hover {
    background: rgba(45, 200, 55, 0.28);
    border-color: rgba(90, 255, 100, 0.85);
}

.charge-mode-impact-btn--balanced.charge-mode-impact-btn--inactive:hover .charge-mode-impact-btn-label {
    color: #9aff8e;
}

/* Power — blue */
.charge-mode-impact-btn--power.charge-mode-impact-btn--active {
    background: rgba(0, 217, 255, 0.32);
    border-color: #5ce8ff;
}

.charge-mode-impact-btn--power.charge-mode-impact-btn--active .charge-mode-impact-btn-label {
    color: #d0f8ff;
}

.charge-mode-impact-btn--power.charge-mode-impact-btn--inactive {
    border-color: rgba(0, 217, 255, 0.35);
}

.charge-mode-impact-btn--power.charge-mode-impact-btn--inactive:hover {
    background: rgba(0, 217, 255, 0.24);
    border-color: rgba(92, 232, 255, 0.85);
}

.charge-mode-impact-btn--power.charge-mode-impact-btn--inactive:hover .charge-mode-impact-btn-label {
    color: #9eefff;
}

.charge-mode-btn--disabled .charge-mode-btn-label {
    color: rgba(255, 255, 255, 0.35);
}

/* Dungeon Entrance — flooded reward picker (mid-wave; matches artifact trader mask/header) */
.dungeon-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85); /* same as #waveCompleteModal / artifact trader */
    pointer-events: auto;
    cursor: var(--cursor-default);
    animation: gameModalBackdropFadeIn 0.3s ease-out forwards;
}

.dungeon-reward-overlay,
.dungeon-reward-overlay * {
    cursor: var(--cursor-default) !important;
}

.dungeon-reward-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: min(980px, 96vw);
    padding: 12px 16px;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.dungeon-reward-header-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 5px;
}

.dungeon-reward-header-banner-img {
    width: min(800px, 100%);
    height: auto;
    image-rendering: crisp-edges;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.dungeon-reward-header-banner-text-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.dungeon-reward-header-banner-text {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
    font-family: "Exo 2", sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

.dungeon-reward-blurb {
    color: #E2E8F0;
    font-size: 15px;
    line-height: 1.45;
    margin: 6px auto 16px;
    max-width: 720px;
    text-align: center;
    font-family: "Exo 2", sans-serif;
}

/*
 * Horizontal 3-patch green frame (same pattern as .cta-button):
 * left/right endcaps + horizontally repeating middle strip.
 * Native art: 42×246 caps, 1×246 middle.
 */
.frame-green {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    height: 246px;
    padding-left: 42px;
    padding-right: 42px;
    border: none;
    border-radius: 0;
    /* No solid fill — a content-box color made the middle disagree with the endcap PNGs */
    background-color: transparent;
    background-image: url('assets/images/ui/frame_green_middle.png');
    background-size: 1px 246px;
    background-repeat: repeat-x;
    background-origin: content-box;
    background-clip: content-box;
    background-position: 0 center;
}

.frame-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 100%;
    background-image: url('assets/images/ui/frame_green_left.png');
    background-position: left center;
    background-size: 42px 246px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.frame-green::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 100%;
    background-image: url('assets/images/ui/frame_green_right.png');
    background-position: right center;
    background-size: 42px 246px;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.dungeon-reward-choices {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    justify-content: center;
    align-items: stretch;
    overflow: visible;
}

.dungeon-reward-choice-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    min-width: 240px;
    height: 246px;
    padding: 28px 42px 22px;
    box-sizing: border-box;
    color: #fff;
    flex-shrink: 0;
    overflow: visible;
    isolation: isolate;
    transition: transform 0.15s ease;
    cursor: var(--cursor-default);
}

.dungeon-reward-choice-frame .dungeon-reward-claim-btn {
    pointer-events: none; /* clicks go to the frame */
    margin-top: auto;
}

/* Frame art only — icons / Claim stay full color */
.dungeon-reward-choice-frame__chrome.frame-green {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0.38) saturate(0.18);
    transition: filter 0.15s ease;
}

.dungeon-reward-choice-frame > :not(.dungeon-reward-choice-frame__chrome) {
    position: relative;
    z-index: 2;
}

.dungeon-reward-choice-frame:hover {
    z-index: 3;
    transform: translateY(-8px);
}

.dungeon-reward-choice-frame:hover > .dungeon-reward-choice-frame__chrome {
    filter: none;
}

.dungeon-reward-stack-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    width: 100%;
    min-height: 48px;
}

.dungeon-reward-shop-value {
    color: #00FF88;
    font-size: 13px;
    font-weight: 400;
    font-family: "Exo 2", sans-serif;
    line-height: 1.2;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
    pointer-events: none;
    white-space: nowrap;
}

.dungeon-reward-shop-value-amount {
    font-weight: 700;
}

.dungeon-reward-stack-wrap .artifact-trader-reward-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: visible;
    position: relative;
}

.dungeon-reward-claim-btn.choice-btn.cta-button {
    width: auto;
    min-width: 110px;
    margin: 0;
}

/* Token Voucher — movement token sellback picker (inventory) */
.token-voucher-sellback-overlay {
    position: fixed;
    inset: 0;
    z-index: 25000;
    pointer-events: none;
}

.token-voucher-sellback-panel {
    pointer-events: auto;
    cursor: var(--cursor-default);
    background: rgba(18, 22, 38, 0.96);
    border: 2px solid #9c51f2;
    border-radius: 10px;
    padding: 12px 14px 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    min-width: 260px;
}

.token-voucher-sellback-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.auto-shields-panel-title-icon {
    width: 48px;
    height: auto;
    flex-shrink: 0;
    image-rendering: pixelated;
    object-fit: contain;
    pointer-events: none;
}

.token-voucher-sellback-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.token-voucher-sellback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 2px solid rgba(79, 195, 247, 0.55);
    background: rgba(79, 195, 247, 0.12);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: var(--cursor-default) !important;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.token-voucher-sellback-btn:hover:not(.token-voucher-sellback-btn--disabled) {
    background: rgba(79, 195, 247, 0.22);
    border-color: #4FC3F7;
    cursor: var(--cursor-default) !important;
}

.token-voucher-sellback-btn--disabled {
    opacity: 0.42;
    border-color: rgba(255, 60, 60, 0.45);
    background: rgba(120, 24, 24, 0.22);
    color: rgba(255, 180, 180, 0.85);
    cursor: var(--cursor-x) !important;
}

.token-voucher-sellback-btn--disabled:hover {
    cursor: var(--cursor-x) !important;
}

/* Auto-shields picker — magenta to match shield UI (#ff30cf) */
.auto-shields-option-btn {
    border-color: rgba(255, 48, 207, 0.55);
    background: rgba(255, 48, 207, 0.12);
}

.auto-shields-option-btn:hover {
    background: rgba(255, 48, 207, 0.22);
    border-color: #ff30cf;
}

.auto-shields-confirm-exchange {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.auto-shields-confirm-target {
    width: 56px;
    height: auto;
    image-rendering: pixelated;
    object-fit: contain;
}

.auto-shields-confirm-arrow {
    width: 30px;
    height: auto;
    image-rendering: pixelated;
    object-fit: contain;
    flex-shrink: 0;
}

.auto-shields-confirm-stacks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.auto-shields-confirm-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.auto-shields-confirm-shield-icon {
    width: 52px;
    height: 52px;
    image-rendering: pixelated;
    object-fit: contain;
}

.auto-shields-confirm-count {
    color: #ff30cf;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.token-voucher-bundle-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Movement token inventory — sellback corner button (Token Voucher purchased) */
.movement-token-sellback-btn,
.auto-shields-btn,
.tower-details-btn {
    position: absolute;
    top: 14px;
    left: 12px;
    width: 38px;
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
    cursor: var(--cursor-default);
    z-index: 35;
    line-height: 0;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Tower details: only visible while hovering the card */
.tower-details-btn {
    opacity: 0;
    pointer-events: none;
}

.inventory-item.tower:hover .tower-details-btn {
    opacity: 1;
    pointer-events: auto;
}

.movement-token-sellback-btn:hover,
.auto-shields-btn:hover,
.inventory-item.tower:hover .tower-details-btn:hover {
    opacity: 0.7;
    transform: translateY(-3px);
}

.movement-token-sellback-btn img,
.auto-shields-btn img,
.tower-details-btn img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    pointer-events: none;
}

.token-voucher-bundle-icon {
    width: 34px;
    height: auto;
    image-rendering: pixelated;
    object-fit: contain;
}

.token-voucher-bundle-currency-icon {
    width: 30px;
    height: auto;
    image-rendering: crisp-edges;
    object-fit: contain;
}

.token-voucher-bundle-qty,
.token-voucher-bundle-payout {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.token-voucher-bundle-payout {
    color: #00FF88;
}

.token-voucher-bundle-arrow {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.token-voucher-confirm-exchange {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.token-voucher-confirm-exchange .token-voucher-bundle-payout {
    font-size: 22px;
}

.token-voucher-confirm-exchange .token-voucher-bundle-icon {
    width: 48px;
}

.token-voucher-confirm-exchange .token-voucher-bundle-currency-icon {
    width: 40px;
}

/* Custom scrollbar styling for modals */
.modal::-webkit-scrollbar {
    width: 10px;
}

.modal::-webkit-scrollbar-track {
    background: rgba(22, 33, 62, 0.3);
    border-radius: 5px;
}

.modal::-webkit-scrollbar-thumb {
    background: rgba(34, 45, 75, 0.8); /* Slightly darker variant of modal background */
    border-radius: 5px;
    border: 1px solid rgba(22, 33, 62, 0.5);
}

.modal::-webkit-scrollbar-thumb:hover {
    background: rgba(40, 52, 85, 0.9); /* Lighter on hover */
}


/* Background and blur layer - must match modal's background and extend with content */
.modal::before {
    display: none;
}

/* Boss wave modal - shift hue to red while keeping saturation and lightness */
.modal.boss-wave-modal {
    background: url('assets/images/ui/modal1.png') center/100% 100% no-repeat;
    border: none;
    box-shadow: none;
    animation: none;
}

.modal.boss-wave-modal::before {
    display: none;
}

/* Boss wave modal button borders - shift to red */
.modal.boss-wave-modal .choice-btn {
    border-color: #4a2a2a; /* Shifted from #2a2a4a (blue) to red */
}

/* Wave completion modal - shift hue to green */
.modal.wave-complete-modal {
    background: url('assets/images/ui/modal1.png') center/100% 100% no-repeat;
    border: none;
    box-shadow: none;
    animation: none;
}

.modal.wave-complete-modal::before {
    display: none;
}

.modal.wave-complete-modal .choice-btn {
    border-color: #2a4a2a; /* Shifted from #2a2a4a (blue) to green */
}

/* Wave group completion modal - shift hue to gold/yellow (more saturated and bright) */
.modal-overlay.wave-group-complete .modal {
    background: url('assets/images/ui/modal1.png') center/100% 100% no-repeat;
    border: none;
    box-shadow: none;
    animation: none;
}

.modal-overlay.wave-group-complete .modal::before {
    display: none;
}

.modal-overlay.wave-group-complete .modal .choice-btn {
    border-color: #B8860B; /* Bright gold */
}

.modal-overlay.wave-group-complete .modal h2 {
    color: #FFD700; /* Gold color for title */
    text-shadow: none;
    animation: waveGroupCompleteTitle 1.5s ease-in-out infinite;
}

/* Tighter vertical rhythm: total earned + primary actions (victory + between-group continue) */
.modal-overlay.wave-group-complete .wave-group-total-earned-section {
    margin-top: -20px;
}

.modal-overlay.wave-group-complete .victory-modal-buttons {
    margin-top: -42px !important; /* was 8px; shift up 50px */
}

.modal-overlay.wave-group-complete:not(.victory-modal) #continueBtn.choice-btn {
    margin: -24px auto 0 auto !important; /* +10px gap below total earned vs prior -34px; victory modal unchanged */
}

#waveCompleteModal.modal-overlay.victory-modal .modal {
    z-index: 40;
}

#waveCompleteModal.modal-overlay.victory-modal .modal-frame-content {
    position: relative;
    z-index: 41;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Full-bleed rows; subtitle stays a centered column under the header */
#waveCompleteModal.modal-overlay.victory-modal .modal-frame-content > .wave-complete-header-container,
#waveCompleteModal.modal-overlay.victory-modal .modal-frame-content > #waveStats,
#waveCompleteModal.modal-overlay.victory-modal .modal-frame-content > .victory-modal-buttons {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.victory-subtitle-block {
    text-align: center;
    margin: 4px 16px 12px;
    max-width: 640px;
    width: min(100% - 32px, 640px);
    box-sizing: border-box;
    align-self: center;
}

.victory-subtitle-lead {
    font-size: 17px;
    color: #e8eef8;
    margin: 0 0 8px;
    line-height: 1.45;
}

.victory-subtitle-sub {
    font-size: 15px;
    color: #a8b4c8;
    margin: 0;
    line-height: 1.45;
}

/* Fixed to viewport — does not scroll with modal-frame-content */
#waveCompleteModal.modal-overlay.victory-modal > .victory-hero-dock--fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 max(6px, env(safe-area-inset-bottom)) 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: nowrap;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
    /* Entire stack (rows 1–5) shifted down so row 1 can clip at viewport bottom */
    transform: translateY(50px);
}

.victory-hero-dock {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    margin: 12px 0 4px;
    padding: 0 8px;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 42;
}

.victory-hero-col {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex: 0 1 auto;
    max-width: 50%;
    position: relative;
    overflow: visible;
}

.victory-hero-col--left {
    justify-content: flex-start;
    gap: 0;
    margin-left: clamp(-96px, -7vw, -16px);
}

.victory-hero-col--right {
    justify-content: flex-end;
    gap: 0;
    margin-right: clamp(-96px, -7vw, -16px);
    padding-right: max(0px, env(safe-area-inset-right, 0px));
}

/* Paired heroes: outer (viewport-side) should stack above inner toward center */
.victory-hero-col--left > .victory-hero-peek-layer + .victory-hero-card--main {
    z-index: 4;
}

.victory-hero-col--left > .victory-hero-card--main + .victory-hero-card--main {
    margin-left: -22%;
    transform: translateX(clamp(20px, 3vw, 52px)) translateY(var(--victory-rise, 0px));
    z-index: 3;
}

.victory-hero-col--right > .victory-hero-peek-layer + .victory-hero-card--main {
    z-index: 3;
    transform: translateX(clamp(-52px, -3vw, -20px)) translateY(var(--victory-rise, 0px));
}

.victory-hero-col--right > .victory-hero-card--main + .victory-hero-card--main {
    margin-left: -22%;
    z-index: 4;
}

.victory-hero-card--main {
    position: relative;
    z-index: 3;
    width: min(36vw, 400px);
    flex: 0 0 auto;
    transform: translateY(var(--victory-rise, 0px));
}

/* Row 5: s5 = s4²/s3; vertical step matches row 4 vs row 3 (−130px on first translate term) */
.victory-hero-fifth-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(84vh, 840px);
    pointer-events: none;
    z-index: -3;
    overflow: visible;
}

.victory-hero-card--peek-fifth {
    position: absolute;
    bottom: 0;
    width: min(25.2vw, 280px);
    z-index: -3;
    transform-origin: bottom center;
    transform: translateY(calc(-430px - clamp(150px, 30vh, 320px) + var(--victory-rise, 0px))) scale(0.4425);
}

.victory-hero-card--peek-fifth.victory-hero-peek-a {
    z-index: -2;
}

.victory-hero-card--peek-fifth.victory-hero-peek-b {
    z-index: -3;
}

.victory-hero-col--left .victory-hero-card--peek-fifth.victory-hero-peek-a {
    left: calc(-40px + max(-8px, env(safe-area-inset-left, 0px)));
}

.victory-hero-col--left .victory-hero-card--peek-fifth.victory-hero-peek-b {
    left: calc(18% - 110px);
}

.victory-hero-col--right .victory-hero-card--peek-fifth.victory-hero-peek-a {
    right: calc(-40px + max(0px, env(safe-area-inset-right, 0px)));
    left: auto;
}

.victory-hero-col--right .victory-hero-card--peek-fifth.victory-hero-peek-b {
    right: calc(18% - 110px);
    left: auto;
}

.victory-hero-card--peek-fifth .victory-hero-bob {
    min-height: min(25vh, 248px);
}

.victory-hero-card--peek-fifth .victory-hero-bob img {
    max-height: min(24vh, 236px);
    animation: victoryHeroPeekFifthPulse 2s ease-in-out infinite;
}

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

/* Row 4: same ratio vs row 3 as row 5 vs row 4 */
.victory-hero-far-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(78vh, 780px);
    pointer-events: none;
    z-index: -2;
    overflow: visible;
}

.victory-hero-card--peek-far {
    position: absolute;
    bottom: 0;
    width: min(25.2vw, 280px);
    z-index: -2;
    transform-origin: bottom center;
    transform: translateY(calc(-320px - clamp(150px, 30vh, 320px) + var(--victory-rise, 0px))) scale(0.6222);
}

.victory-hero-card--peek-far.victory-hero-peek-a {
    z-index: -1;
}

.victory-hero-card--peek-far.victory-hero-peek-b {
    z-index: -2;
}

/* Row 4 outer: 30px inward from prior outer offset; inner (peek-b) unchanged */
.victory-hero-col--left .victory-hero-card--peek-far.victory-hero-peek-a {
    left: calc(-20px + max(-8px, env(safe-area-inset-left, 0px)));
}

.victory-hero-col--left .victory-hero-card--peek-far.victory-hero-peek-b {
    left: calc(18% - 50px);
}

.victory-hero-col--right .victory-hero-card--peek-far.victory-hero-peek-a {
    right: calc(-20px + max(0px, env(safe-area-inset-right, 0px)));
    left: auto;
}

.victory-hero-col--right .victory-hero-card--peek-far.victory-hero-peek-b {
    right: calc(18% - 50px);
    left: auto;
}

.victory-hero-card--peek-far .victory-hero-bob {
    min-height: min(28vh, 276px);
}

.victory-hero-card--peek-far .victory-hero-bob img {
    max-height: min(27vh, 264px);
    animation: victoryHeroPeekFarPulse 2s ease-in-out infinite;
}

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

/* Row 3 (deep): mirror via .victory-hero-flip-wrap in JS for right column */
.victory-hero-deep-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(72vh, 720px);
    pointer-events: none;
    z-index: -1;
    overflow: visible;
}

.victory-hero-card--peek-deep {
    position: absolute;
    bottom: 0;
    width: min(25.2vw, 280px);
    z-index: -1;
    transform-origin: bottom center;
    transform: translateY(calc(-190px - clamp(150px, 30vh, 320px) + var(--victory-rise, 0px))) scale(0.7);
}

.victory-hero-card--peek-deep.victory-hero-peek-a {
    z-index: 0;
}

.victory-hero-card--peek-deep.victory-hero-peek-b {
    z-index: -1;
}

.victory-hero-col--left .victory-hero-card--peek-deep.victory-hero-peek-a {
    left: max(-8px, env(safe-area-inset-left, 0px));
}

/* Inner pair: 20px toward viewport edges */
.victory-hero-col--left .victory-hero-card--peek-deep.victory-hero-peek-b {
    left: calc(18% - 20px);
}

.victory-hero-col--right .victory-hero-card--peek-deep.victory-hero-peek-a {
    right: max(0px, env(safe-area-inset-right, 0px));
    left: auto;
}

.victory-hero-col--right .victory-hero-card--peek-deep.victory-hero-peek-b {
    right: calc(18% - 20px);
    left: auto;
}

.victory-hero-card--peek-deep .victory-hero-bob {
    min-height: min(31.5vh, 308px);
}

.victory-hero-card--peek-deep .victory-hero-bob img {
    max-height: min(30.8vh, 294px);
    animation: victoryHeroPeekDeepPulse 2s ease-in-out infinite;
}

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

/* Row 2 (mid peek): between row 1 (mains + bubbles) and row 3 (deepest) */
.victory-hero-peek-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(72vh, 720px);
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.victory-hero-card--peek {
    position: absolute;
    bottom: 0;
    width: min(25.2vw, 280px);
    z-index: 0;
    transform-origin: bottom center;
    /* 50px down vs prior; 10% smaller than previous 0.875 scale; +40px lower than prior */
    transform: translateY(calc(-10px - clamp(150px, 30vh, 320px) + var(--victory-rise, 0px))) scale(0.7875);
}

.victory-hero-card--peek.victory-hero-peek-a {
    z-index: 1;
}

.victory-hero-card--peek.victory-hero-peek-b {
    z-index: 0;
}

.victory-hero-col--left .victory-hero-card--peek.victory-hero-peek-a {
    left: calc(50px + max(-8px, env(safe-area-inset-left, 0px)));
}

.victory-hero-col--left .victory-hero-card--peek.victory-hero-peek-b {
    left: calc(18% + 50px);
}

.victory-hero-col--right .victory-hero-card--peek.victory-hero-peek-a {
    right: 50px;
    left: auto;
}

.victory-hero-col--right .victory-hero-card--peek.victory-hero-peek-b {
    right: calc(18% + 50px);
    left: auto;
}

.victory-hero-card--peek .victory-hero-bob {
    min-height: min(42vh, 420px);
}

.victory-hero-card--peek .victory-hero-bob img {
    max-height: min(40vh, 400px);
    animation: victoryHeroPeekPulse 2s ease-in-out infinite;
}

.victory-hero-flip-wrap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    transform: scaleX(-1);
}

.victory-hero-bob {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    min-height: min(45vh, 440px);
}

.victory-hero-bob img.pulsing {
    width: 100%;
    height: auto;
    max-height: min(44vh, 420px);
    object-fit: contain;
    image-rendering: crisp-edges;
    animation: waveCompleteHeroPulse 2s ease-in-out infinite;
}

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

/* Victory mini bubbles — compact rounded-rect, sit behind centered modal panel */
.character-speech-bubble-victory-mini {
    z-index: 6 !important;
    width: min(220px, 36vw);
    max-width: min(220px, 36vw);
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 12px 12px;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 14px;
    box-shadow: 0 0 8px rgba(143, 255, 141, 0.45), 0 0 28px rgba(70, 255, 70, 0.45);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.character-speech-bubble-victory-mini::after {
    top: calc(100% - 1px);
    border-width: 11px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #151B29;
    margin-left: -11px;
}

/* Victory bubbles: centered tails (symmetric left/right sides) */
.character-speech-bubble-victory-mini.victory-bubble-tail-outer-left::after,
.character-speech-bubble-victory-mini.victory-bubble-tail-inner-left::after,
.character-speech-bubble-victory-mini.victory-bubble-tail-inner-right::after,
.character-speech-bubble-victory-mini.victory-bubble-tail-outer-right::after {
    left: 50%;
    margin-left: -11px;
    right: auto;
}

.victory-modal-buttons {
    margin-top: 8px !important;
    position: relative;
    z-index: 43;
    flex-shrink: 0;
}

.modal-overlay.victory-modal #waveStats {
    position: relative;
    z-index: 43;
}

/* Glow animations */
@keyframes bossWavePulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(200, 50, 50, 0.6), 0 0 60px rgba(200, 50, 50, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(200, 50, 50, 0.8), 0 0 80px rgba(200, 50, 50, 0.6);
    }
}

@keyframes waveCompletePulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(50, 200, 50, 0.6), 0 0 60px rgba(50, 200, 50, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(50, 200, 50, 0.8), 0 0 80px rgba(50, 200, 50, 0.6);
    }
}

@keyframes standardModalPulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(42, 58, 100, 0.6), 0 0 60px rgba(42, 58, 100, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(42, 58, 100, 0.8), 0 0 80px rgba(42, 58, 100, 0.6);
    }
}

/* Border on the modal itself - now handled by .modal border, ::after only for visual layering if needed */
.modal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* No border here - border is on .modal itself to extend with content */
    border: none;
    border-radius: 12px;
    pointer-events: none;
    z-index: 2; /* Above the blur layer */
}

/* Content wrapper - all direct children */
.modal > * {
    position: relative;
    z-index: 3; /* Above border */
}

/* Exclude scenario dropdown container wrapper from opacity reduction */
.modal > div[style*="margin: 20px 0"] {
    opacity: 1 !important;
}

/* Handle scrollable content areas */
.modal > div[style*="overflow"] {
    overflow-y: auto !important;
    max-height: inherit;
}

.modal h2 {
    color: #ff6b35;
    font-size: 32px;
    margin-bottom: 24px;
    text-align: center;
    transform: translateY(-10px);
}

.modal-subtitle {
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
}

/* Score leaderboard */
.leaderboard-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0;
}
.leaderboard-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 2px 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    gap: 16px;
}
.leaderboard-rank {
    color: #aaa;
    min-width: 32px;
    font-weight: bold;
}
.leaderboard-score {
    color: #FFD700;
    font-weight: bold;
    flex: 1;
}
.leaderboard-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 8px 0 12px;
}
.leaderboard-tabs .leaderboard-tab {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}
.leaderboard-entry.is-you {
    background: rgba(255, 215, 0, 0.12);
}
.leaderboard-name {
    color: #eee;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-wave {
    color: #aaa;
    font-size: 12px;
    min-width: 72px;
    text-align: right;
}

.modal-choices {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Settings: pin footer buttons; settings grid scrolls with bottom fade */
#settingsModalInner .modal-frame-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

#settingsModalInner .modal-frame-content::after {
    display: none;
}

#settingsModalInner .modal-frame-content > h2,
#settingsModalInner .modal-frame-content > .modal-choices-settings-footer {
    flex-shrink: 0;
}

#settingsModalInner .settings-scroll-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#settingsModalInner .settings-scroll-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    background: linear-gradient(to bottom, transparent 0%, #071025 100%);
    pointer-events: none;
    z-index: 2;
}

#settingsModalInner #settingsContent.settings-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0px;
    padding-bottom:26px;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 45, 75, 0.8) rgba(22, 33, 62, 0.3);
}

#settingsModalInner #settingsContent.settings-grid::-webkit-scrollbar {
    width: 10px;
}

#settingsModalInner #settingsContent.settings-grid::-webkit-scrollbar-track {
    background: rgba(22, 33, 62, 0.3);
    border-radius: 5px;
}

#settingsModalInner #settingsContent.settings-grid::-webkit-scrollbar-thumb {
    background: rgba(34, 45, 75, 0.8);
    border-radius: 5px;
}

/* Settings: two footer rows (utility links, then Done / Advanced) */
#settingsModalInner .modal-choices-settings-footer {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
    margin-top: 8px;
    position: relative;
    z-index: 3;
}

#settingsModalInner .modal-choices-settings-footer-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 8px;
}

#settingsModalInner .modal-choices-settings-footer-row .choice-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* Advanced settings: full-width Done only */
#advancedSettingsModal .modal-choices-advanced-footer {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top:20px;
}

#advancedSettingsModal .modal-choices-advanced-footer .choice-btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

/* Settings Panel Styles */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0px;
}

.setting-item {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.setting-item.setting-item-display-name {
    grid-column: 1 / -1;
}

.setting-display-name-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.setting-item-display-name label {
    color: #fff;
    font-weight: bold;
    margin: 0;
}

.setting-item-display-name .setting-display-name-hint {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

.setting-item-display-name .rename-input {
    margin-bottom: 0;
}

/* Label left + toggle right: keep ≥10px gap so the knob never crowds the text */
.setting-item label:has(> .toggle-switch),
.setting-item > div:has(> .toggle-switch) {
    gap: 10px;
}

.setting-item .toggle-switch {
    flex-shrink: 0;
    margin-left: 10px;
}

.setting-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: var(--cursor-default);
    transition: all 0.2s;
}

.setting-slider::-webkit-slider-thumb:hover {
    background: #66BB6A;
    transform: scale(1.1);
}

.setting-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: var(--cursor-default);
    border: none;
    transition: all 0.2s;
}

.setting-slider::-moz-range-thumb:hover {
    background: #66BB6A;
    transform: scale(1.1);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: var(--cursor-default);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4CAF50;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.toggle-switch input:disabled + .toggle-slider {
    opacity: 0.45;
    cursor: not-allowed;
}

.toggle-switch input:disabled:hover + .toggle-slider {
    box-shadow: none;
}

.setting-item.endless-toggle-locked {
    opacity: 0.7;
}

.toggle-switch input:hover + .toggle-slider {
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.choice-btn:not(.cta-button) {
    padding: 16px 24px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

/* CTA buttons get their padding from .cta-button, not from .choice-btn */
.choice-btn.cta-button {
    /* padding-left and padding-right come from .cta-button (28px each) */
    /* padding-top and padding-bottom are handled by .cta-button height (66px) with vertical centering */
    /* font-size, font-weight, letter-spacing, and text-transform come from .cta-button */
    /* Don't override - let .cta-button handle it */
    color: #fff;
    width: 100%; /* Fill container like tab buttons fill their flex space */
    display: flex; /* Use flex to center content vertically */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

/* Upgrade modal buttons - match hover behavior used elsewhere */
.upgrade-modal-btn {
    transition: all 0.3s;
}

/* Hover effect for upgrade choice buttons (not CTA buttons) */
.upgrade-modal-btn:hover:not(.cta-button) {
    background: var(--btn-bg-hover);
    border-color: var(--btn-border-hover);
    transform: translateY(-2px);
}

#upgradeButtons {
    .upgrade-option-column:first-child {
        transform: translateX(20px);
    }
    .upgrade-option-column:last-child {
        transform: translateX(-20px);
    }
}

.tower-upgrade-max-btn.choice-btn.cta-button {
    margin-top: 2px;
    width: auto;
    align-self: center;
}

.tower-upgrade-max-btn--disabled,
.tower-upgrade-max-btn--disabled:hover {
    opacity: 0.5;
    filter: brightness(0.6) !important;
    cursor: var(--cursor-x) !important;
}

/* CTA buttons use filter hover effect, not background colors - defined earlier in file */

/* Rename input field */
.rename-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #2a2a4a;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    margin-bottom: 20px;
    box-sizing: border-box;
    transition: all 0.3s;
}

.rename-input:focus {
    outline: none;
    border-color: #2196F3;
    background: rgba(255, 255, 255, 0.15);
}
#gameOverModal .game-over-stats-frame
.rename-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.game-over-stats,
.wave-stats {
    border-radius: 8px;
    padding: 0;
    margin-bottom: 30px; /* Add spacing between stats and buttons */
}

.game-over-stats p,
.wave-stats p {
    padding: 8px 0;
}

.game-over-stats {
    min-width:475px;
}

/* Game Over Modal specific styling */
#gameOverModal .modal-frame-content {
    padding-left: 40px; /* More padding on left */
    padding-right: 40px; /* More padding on right */
}

/* Two-column game over (stats + unlocks): room for stats + readable unlock cards */
#gameOverModal .modal:has(.game-over-columns--has-unlocks) {
    max-width: min(980px, calc(100vw - 40px));
    width: min(980px, calc(100vw - 40px));
}

#gameOverModal .game-over-stats:has(.game-over-columns--has-unlocks) {
    min-width: 0;
    width: 100%;
}

#gameOverModal .game-over-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* .modal h2 uses translateY(-10px) which clips the skull inside overflow scroll areas */
    transform: none;
    margin-top: 0;
    margin-bottom: 24px;
    overflow: visible;
}

#gameOverModal .game-over-title-icon {
    width: 56px;
    height: auto;
    flex-shrink: 0;
    image-rendering: crisp-edges;
    display: block;
}

#gameOverModal .game-over-columns {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

#gameOverModal .game-over-columns--has-unlocks {
    gap: 28px;
}

#gameOverModal .game-over-column {
    flex: 1 1 0;
    min-width: 0;
}

#gameOverModal .game-over-column-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#gameOverModal .game-over-stats-frame {
    text-align: left;
    background-image: url('assets/images/ui/frame-boss-info.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 54px 46px 70px 46px;
    font-size:20px;
    min-width: 0;
}

#gameOverModal .game-over-stat-value {
    color: #00FF88;
    font-weight: bold;
}

#gameOverModal .game-over-stat-value-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

#gameOverModal .game-over-stat-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: auto;
    flex-shrink: 0;
}

#gameOverModal .game-over-stat-icon--perfect {
    width: 26px;
    height: 26px;
}

/* Same button layout for one- and two-column game over: VIEW MAP | RUN HISTORY, then MAIN MENU full width */
#gameOverModal .game-over-stats-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

#gameOverModal .game-over-stats-actions-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}

#gameOverModal .game-over-stats-actions-row .choice-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    white-space: nowrap;
}

#gameOverModal .game-over-stats-actions > .game-over-main-menu-btn {
    flex: 0 0 auto;
    width: 100% !important;
    white-space: nowrap;
}

/* With unlock cards beside stats, keep a stable stats column; unlock column is intentionally narrower */
#gameOverModal .game-over-columns--has-unlocks .game-over-column-stats {
    flex: 0 0 530px;
    width: 530px;
    max-width: 530px;
}

#gameOverModal .game-over-columns--has-unlocks .game-over-column-unlock {
    flex: 1 1 0;
    min-width: 260px;
    max-width: 360px;
}

#gameOverModal .game-over-column-unlock .meta-progression-unlocks {
    margin-top: 0;
}

#gameOverModal .game-over-column-unlock .placement-new-items-container {
    max-width: none;
}

#gameOverModal .game-over-column-unlock .placement-new-item-frame {
    width: 100%;
    min-height: 166.5px;
    height: auto;
}

.game-over-return-btn {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 900;
    display: none;
    width: auto;
    min-width: 220px;
    pointer-events: auto;
    color: #FFFFFF !important;
    text-transform: uppercase;
}

.cta-button.game-over-return-btn:active:not(:disabled):not(.disabled):not(.shop-sub-tab-button) {
    transform: translateX(-50%) !important;
}

body.game-over-map-locked,
body.game-over-map-locked * {
    cursor: var(--cursor-x) !important;
}

body.game-over-map-locked #gameOverReturnBtn,
body.game-over-map-locked #gameOverReturnBtn * {
    cursor: var(--cursor-default) !important;
}

body.game-over-map-locked #sidePanel,
body.game-over-map-locked #sidePanelToggle {
    pointer-events: none;
}

/* Scenario Dropdown */
.scenario-dropdown-container {
    position: relative;
    z-index: 1;
    /* Override modal > * opacity to prevent it from affecting dropdown menu */
    opacity: 1 !important;
}

.scenario-dropdown-container.is-open {
    z-index: 20;
}

.scenario-dropdown {
    position: relative;
    width: 100%;
}

.scenario-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: rgba(22, 33, 62, 0.98) !important; /* More opaque for better readability */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid #2a2a4a;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    z-index: 4000;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    opacity: 1 !important;
    min-height: 40px;
}

.scenario-dropdown-menu.active {
    display: block !important;
}

.scenario-dropdown-selected {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #2a2a4a;
    border-radius: 8px;
    cursor: var(--cursor-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.scenario-dropdown-selected:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4CAF50;
}

.scenario-dropdown-selected.active {
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.scenario-dropdown-selected:active {
    transform: translateY(2px);
}

.scenario-dropdown-arrow {
    transition: transform 0.3s;
    color: #aaa;
}

.scenario-dropdown-selected.active .scenario-dropdown-arrow {
    transform: rotate(180deg);
}

.scenario-dropdown-option {
    padding: 12px 16px;
    cursor: var(--cursor-default);
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.scenario-dropdown-option:last-child {
    border-bottom: none;
}

.scenario-dropdown-option:hover {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.scenario-dropdown-option:active {
    transform: translateY(2px);
}

.scenario-dropdown-option.selected {
    background: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
    font-weight: bold;
}

.choice-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.choice-btn:disabled:hover {
    transform: none;
}

/* Dragging States */
.dragging {
    opacity: 0.5;
    cursor: var(--cursor-drag);
}

.drag-preview {
    position: fixed;
    pointer-events: none;
    opacity: 0.8;
    z-index: 999;
}

/* Tower sprite that follows the cursor while placing / moving */
.tower-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: 10000;
    overflow: visible;
    display: none;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
    will-change: transform;
}

.tower-drag-ghost.tower-drag-ghost--visible {
    display: block;
}

.tower-drag-ghost img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.inventory-item.tower-drag-source .icon {
    visibility: hidden;
}

/* Scrollbar Styling */
.side-panel::-webkit-scrollbar,
.tab-content::-webkit-scrollbar {
    width: 8px;
}

.side-panel::-webkit-scrollbar-track {
    background: #1a2332;
}

.tab-content::-webkit-scrollbar-track {
    background: #071025; /* Match container background so only thumb is visible */
}

.side-panel::-webkit-scrollbar-thumb,
.tab-content::-webkit-scrollbar-thumb {
    background: #2a2a4a;
    border-radius: 4px;
}

.side-panel::-webkit-scrollbar-thumb:hover,
.tab-content::-webkit-scrollbar-thumb:hover {
    background: #3a3a5a;
}

/* Firefox scrollbar styling for tab-content */
.tab-content {
    scrollbar-width: thin;
    scrollbar-color: #2a2a4a #071025; /* thumb track - match background so only thumb is visible */
}

/* Inventory badge bounce animation - SUPER dramatic */
@keyframes inventoryBounce {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.8);
    }
    30% {
        transform: scale(0.6);
    }
    45% {
        transform: scale(1.6);
    }
    60% {
        transform: scale(0.8);
    }
    75% {
        transform: scale(1.3);
    }
    90% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Steady pulsing animation - much more dramatic */
@keyframes inventoryPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

/* Tower purchase animation */
@keyframes towerPurchase {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Expanding ring animation for upgradeable inventory towers */
@keyframes upgradeRingExpand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0;
    }
}

/* CSS class for upgradeable inventory towers with expanding ring effect */
/* Size pulse animation for upgradeable towers in inventory (upgrade mode only) */
.inventory-item.upgradeable-size-pulse,
.upgradeable-size-pulse {
    animation: inventorySizePulse 1s ease-in-out infinite;
}

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

/* Level-up modal pulse animation - twice as slow as inventory pulse */
@keyframes levelUpSizePulse {
    0%, 100% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
}

/* Resume button pulse animation - matches upgradeable inventory items */
.cta-button.resume-pulse {
    animation: inventorySizePulse 1s ease-in-out infinite;
}

/* Dim non-upgradeable items in upgrade mode */
.inventory-item.upgrade-mode-dimmed {
    opacity: 0.4;
    filter: brightness(0.6);
    pointer-events: none;
}

/* Keep the pink pulse for map towers (not inventory) */
.inventory-item.upgradeable-pulse {
    position: relative;
    border-color: #ff67e7 !important;
    overflow: visible; /* Allow rings to extend beyond border */
    z-index: 1; /* Ensure rings appear above other elements */
}

.inventory-item.upgradeable-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 3px solid #ff67e7;
    border-radius: 10px;
    pointer-events: none;
    animation: upgradeRingExpand 0.9375s ease-out infinite;
    box-shadow: 0 0 10px rgba(255, 103, 231, 0.7);
    transform-origin: center;
}

.inventory-item.upgradeable-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 3px solid #ff67e7;
    border-radius: 10px;
    pointer-events: none;
    animation: upgradeRingExpand 0.9375s ease-out infinite 0.46875s;
    box-shadow: 0 0 10px rgba(255, 103, 231, 0.7);
    transform-origin: center;
}

/* Upgrade Tokens Styling */
.upgrade-tokens {
    position: relative;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    border: none !important;
    transition: none;
    user-select: none;
}

.upgrade-tokens:hover {
    background: transparent;
    border: none !important;
    box-shadow: none;
    transform: none;
}

.upgrade-tokens.clickable {
    animation: tokenPulse 2s infinite;
}

.upgrade-tokens.disabled {
    color: #ff67e7 !important; /* Keep upgrade plan pink even at 0 (like movement tokens) */
    background: transparent !important;
    border: none !important;
    cursor: not-allowed !important;
    animation: none !important;
}

.upgrade-tokens.disabled:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

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

/* Newly unlocked items - yellow frame background, no glow/shimmer, keep UNLOCKED text */
.inventory-item.newly-unlocked {
    position: relative;
    /* Yellow frame background (overrides blue/purple/red frames) */
    background-image: url('assets/images/ui/frame-yellow.png') !important;
    /* Size pulse animation - no glow/shimmer */
    animation: inventorySizePulse 1.5s ease-in-out infinite;
}

/* Keep yellow frame on hover for newly unlocked items */
.inventory-item.newly-unlocked:hover:not(.locked) {
    background-image: url('assets/images/ui/frame-yellow.png') !important;
}

/* Remove shimmer effect from newly unlocked items */
.inventory-item.newly-unlocked::before {
    display: none; /* Remove shimmer effect */
}

/* Keep UNLOCKED text for newly unlocked items */
.inventory-item.newly-unlocked::after {
    content: 'UNLOCKED';
    position: absolute;
    top: 12px;
    right: -8px;
    font-size: 11px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 1);
    transform: rotate(40deg);
    z-index: 2;
    pointer-events: none;
    /* No animation - static text */
    letter-spacing: 0px;
    white-space: nowrap;
}

/* Museum loan — same diagonal tag styling as UNLOCKED, no card pulse */
.inventory-item.artifact.museum-on-loan::after {
    content: 'ON LOAN';
    position: absolute;
    top: 12px;
    right: -8px;
    font-size: 13px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    transform: rotate(45deg);
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0px;
    white-space: nowrap;
}

/* Museum traded to Artifact Trader — same tag styling, red text */
.inventory-item.artifact.museum-traded::after {
    content: 'TRADED';
    position: absolute;
    top: 12px;
    right: -8px;
    font-size: 13px;
    font-weight: bold;
    color: #FF3333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    transform: rotate(45deg);
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0px;
    white-space: nowrap;
}

/* Shop — one-time purchase already owned this run */
.inventory-item.shop-sold-out {
    cursor: var(--cursor-x);
}

.inventory-item.shop-sold-out:hover {
    cursor: var(--cursor-x);
}

.inventory-item.shop-sold-out .icon,
.inventory-item.shop-sold-out > div {
    opacity: 0.72;
    filter: saturate(0.75);
}

.inventory-item.shop-sold-out::after {
    content: 'SOLD OUT';
    position: absolute;
    top: 12px;
    right: -8px;
    font-size: 11px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    transform: rotate(40deg);
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0px;
    white-space: nowrap;
}

/* Overlay Panels */
.overlay-panel {
    position: absolute;
    border-radius: 8px;
    padding: 0;
    z-index: 100;
    min-width: 160px; /* Reduced by 20px from 180px */
    overflow: hidden;
    background: transparent;
    border: none;
}

/* Background image layer */
.overlay-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/images/ui/modal8.png') center/100% 100% no-repeat;
    border-radius: 8px;
    z-index: -1;
}

/* Content wrapper */
.overlay-panel > * {
    position: relative;
    z-index: 2;
    opacity: 1; /* Full opacity - no muting */
}

.overlay-panel .overlay-content {
    padding: 8px 28px 35px 30px;
}

/* Hide game overlay until game is started (skip/start on story, or load game/scenario) */
body.game-not-started .overlay-top-left-stack {
    visibility: hidden;
    pointer-events: none;
}

body.game-not-started .controls {
    visibility: hidden;
    pointer-events: none;
}

/* Top-left HUD + FPS stack: panel above, FPS readout directly below (outside the panel frame) */
.overlay-top-left-stack {
    position: absolute;
    top: 3px;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-width: 210px;
}

.overlay-top-left-stack .overlay-panel.overlay-top-left {
    position: relative;
    top: auto;
    left: auto;
}

.overlay-top-left {
    min-width: 210px;
    max-width: 210px;
}

/* Collapsible wrapper for the left-side overlays (panel + FPS + tower status).
   Slides off-screen to the left when the player hides the overlays. */
.overlay-left-collapsible {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
}
body.left-overlays-collapsed .overlay-left-collapsible {
    transform: translateX(-115%);
    opacity: 0;
    pointer-events: none;
}

/* Stack still occupies layout space when panels slide off — disable hit testing on the
   empty column so the canvas receives mouse events; re-enable only on the toggle. */
body.left-overlays-collapsed .overlay-top-left-stack {
    pointer-events: none;
}
body.left-overlays-collapsed .overlay-left-toggle {
    pointer-events: auto;
}
body.left-overlays-collapsed .tower-status-panel {
    pointer-events: none;
}

/* Toggle button overlapping the stats panel's bottom-right corner.
   JS keeps its position aligned to the panel and animates `left`. */
.overlay-left-toggle {
    position: absolute;
    left: 150px;
    top: 346px;
    width: 46px;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0C1A30;
    border: 2px solid #22456C;
    border-radius: 8px;
    cursor: var(--cursor-default);
    z-index: 3; /* Above the panel background, overlapping its bottom-right corner */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: left 0.3s ease, background 0.2s ease, transform 0.1s ease;
}
.overlay-left-toggle:hover {
    background: #1a2c48;
}
.overlay-left-toggle:active {
    transform: scale(0.94);
}
.overlay-left-toggle-arrow {
    width: auto;
    height: 26px;
    object-fit: contain;
    image-rendering: crisp-edges;
    transform: rotate(0deg); /* native art points left while overlays are open */
    transition: transform 0.3s ease;
    pointer-events: none;
}
body.left-overlays-collapsed .overlay-left-toggle-arrow {
    transform: rotate(180deg); /* points right while overlays are hidden */
}

/* Floating compact stats along the very top, over the canvas, shown when
   the left overlays are hidden. No background — just text/graphics. */
.overlay-top-stats {
    position: absolute;
    top: 10px;
    left: 16px;
    display: none;
    align-items: center;
    gap: 17px;
    z-index: 90;
    pointer-events: none;
    font-family: "Exo 2", sans-serif;
    white-space: nowrap;
}
body.left-overlays-collapsed .overlay-top-stats {
    display: flex;
}
body.game-not-started .overlay-top-stats {
    display: none !important;
}
.overlay-top-stats .floating-stat {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5);
}
.overlay-top-stats .floating-stat-timer {
    font-size: 22px;
}
.overlay-top-stats .floating-stat-currency {
    color: #00FF88;
}
.overlay-top-stats .floating-stat-level {
    display: inline-flex;
    align-items: center;
}

/* Parent bar is pointer-events: none so stats don't block the map; re-enable on level hex trigger */
.overlay-top-stats .floating-stat-level.specialty-tree-trigger {
    pointer-events: auto;
}
.floating-level-hex-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transform: translateY(2px);
}
.floating-level-hex {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}
.floating-level-value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -67%);
    font-size: 14px;
    font-weight: 700;
    color: #ffc654;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.6);
}

.fps-counter-floating {
    font-family: "Exo 2", ui-monospace, monospace;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    padding: 0 0 0 30px;
    min-height: 1.2em;
    pointer-events: none;
    letter-spacing: 0.02em;
    transform:translateY(-10px);
    text-shadow:
        0 0 4px rgba(0, 0, 0, .5),
        0 0 10px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(0, 0, 0, .5),
        0 2px 6px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}

.fps-counter-label {
    color: #ffffff;
}

.fps-counter-floating[hidden] {
    display: none !important;
}

/* Tower Status list (under FPS) — no outer frame; cards use tooltip-style blur */
.tower-status-panel {
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 160px;
    box-sizing: border-box;
    padding: 4px 0 0 8px;
    pointer-events: auto;
    margin-top: -13px;
}

.tower-status-header-row {
    margin-bottom: 0;
}

.overlay-row-right.tower-status-header-row {
    transform: translateX(-6px);
}

.tower-status-scroll-area {
    /* Grow only as tall as the towers need; start scrolling once it fills the available space.
       Using max-height (not a fixed height) keeps the empty area below the cards from covering
       the canvas — so the bottom-left hero portrait stays hoverable when only a few towers exist. */
    max-height: calc(100vh - 580px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    padding-left: 4px;
    margin-left: -4px;
    margin-right: 0;
    /* Scrollbar: subtle */
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 180, 255, 0.5) rgba(0, 0, 0, 0.25);
}

.tower-status-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.tower-status-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(120, 180, 255, 0.45);
    border-radius: 4px;
}
.tower-status-scroll-area::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.tower-status-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
}

.tower-status-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    /* Reserve width for abs-positioned tower art so jet/spread turrets are not clipped */
    padding: 4px 6px 4px 40px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: var(--cursor-default, pointer);
    border-radius: 8px;
    overflow: visible;
    isolation: isolate;
    min-height: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.tower-status-card::before {
    content: '';
    position: absolute;
    inset: 0;
    /* PERF: was backdrop-filter: blur(10px) saturate(150%) — with N cards over the
       animated canvas that meant N GPU blur passes re-run every frame. A slightly
       more opaque tint reads nearly identically and costs nothing per frame. */
    background: rgba(13, 18, 26, 0.82);
    border-radius: 8px;
    z-index: 0;
    pointer-events: none;
}

.tower-status-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(40, 55, 85, 0.45);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
    transition: border-color 0.28s ease, border-width 0.28s ease;
}

/* Tower hex on fire — dark red panel + pulsing red border */
.tower-status-card.tower-status-card--burning::before {
    background: rgba(52, 16, 16, 0.68);
    animation: tower-status-burn-bg 1.1s ease-in-out infinite alternate;
}

@keyframes tower-status-burn-bg {
    from {
        background: rgba(42, 12, 12, 0.62);
    }
    to {
        background: rgba(72, 22, 22, 0.78);
    }
}

.tower-status-card.tower-status-card--burning::after {
    border-width: 1.5px;
    animation: tower-status-burn-border 0.85s ease-in-out infinite;
}

@keyframes tower-status-burn-border {
    0%,
    100% {
        border-color: rgba(220, 55, 45, 0.95);
    }
    50% {
        border-color: rgba(255, 130, 110, 1);
    }
}

.tower-status-card:hover::after {
    border-color: rgba(255, 255, 255, 0.92);
    animation: none;
}

.tower-status-card.tower-status-card--burning:hover::before {
    animation: none;
    background: rgba(58, 18, 18, 0.72);
}

.tower-status-card > * {
    position: relative;
    z-index: 2;
}

.tower-status-icon-slot {
    position: absolute;
    left: -7px;
    top: 50%;
    z-index: 3;
    width: 56px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Rotatable towers (jet/spread/bomber) extend turret to the right — bias crop toward base */
.tower-status-icon-slot > div {
    transform: scale(0.42);
    transform-origin: 38% 50%;
}

.tower-status-icon-slot.tower-status-icon--centered > div {
    transform-origin: center center;
}

.tower-status-bars {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    pointer-events: none;
}

.tower-status-bar-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-height: 0;
}

.tower-status-row-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    opacity: 0.95;
}

.tower-status-bar-track {
    flex: 1 1 auto;
    height: 5px;
    min-width: 0;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.tower-status-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 2px;
}

.tower-status-bar-fill--shield {
    background: #ff30cf;
}

.overlay-debug-selector {
    top: 3px; /* Same top as top-left panel */
    left: 203px; /* 16px (left) + 175px (min-width of top-left) + 5px (spacing) = 196px */
    min-width: 160px;
    max-width: 160px;
    z-index: 101; /* Ensure it's above other panels */
    transition: left 0.3s ease, top 0.3s ease;
}

/* When left overlays are hidden, slide debug into the vacated left space and
   drop it below the floating compact top stats so it doesn't cover currency. */
body.left-overlays-collapsed .overlay-debug-selector {
    left: 0;
    top: 43px; /* 3px + ~40px */
}
.overlay-panel.overlay-debug-selector .overlay-content {
    padding-left: 22px;
    padding-right: 22px;
}

.overlay-content-debug {
    gap: 5px !important;
    padding-top: 0 !important;
    padding-bottom: 32px !important;
}

.overlay-debug-selector .overlay-row {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0;
}

.overlay-debug-selector .overlay-row .overlay-label {
    margin: 0;
}

.overlay-debug-selector .debug-buttons-row {
    margin: 0 !important;
    padding: 0 !important;
}

.debug-input {
    width: 60px;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: inherit;
}

.debug-input-compact {
    width: 36px;
    padding: 2px 2px;
    min-width: 0;
}

.debug-row-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.debug-row-nowrap {
    flex-wrap: nowrap !important;
}

.debug-row-inline .debug-input-compact {
    flex-shrink: 0;
}

.debug-row-inline .cta-button {
    flex-shrink: 0;
    margin: 0;
}

/* Simple debug buttons (no glow effect, compact) */
.debug-btn {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    transition: transform 0.08s ease-out;
    font-weight: 500;
    cursor: var(--cursor-default);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-align: center;
    min-width: 32px;
}

.debug-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}

.debug-btn:active {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(2px);
}

/* Debug button colors */
.debug-btn-blue {
    background: rgba(30, 60, 120, 0.7);
    border-color: rgba(80, 140, 220, 0.6);
}

.debug-btn-blue:hover {
    background: rgba(30, 60, 120, 0.9);
    border-color: rgba(80, 140, 220, 0.8);
}

.debug-btn-red {
    background: rgba(120, 30, 30, 0.7);
    border-color: rgba(220, 80, 80, 0.6);
}

.debug-btn-red:hover {
    background: rgba(120, 30, 30, 0.9);
    border-color: rgba(220, 80, 80, 0.8);
}

.debug-btn-green {
    background: rgba(30, 120, 60, 0.7);
    border-color: rgba(80, 220, 140, 0.6);
}

.debug-btn-green:hover {
    background: rgba(30, 120, 60, 0.9);
    border-color: rgba(80, 220, 140, 0.8);
}

.debug-btn-yellow {
    background: rgba(120, 100, 30, 0.7);
    border-color: rgba(220, 180, 80, 0.6);
}

.debug-btn-yellow:hover {
    background: rgba(120, 100, 30, 0.9);
    border-color: rgba(220, 180, 80, 0.8);
}

/* Debug buttons that wrap to two lines so they fit on one row */
.debug-btn-wrap {
    white-space: normal;
    word-break: break-word;
    max-width: 5.5em;
    line-height: 1;
    padding: 3px 3px;
    min-width:5.5em;
    font-size:10px;
}

.debug-btn#debugEndWaveBtn {
    padding-left:5px;
    padding-right:5px;
}

.debug-row-level {
    justify-content: space-between;
}

.debug-buttons-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}
.debug-buttons-row .cta-button {
    margin: 0;
    color: #fff !important;
}

/* Map Fires / Towers / Items / Vortexes / Extinguished: compact icon+value rows in top-left HUD */
.overlay-map-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 30px;
}
/* Content-sized pairs packed left; higher specificity than .overlay-row { display: flex }. */
.overlay-map-stats .overlay-map-stats-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}
.overlay-map-stats .overlay-resource-pair {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    width: auto;
    flex: 0 0 auto;
}
.overlay-map-stats .overlay-label {
    font-size: 14px;
    min-width: 0;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.overlay-map-stats .overlay-value {
    font-size: 13px;
    min-width: 0;
    text-align: left;
    line-height: 1;
}
.overlay-map-stat-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    /* Prefer nearest-neighbor so downscaled sprites stay sharp (not soft/blurry). */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    vertical-align: middle;
    margin-right: 0;
    flex-shrink: 0;
}
/* Face right like shop; slightly larger than other HUD icons. */
.overlay-map-stat-icon-tower {
    width: 24px;
    height: 24px;
    transform: rotate(90deg);
    transform-origin: center center;
}
.overlay-row-values-column {
    justify-content: flex-start;
}
.overlay-row-values-column .overlay-label {
    min-width: 95px; /* Fixed width so values align in a column */
}
.overlay-row-values-column .overlay-value {
    min-width: 28px;
    text-align: left;
}

.overlay-bottom-left {
    bottom: 16px;
    left: 16px;
}

.overlay-bottom-right {
    bottom: 16px;
    right: 16px;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overlay-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0px 0px;
}


.overlay-row-right {
    justify-content: flex-start;
    transform:translateX(-16px);
}

.overlay-wave-row {
    align-items: center;
    flex-wrap: nowrap;
    gap:5px;
}

.overlay-endless-mode-badge {
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7dd3fc;
    flex-shrink: 0;
    line-height: 1.15;
    text-align: center;
    opacity: 0.95;
    text-align:left;
}

.overlay-label {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    min-width: 60px;
    flex-shrink: 0;
}

.overlay-value {
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
    flex: 0 0 auto;
}

/* Currency, upgrade plans, and movement tokens - larger font and left-aligned to match progress bars */
.overlay-value#overlayCurrency,
.overlay-value.upgrade-tokens,
.overlay-value.movement-tokens {
    font-size: 21px;
    flex: 0 0 auto;
    margin-left: 0;
    text-align: left;
}

/* Ensure overlay-label in currency/upgrade/movement rows matches progress label width */
.overlay-row-resource .overlay-label {
    min-width: auto;
    width: auto;
    flex-shrink: 0;
}

/* Combined row: upgrade plans + movement tokens on same row */
/* No gap - matches currency row spacing (icon margin-right: 8px only) */
.overlay-row-resource-combined {
    flex-wrap: wrap;
    gap: 0;
}
.overlay-label-compact {
    margin-left: 0;
}
/* Each pair (icon + value) is a flex unit; space between upgrade plans and movement tokens */
.overlay-resource-pair {
    display: inline-flex;
    align-items: center;
}
.overlay-resource-pair-movement {
    margin-left: 23px;
}

/* Color for fire-count, overlayPlacedTowers, and overlayPlacedItems is now set dynamically in updateUI() */

.overlay-timer {
    font-size: 46px;
    line-height:40px;
    font-weight: bold;
    color: white;
    text-align: center;
    margin: 0px 0;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    transform:translateY(-5px);
}

/* Progress Bar Container - matches reference UI kit design */
.overlay-progress-bar-container {
    display: flex;
    align-items: center;
    margin: 0 0;
    width: 100%;
}

/* Level + XP combined row: level hex with number overlay on left, XP bar on right */
.overlay-level-xp-row {
    position: relative; /* anchor for absolutely positioned hex badge */
}
.overlay-level-hex-wrap {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-4px, calc(-50% + 2px));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    z-index: 2; /* sits above the bar fill */
    pointer-events: none;
}
/* Give the XP bar a left indent so the text label clears the hex badge */
.overlay-level-xp-row .overlay-progress-bar {
    padding-left: 38px;
}
.overlay-level-hex {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
}
.overlay-level-value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -65%);
    font-size: 19px;
    font-weight: bold;
    color: #ffc654;
    pointer-events: none;
    text-align: center;
    line-height: 1;
    text-shadow: 0 0 1px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.5);
}

.overlay-progress-label {
    color: #FFFFFF; /* Default white */
    font-size: 15px;
    font-weight: bold;
    flex-shrink: 0;
}

/* HP container: same absolute-badge treatment as the XP row */
.overlay-hp-container {
    position: relative;
}
.overlay-hp-container .overlay-progress-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
}
/* Give the HP bar a left indent so the text label clears the tree icon */
.overlay-hp-container .overlay-progress-bar {
    padding-left: 38px;
}

/* XP label - yellow to match fill */
.overlay-progress-bar-container:not(.overlay-hp-container) .overlay-progress-label {
    color: #FCD619; /* Yellow to match XP fill */
}

/* HP label - matches current grove HP color */
.overlay-hp-container .overlay-progress-label {
    color: var(--grove-hp-color, rgb(0, 255, 0));
}

.overlay-progress-bar {
    flex: 1;
    position: relative;
    height: 28px; /* Taller bars like reference */
    background: rgba(30, 30, 30, 0.95); /* Dark gray background matching reference */
    border: 1px solid rgba(180, 180, 180, 0.4); /* Light gray border matching reference */
    border-radius: 5px; /* Rounded corners all around */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* XP bar border - yellow to match fill */
.overlay-progress-bar-container:not(.overlay-hp-container) .overlay-progress-bar {
    border-color: #FCD619; /* Yellow border to match XP fill */
}

/* HP bar border - matches current grove HP color */
.overlay-hp-container .overlay-progress-bar {
    border-color: var(--grove-hp-color, rgb(0, 255, 0));
}

/* If using background images from UI kit, uncomment and adjust these: */
/* 
.overlay-progress-bar {
    background-image: url('assets/images/ui/progress_bar_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    clip-path: none;
}
*/

.overlay-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    z-index: 1;
    /* Outer track (.overlay-progress-bar) stays rounded; fill has a straight vertical right edge */
    border-radius: 4px 0 0 4px;
}

/* If using background images from UI kit for the fill, uncomment and adjust: */
/*
.overlay-xp-fill {
    background-image: url('assets/images/ui/progress_bar_xp_fill.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    clip-path: none;
}

.overlay-hp-fill {
    background-image: url('assets/images/ui/progress_bar_hp_fill.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    clip-path: none;
}
*/

.overlay-xp-fill {
    background: #FCD619; /* Solid yellow color for XP bar */
}

.overlay-hp-fill {
    background: var(--grove-hp-color, rgb(0, 255, 0));
}

@keyframes overlayGroveHpFillFlash {
    0%, 100% { background: var(--grove-hp-color, rgb(0, 255, 0)); }
    50% { background: #FF2233; }
}

@keyframes overlayGroveHpBorderFlash {
    0%, 100% { border-color: var(--grove-hp-color, rgb(0, 255, 0)); }
    50% { border-color: #FF2233; }
}

.overlay-hp-container.grove-on-fire .overlay-hp-fill {
    animation: overlayGroveHpFillFlash 0.4s ease-in-out infinite;
}

.overlay-hp-container.grove-on-fire .overlay-progress-bar {
    animation: overlayGroveHpBorderFlash 0.4s ease-in-out infinite;
}

.overlay-progress-text {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 1px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.6), 0 0 20px rgba(0,0,0,.6); /* Text shadow for readability */
    pointer-events: none; /* Allow clicks through to underlying elements */
}

/* Score row - text only, matches XP/town health font style (no progress bar) */
/* Align score value with left edge of progress bars above (icon area = 38px to match level hex / hp label) */
.overlay-row-score {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow: visible;
}
.overlay-row-score .overlay-label {
    min-width: 38px;
    width: 38px;
    flex-shrink: 0;
}
.overlay-score-value {
    color: #FFFFFF;
    font-size: 21px;
    letter-spacing:-1px;
    font-weight: bold;
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 10px black, 0 0 20px black;
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.overlay-score-value.is-compact {
    font-size: 15px;
    letter-spacing: -1px;
}

.overlay-star-score-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 4px;
}
.overlay-star-score {
    width: 42px;
    height: 42px;
    object-fit: contain;
    image-rendering: auto;
    display: block;
    pointer-events: none;
}
.overlay-star-score-value {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    margin-top:1px;
    font-size: 20px !important;
    font-weight: 800;
    font-family: "Exo 2", sans-serif;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, .8), 0 0 10px rgba(0, 0, 0, .5) !important;
    pointer-events: none;
    text-align: center;
    line-height: 1;
    letter-spacing: -0.4px;
    text-shadow: 0 0 2px rgba(255, 236, 170, 0.85);
}

/* Subtle dividers between overlay stat groups */
.overlay-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 4px 0;
    width: 100%;
}

/* Tooltip-enabled overlay rows - keep default cursor on hover */

/* Power-up List */
.powerup-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.powerup-list::-webkit-scrollbar {
    width: 6px;
}

.powerup-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.powerup-list::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.5);
    border-radius: 3px;
}

.powerup-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.7);
}

/* Toast Notification Styles — fixed to viewport + high z-index so toasts show above modals (main menu, etc.) */
.toast-notification-container {
    position: fixed;
    bottom: 70px;
    left: 176px; /* offset from left edge; clears Tower Status panel */
    z-index: 50000 !important;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
body.left-overlays-collapsed .toast-notification-container {
    left: 8px;
}

.toast-notification {
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
    z-index: 99999 !important;
    position: relative;
    overflow: hidden; /* Ensure blur layer doesn't overflow */
}

/* Blur layer behind the toast notification */
.toast-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border-radius: 8px;
    z-index: -1;
}

/* Border on the toast notification */
.toast-notification::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(200, 200, 200, 0.35);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}

/* Neutral / informational — gold */
.toast-notification.toast-tone-neutral {
    color: #fde68a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 18px rgba(234, 179, 8, 0.18);
}
.toast-notification.toast-tone-neutral::before {
    background: rgba(32, 28, 20, 0.82);
}
.toast-notification.toast-tone-neutral::after {
    border-color: rgba(250, 204, 21, 0.55);
}

/* Positive — green */
.toast-notification.toast-tone-positive {
    color: #bbf7d0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 18px rgba(52, 211, 153, 0.22);
}
.toast-notification.toast-tone-positive::before {
    background: rgba(20, 32, 26, 0.82);
}
.toast-notification.toast-tone-positive::after {
    border-color: rgba(52, 211, 153, 0.65);
}

/* Negative — red (subtle red wash on panel, readable text) */
.toast-notification.toast-tone-negative {
    color: #fecaca;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 18px rgba(248, 113, 113, 0.2);
}
.toast-notification.toast-tone-negative::before {
    background: rgba(36, 22, 24, 0.84);
}
.toast-notification.toast-tone-negative::after {
    border-color: rgba(248, 113, 113, 0.65);
}

/* Warning / attention — bright yellow (e.g. Burning Vault spawned) */
.toast-notification.toast-tone-warning {
    color: #fef08a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 20px rgba(250, 204, 21, 0.35);
}
.toast-notification.toast-tone-warning::before {
    background: rgba(38, 32, 10, 0.88);
}
.toast-notification.toast-tone-warning::after {
    border-color: rgba(250, 204, 21, 0.75);
}

/* Content wrapper - don't apply opacity here as toast has its own opacity transitions */
.toast-notification > * {
    position: relative;
    z-index: 2;
}

.toast-notification.toast-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-notification.toast-fading {
    opacity: 0;
    transform: translateY(-20px);
}

/* Minimap Container - pill above minimap, center-aligned, moved down to make room */
.minimap-container {
    position: absolute;
    top: 4px;
    right: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: 50;
    transition: transform 0.2s ease-in-out;
    cursor: var(--cursor-default);
}

/* Wave Group Name Pill - above minimap, white text on black (like boss/hero pills) */
.wave-group-name-pill {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    font-family: "Exo 2", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: none;
}

/* Wrapper for minimap + blur (both centered) */
.minimap-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    transform:translateY(-25px);
    pointer-events: auto;
    cursor: var(--cursor-default);
}

/* Minimap Styles */
.minimap-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    display: block;
    background: transparent;
    opacity: 1;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    z-index: 51;
    pointer-events: none;
}

/* Blur - centered within minimap wrapper */
.minimap-blur-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 170px;
    height: 148px;
    z-index: 50;
    pointer-events: none;
    /* PERF: was backdrop-filter: blur(20px) saturate(180%) — the blur re-ran on the
       GPU every time the canvas behind it repainted (i.e. every frame). A dark
       translucent tint keeps the minimap legible at a fixed one-time cost. */
    background: rgba(13, 18, 26, 0.72);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    overflow: hidden;
}

/* Map zoom: stacked + / − on the right of the minimap hex */
.minimap-zoom {
    position: absolute;
    right: -5px;
    top: -10px;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: auto;
    text-align:center;
    background:black;
    border-radius:16px;
    padding:8px 5px 12px;
    width:32px;
}

.minimap-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: var(--cursor-default);
    line-height: 0;
}

.minimap-zoom-btn img {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

.minimap-zoom-btn:hover:not(.is-disabled) img {
    filter: brightness(1.15);
}

.minimap-zoom-btn:active:not(.is-disabled) {
    transform: translateY(1px);
}

.minimap-zoom-btn.is-disabled {
    opacity: 0.35;
    cursor: var(--cursor-x) !important;
}

.minimap-zoom-label {
    color: #ffffff;
    font-size: 8px;
    text-transform:uppercase;
    font-family: "Exo 2", sans-serif;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    margin-bottom:5px;
    margin-top:4px;
}

.minimap-zoom-value {
    margin-top: 2px;
    color: #FFD700;
    font-size: 9px;
    font-family: "Exo 2", sans-serif;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

/* Tooltip Styles - match modal pattern exactly */
#game-tooltip {
    position: fixed !important; /* Fixed positioning to appear above sidebar (which is also fixed) */
    overflow: hidden; /* Ensure blur layer doesn't overflow */
    background: transparent; /* Transparent - blur is in ::before */
    border: none; /* Border is in ::after */
    max-width: 320px;
    text-wrap: pretty;
    /* Ensure tooltip is above canvas and sidebar (sidebar z-index: 100) */
    z-index: 99999 !important;
}

#game-tooltip.game-tooltip--hero-portrait {
    z-index: 250000 !important;
}

/* Blur layer behind the tooltip - same pattern as modals */
#game-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 18, 26, 0.6); /* Darkened background color (COLOR_BACKGROUND #101620 darkened by 20%) */
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    border-radius: 8px;
    z-index: -1; /* Behind content but can still blur what's behind the tooltip */
    /* Force hardware acceleration for blur */
    transform: translateZ(0);
    will-change: backdrop-filter;
}

/* Border on the tooltip itself */
#game-tooltip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(40, 55, 85, 0.6); /* Match overlay panel border color */
    border-radius: 8px;
    pointer-events: none;
    z-index: 1; /* Above the blur layer */
}

/* Content wrapper - ensure content is above blur and border */
#game-tooltip > * {
    position: relative;
    z-index: 2; /* Above border */
    opacity: 1; /* 85% opacity for content */
    text-wrap: pretty;
}

#game-tooltip,
#game-tooltip div:not(.game-tooltip-blackfyre-stats-row) {
    text-wrap: pretty;
    orphans: 2;
    widows: 2;
}

#game-tooltip .game-tooltip-body,
#game-tooltip .game-tooltip-header-line,
#game-tooltip .game-tooltip-power-line {
    hyphens: auto;
}

/* Blackfyre spawner: stats row stays on one line (tooltip widened in JS) */
#game-tooltip .game-tooltip-blackfyre-stats-row {
    flex-wrap: nowrap;
    align-items: center;
}

/* Map tooltip HP row: [heart] [bar] current / max */
.tooltip-health-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 5px;
    align-items: center;
    min-width: 0;
    width: 100%;
    color: #fff;
    line-height: 1.2;
}

.tooltip-health-row__icon {
    grid-column: 1;
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
}

.tooltip-health-row__bar-group {
    grid-column: 2;
    display: grid;
    /* Bar flexes; count column always sizes to the full "current / max" string */
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 6px;
    align-items: center;
    min-width: 0;
}

.tooltip-health-row__track {
    width: 100%;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    overflow: hidden;
}

.tooltip-health-row__fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: 2px;
}

.tooltip-health-row__text {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: left;
    flex-shrink: 0;
}

.tooltip-hp-stack {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 5px;
    row-gap: 2px;
    width: 100%;
}

.tooltip-hp-stack > .tooltip-health-row {
    display: contents;
}

.tooltip-health-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tooltip-health-meta-row .tooltip-health-row {
    flex: 1 1 140px;
    width: auto;
}

.tooltip-health-row--spaced {
    margin-bottom: 8px;
}

.tooltip-shield-row__fill {
    background: #ff30cf;
}

.tooltip-shield-row__text {
    color: #ff30cf;
}

/* Wave Countdown Timer Styles */
.wave-countdown-container {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 99999 !important;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wave-countdown-container * {
    pointer-events: auto;
}

.clear-all-items-btn {
    color: #fff;
    margin-left: -10px;
}

.clear-all-items-btn .clear-all-items-icon {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.5em;
    image-rendering: crisp-edges;
}

.clear-all-items-btn:active {
    transform: translateY(0);
}

.clear-items-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
}

.clear-items-picker-panel {
    position: fixed;
    pointer-events: auto;
    min-width: 168px;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: rgba(12, 18, 36, 0.94);
    border: 2px solid rgba(255, 215, 0, 0.55);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    cursor: var(--cursor-default);
}

.clear-items-picker-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.clear-items-picker-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clear-items-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: var(--cursor-default);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.clear-items-picker-btn:hover:not(:disabled) {
    background: rgba(255, 196, 29, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
    color: #fff;
}

.clear-items-picker-btn:disabled {
    opacity: 0.38;
    cursor: default;
}

.wave-countdown-display {
    font-size: 120px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(76, 175, 80, 0.6);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 1;
    user-select: none;
}

.wave-countdown-display.countdown-visible {
    opacity: 1;
    transform: scale(1);
}

.wave-countdown-display.countdown-fade {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth fade out transition */
}

/* Countdown Arrow Styles */
.countdown-arrow {
    position: absolute;
    width: 400px; /* Double the size (was 200px) */
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateX(-30px);
    opacity: 0;
    z-index: -1; /* Behind the text */
    pointer-events: none;
    user-select: none;
}

.countdown-arrow.countdown-arrow-visible {
    opacity: 1;
    animation: countdown-arrow-slide-continuous 1.8s linear; /* Much slower, more gradual rightward movement */
}

.countdown-arrow.countdown-arrow-fade {
    opacity: 0;
    animation: countdown-arrow-slide-continuous 1.8s linear, countdown-arrow-fade-out 0.3s ease-out forwards;
    transition: opacity 0.3s ease-out; /* Smooth fade out transition */
}

@keyframes countdown-arrow-slide-continuous {
    from {
        transform: translate(-50%, -50%) translateX(-30px);
    }
    to {
        transform: translate(-50%, -50%) translateX(100px); /* Continue shifting right throughout display */
    }
}

@keyframes countdown-arrow-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Save Game modal: title + fixed Close; only .save-slots-scroll scrolls */
#saveGameModal .save-game-modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#saveGameModal .save-game-modal-content::after {
    display: none;
}

#saveGameModal .save-game-modal-title {
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* Flex + min-height on wrapper so ::after gradient is anchored to the visible list viewport */
#saveGameModal .save-slots-scroll-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Fade at bottom of list (scroll hint); same colors as .modal-frame-9patch .modal-frame-content::after */
#saveGameModal .save-slots-scroll-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    background: linear-gradient(to bottom, transparent 0%, #071025 100%);
    pointer-events: none;
    z-index: 2;
}

#saveGameModal .save-slots-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 45, 75, 0.8) rgba(22, 33, 62, 0.3);
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

#saveGameModal .save-slots-scroll::-webkit-scrollbar {
    width: 10px;
}

#saveGameModal .save-slots-scroll::-webkit-scrollbar-track {
    background: rgba(22, 33, 62, 0.3);
    border-radius: 5px;
}

#saveGameModal .save-slots-scroll::-webkit-scrollbar-thumb {
    background: rgba(34, 45, 75, 0.8);
    border-radius: 5px;
    border: 1px solid rgba(22, 33, 62, 0.5);
}

#saveGameModal .save-slots-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(40, 52, 85, 0.9);
}

#saveGameModal .save-game-modal-footer {
    flex-shrink: 0;
    margin-top: 12px;
    padding-top: 4px;
    width: 100%;
    box-sizing: border-box;
}

#saveGameModal .save-slots-container {
    margin: 0;
}

/* Load modal + default: slot list margins (Save modal overrides above) */
.save-slots-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.save-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid #2a2a4a;
    border-radius: 8px;
    transition: all 0.3s;
    min-width: 0; /* Allow flex items to shrink below content size if needed */
    overflow: visible; /* Allow buttons to be visible */
    width: 100%; /* Ensure full width is available */
    box-sizing: border-box; /* Include padding in width calculation */
    gap: 20px; /* Add gap between info and actions instead of margin */
    min-height: 44px;
}

.save-slot:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4CAF50;
}

.save-slot-info {
    flex: 1 1 0%; /* Can grow and shrink, start from 0% to allow actions priority */
    min-width: 0; /* Allow flex item to shrink below content size */
    overflow: hidden; /* Prevent text from overflowing */
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
}

.save-slot-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.save-slot-details {
    color: #ffffff;
    font-size: 12px;
}

.save-slot-level {
    color: #FCD619;
}

.save-slot-currency {
    color: #80FF22;
}

.save-slot-actions {
    display: flex;
    flex-shrink: 0 !important; /* Never shrink the actions container - use !important to override any conflicting rules */
    flex-grow: 0; /* Don't grow the actions container */
    flex-basis: auto; /* Base size on content */
    flex-wrap: nowrap; /* Prevent buttons from wrapping */
    align-items: center;
    width: auto; /* Let width be determined by content */
}

.save-slot-btn {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap; /* Prevent text from wrapping */
    min-width: 84px; /* Minimum width to accommodate endcaps (28px each) + icon */
    width: 84px; /* Fixed width for icon buttons with endcaps */
    height: 66px; /* Match cta-button height */
    flex-shrink: 0; /* Prevent button from shrinking */
    flex-grow: 0; /* Don't grow the button */
    box-sizing: border-box; /* Include padding in width calculation */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Ensure icons aren't clipped */
    /* Padding is handled by .cta-button (28px left/right) */
}

.save-slot-icon {
    width: 28px; /* Icon size that fits within button content area */
    height: 28px; /* Icon size that fits within button content area */
    image-rendering: crisp-edges;
    object-fit: contain;
    display: block;
}


.save-success-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 24px;
    background: rgba(76, 175, 80, 0.9);
    border: 2px solid #4CAF50;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    z-index: 2000;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Auto-saving Indicator */
.auto-saving-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    transform: translateY(-100px);
    padding: 12px 24px;
    background: rgba(33, 150, 243, 0.9);
    border: 2px solid #2196F3;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    z-index: 1500;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.auto-saving-indicator.active {
    opacity: 1;
    transform: translateY(0);
}

.auto-saving-indicator .auto-saving-icon {
    height: 2em;
    width: auto;
    vertical-align: middle;
    margin-right: 6px;
}

/* Story Screen */
.story-screen {
    background: rgba(0, 0, 0, 1);
    z-index: 2000;
    padding: 0;
}

.story-screen-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-default);
}

/* Same motion as gameModalContentFadeIn/Out, composed with panel centering transform */
@keyframes storyPanelFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 14px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes storyPanelFadeOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 14px));
    }
}

.story-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    min-height: 600px;
    max-height: calc(100vh - 40px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.story-panel.story-panel-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.story-panel.story-panel-fade-in {
    display: flex;
    z-index: 2;
    animation: storyPanelFadeIn 0.338s ease-out forwards;
    pointer-events: auto;
}

.story-panel.story-panel-fade-out {
    display: flex;
    z-index: 1;
    animation: storyPanelFadeOut 0.263s ease-in forwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .story-panel.story-panel-fade-in,
    .story-panel.story-panel-fade-out {
        animation: none;
    }
}

.story-panel-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    align-items: center;
    width: 100%;
    min-height: 100%;
}

/* Left column: text (visually reordered) - no 9patch frame, content over overlay like placement/complete */
.story-text-frame.modal-frame-9patch {
    order: 1;
    min-width: 0;
    max-height: none;
    margin: 0;
    align-self: stretch;
    min-height: 400px;
    /* Remove 9patch frame so content displays over background overlay mask */
    background: none !important;
    background-image: none !important;
    background-size: unset !important;
    background-position: unset !important;
    background-repeat: unset !important;
    background-origin: initial !important;
    padding: 0 !important;
}

.story-text-frame .modal-frame-content {
    background: transparent !important;
}

.story-text-frame .modal-frame-content::after {
    display: none; /* no gradient mask when no frame */
}

/* Right column: frame-boss-info.png with aspect ratio 601×677 (keep pulsing graphic frame) */
.story-image {
    order: 2;
    width: 100%;
    aspect-ratio: 601 / 677;
    background-image: url('assets/images/ui/frame-boss-info.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    box-sizing: border-box;
}

.story-icon {
    width: 12rem;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    animation: storyIconPulse 2s ease-in-out infinite;
    image-rendering: crisp-edges;
}

/* Story panel 2: spawner (top-right) + level-2 vortex (bottom-left), overlapping diagonally */
#storyPanel2 .story-image-threats {
    position: relative;
    display: block;
    overflow: visible;
}

#storyPanel2 .story-spawner-wrap {
    position: absolute;
    top: 20%;
    right: 18%;
    width: 9.1125rem; /* 10.125rem − 10% */
    max-width: 36%;
    aspect-ratio: 1;
    z-index: 1;
    transform-origin: center center;
    /* Scale-only pulse so canvas FX keeps additive blending (filter would flatten it) */
    animation: storyVortexWrapPulse 2s ease-in-out infinite;
}

#storyPanel2 .story-spawner-fx {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 280%;
    height: 280%;
    pointer-events: none;
    z-index: 2;
}

#storyPanel2 .story-spawner-icon {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    margin: 0;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    animation: storyVortexIconGlow 2s ease-in-out infinite;
}

#storyPanel2 .story-vortex-wrap {
    position: absolute;
    bottom: 18%;
    left: 16%;
    width: 9.1125rem; /* 10.125rem − 10% */
    max-width: 36%;
    aspect-ratio: 1;
    z-index: 2;
    transform-origin: center center;
    /* Scale-only pulse so canvas FX keeps additive blending (filter would flatten it) */
    animation: storyVortexWrapPulse 2s ease-in-out infinite;
}

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

#storyPanel2 .story-vortex-fx {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 280%;
    height: 280%;
    pointer-events: none;
    z-index: 2;
}

#storyPanel2 .story-vortex-icon {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    image-rendering: crisp-edges;
    transform-origin: center center;
    filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    /* Level 2 Fire Whirlwind: 0.412 rev/s → ~2.427s per revolution */
    animation: placementVortexSpin var(--vortex-spin-duration, 2.427s) linear infinite,
               storyVortexIconGlow 2s ease-in-out infinite;
}

@keyframes storyVortexIconGlow {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6)); }
    50% { filter: drop-shadow(0 0 50px rgba(255, 107, 53, 0.8)); }
}

/* Story panel 3: five tower icons in two columns (3 left, 2 right) with overlap */
.story-towers-stagger .story-towers-stagger-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
}

.story-towers-stagger .story-towers-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.story-tower-icon {
    height: 6rem;
    width: auto;
    object-fit: contain;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.4));
    margin-bottom: 1rem; /* overlap each row a bit */
}

.story-towers-stagger .story-towers-col .story-tower-icon:last-child,
.story-towers-stagger .story-towers-col .story-tower-spin-wrap:last-child,
.story-towers-stagger .story-towers-col .story-bomb-cycle:last-child {
    margin-bottom: 0;
}

/* Rain / pulsing: map-style continuous spin (base +25%, then +20% more) */
.story-tower-spin-wrap {
    position: relative;
    width: 7.2rem;
    height: 7.2rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.story-tower-spin-wrap--large {
    width: 9rem;
    height: 9rem;
}

.story-tower-spin-pivot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    animation: turretRotatePivot 8s linear infinite;
}

/* Jet / spread / bomber: 6 hex facings with a short ease-in-out between each */
.story-tower-snap-pivot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    animation: storyTowerHexEase 4.8s ease-in-out infinite;
}

.story-tower-icon--spin {
    position: absolute;
    height: 9rem;
    width: 9rem;
    left: -4.5rem;
    top: -4.5rem;
    margin-bottom: 0;
    object-fit: contain;
}

.story-tower-icon--snap {
    position: absolute;
    height: 7.2rem;
    width: 7.2rem;
    left: -3.6rem;
    top: -3.6rem;
    margin-bottom: 0;
    object-fit: contain;
}

.story-tower-icon--snap-large {
    height: 9rem;
    width: 9rem;
    left: -4.5rem;
    top: -4.5rem;
}

.story-bomb-cycle {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    transform: translateX(8px);
}

.story-bomb-cycle .story-tower-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    object-fit: contain;
    opacity: 0;
    animation: storyBombLevelFade 3.2s ease-in-out infinite;
}

.story-bomb-cycle .story-tower-icon:nth-child(1) { animation-delay: 0s; }
.story-bomb-cycle .story-tower-icon:nth-child(2) { animation-delay: -2.4s; }
.story-bomb-cycle .story-tower-icon:nth-child(3) { animation-delay: -1.6s; }
.story-bomb-cycle .story-tower-icon:nth-child(4) { animation-delay: -0.8s; }

/* Story panel 4: mystery / dungeon / power-up orbit */
#storyPanel4 .story-image-collectibles {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.story-collectibles-orbit {
    position: relative;
    width: min(85%, 20rem);
    aspect-ratio: 1;
    margin: 0 auto;
    animation: storyCollectiblesOrbitSpin 28s linear infinite;
}

.story-orbit-planet {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    /* Equilateral triangle vertices; undo arm angle so content starts upright */
    transform: rotate(var(--a, 0deg)) translate(0, -6.75rem) rotate(calc(var(--a, 0deg) * -1));
}

.story-orbit-counter {
    position: relative;
    width: 5.75rem;
    height: 5.75rem;
    transform: translate(-50%, -50%);
    animation: storyCollectiblesOrbitCounter 28s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-collectible-fx {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 240%;
    height: 240%;
    pointer-events: none;
    z-index: 0;
}

/* Dungeon smoulder draws over the door sprite (map: drawSmoulderSparks after entrances) */
.story-collectible-fx--over {
    z-index: 2;
    width: 280%;
    height: 280%;
}

.story-collectible-icon {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.35));
}

/* Match map scale: power-ups draw smaller than mystery boxes (~hex × 1.02 vs × 1.6) */
.story-collectible-icon--powerup {
    width: 64%;
    height: auto;
}

/* Dungeon map size ~hex × 1.26 vs mystery × 1.6 */
.story-collectible-icon--dungeon {
    width: 78%;
    height: auto;
}

/* Artifacts are close to mystery/tank scale on the map */
.story-collectible-icon--artifact {
    width: 88%;
    height: auto;
}

@keyframes storyCollectiblesOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes storyCollectiblesOrbitCounter {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .story-collectibles-orbit,
    .story-orbit-counter,
    .story-tower-spin-pivot,
    .story-tower-snap-pivot,
    .story-bomb-cycle .story-tower-icon {
        animation: none;
    }

    .story-bomb-cycle .story-tower-icon:first-child {
        opacity: 1;
    }
}

/* Arrow icon in story panel Next/Back buttons */
.story-arrow-icon {
    height: 0.9em;
    width: auto;
    vertical-align: middle;
    image-rendering: crisp-edges;
    margin-left: 0.5em;
    margin-right: 0.5em;
    transform: translateY(3px);
}

.story-arrow-back {
    transform: scaleX(-1) translateY(3px);
}

/* Story panel: use text-* classes for styled text (see text effects section above) */

@keyframes turretRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Rain/pulsing inventory spin: rotate the pivot wrapper, not the img box */
@keyframes turretRotatePivot {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hold each hex facing, then ease ~250ms into the next (clockwise) */
@keyframes storyTowerHexEase {
  0%, 11.5% { transform: rotate(0deg); }
  16.666%, 28.166% { transform: rotate(60deg); }
  33.333%, 44.833% { transform: rotate(120deg); }
  50%, 61.5% { transform: rotate(180deg); }
  66.666%, 78.166% { transform: rotate(240deg); }
  83.333%, 94.833% { transform: rotate(300deg); }
  100% { transform: rotate(360deg); }
}

@keyframes storyBombLevelFade {
  0% { opacity: 1; }
  18.75% { opacity: 1; }
  25% { opacity: 0; }
  93.75% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes towerHexSnapRotate {
  0% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  16.66% {
    transform: translate(-50%, -50%) rotate(150deg);
  }
  33.33% {
    transform: translate(-50%, -50%) rotate(210deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
  66.66% {
    transform: translate(-50%, -50%) rotate(330deg);
  }
  83.33% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* Helper class for rotatable tower turrets - rotation center at base center */
.tower-turret-rotatable {
  transform-origin: center center;
}

@keyframes storyIconPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 50px rgba(255, 107, 53, 0.8));
    }
}

@keyframes storyIconPulseGreen {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 30px rgba(0, 255, 0, 0.8));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 50px rgba(0, 255, 0, 1));
    }
}

#storyPanel1 .story-icon {
    animation: storyIconPulseGreen 2s ease-in-out infinite;
}

#storyPanel5 .story-icon {
    width: 18.75rem; /* 25% larger than 15rem */
}

.story-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #fff;
    padding: 40px;
    min-height: 100%;
    align-items: flex-start;
    text-align: left;
}

.story-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    flex-shrink: 0;
}

#storyPanel1 .story-nav-buttons {
    justify-content: flex-end; /* Single Next button on the right */
}

.story-back-btn {
    color: #fff;
    width: auto;
    gap: 0.6em; /* space between arrow and "Back" text; parent .cta-button is already flex */
}

.story-start-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.story-next-btn {
    /* padding-left and padding-right come from .cta-button (28px each) */
    /* font-size, font-weight, letter-spacing, and text-transform come from .cta-button */
    /* Don't override - let .cta-button handle it */
    color: #fff;
    flex-shrink: 0;
    width: auto; /* Auto width based on content, respecting .cta-button padding */
}

/* Tutorial buttons container - bottom right, fixed position; right value updated by JS based on sidebar state */
.tutorial-buttons-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: right 0.3s ease;
}

.tutorial-buttons-container .exit-tutorial-btn {
    transition: filter 0.2s ease, transform 0.08s ease-out;
}

/* Tutorial centered bubble - intro step and final step (shifted up 200px so they don't cover the grove) */
.tutorial-centered-bubble {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 200px));
    z-index: 2147483647; /* Highest - always on top */
    display: flex;
    justify-content: center;
    align-items: center;
}

.tutorial-centered-bubble-inner {
    background: #fff;
    color: #000;
    padding: 28px 32px;
    border-radius: 12px;
    max-width: min(360px, calc(100vw - 20px));
    font-size: 20px;
    font-weight: 400;
    font-family: "Exo 2", sans-serif;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.8);
}

.tutorial-centered-bubble-text {
    margin: 0 0 20px 0;
}

.tutorial-continue-btn {
    display: block;
    margin: 0;
    flex-shrink: 0;
    color: #fff !important;
}

.tutorial-step-indicator {
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 12px;
    letter-spacing: 0.5px;
}

.tutorial-step-indicator-in-bubble {
    margin-top: 0;
    margin-bottom: 0;
}

/* Footer row: step counter on left, button on right (when button is present) */
.tutorial-bubble-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    width: 100%;
    gap: 16px;
}
.tutorial-bubble-footer .tutorial-step-indicator {
    margin-top: 0;
    margin-bottom: 0;
}

/* Tutorial arrow - points at current step target (animation on icon only) */
.tutorial-arrow {
    position: fixed;
    z-index: 2147483647; /* Highest - always on top */
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Default: arrow from left, pointing right. [bubble] [arrow] -> target (arrow between bubble and target) */
.tutorial-arrow {
    transform: translate(-100%, -50%);
    flex-direction: row;
}

/* Arrow from right: [target] [arrow] [bubble] */
.tutorial-arrow.tutorial-arrow-from-right {
    transform: translate(0, -50%);
    flex-direction: row-reverse;
}

/* Arrow from top: [bubble above] [arrow below] -> target (arrow under bubble) */
.tutorial-arrow.tutorial-arrow-from-top {
    transform: translate(-50%, -100%);
    flex-direction: column-reverse;
}
.tutorial-arrow.tutorial-arrow-from-top .tutorial-speech-bubble {
    order: 2; /* Bubble on top */
}
.tutorial-arrow.tutorial-arrow-from-top .tutorial-arrow-wrapper {
    order: 1; /* Arrow below bubble, pointing down at target */
}

/* Arrow from bottom: [target] [arrow above] [bubble below] */
.tutorial-arrow.tutorial-arrow-from-bottom {
    transform: translate(-50%, 0);
    flex-direction: column;
}

/* Step 9 part 2: bubble below the arrow (arrow points up at tower, bubble below for "rotate" instruction) */
.tutorial-arrow.tutorial-bubble-below-arrow.tutorial-arrow-from-bottom .tutorial-speech-bubble {
    order: 2; /* Bubble below */
}
.tutorial-arrow.tutorial-bubble-below-arrow.tutorial-arrow-from-bottom .tutorial-arrow-wrapper {
    order: 1; /* Arrow above bubble, pointing up at target */
}
/* Bubble tail points up toward the arrow when bubble is below */
.tutorial-arrow.tutorial-bubble-below-arrow.tutorial-arrow-from-bottom .tutorial-speech-bubble::after {
    top: -20px;
    bottom: auto;
    left: 50%;
    right: auto;
    margin: 0 0 0 -20px;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}

/* Tutorial speech bubble - instructions for current step (no animation) */
.tutorial-speech-bubble-btn {
    display: block;
    margin: 0;
    flex-shrink: 0;
    color: #fff !important;
    pointer-events: auto; /* Clickable when visible; parent bubble has pointer-events: none for scroll passthrough */
}

.tutorial-speech-bubble {
    background: #fff;
    color: #000;
    padding: 14px 18px 20px 22px; /* 20px bottom so step indicator (e.g. STEP 10/11) isn't cut off by tail */
    border-radius: 12px;
    overflow: visible; /* Tail ::after extends outside; ensure step indicator isn't clipped */
    pointer-events: none; /* Allow wheel/scroll to pass through to canvas; button has pointer-events: auto */
    min-width: 220px;
    max-width: 350px;
    font-size: 19px;
    font-weight: 400;
    font-family: "Exo 2", sans-serif;
    line-height: 1.35;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.8);
    position: relative;
    flex-shrink: 0;
}

/* Bubble connector tail - points toward arrow. Default: bubble left of arrow, tail on right */
.tutorial-speech-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -20px;
    border: 20px solid transparent;
    border-left-color: #fff;
}

.tutorial-arrow.tutorial-arrow-from-right .tutorial-speech-bubble::after {
    right: auto;
    left: -20px;
    margin-top: -20px;
    border-left-color: transparent;
    border-right-color: #fff;
}

/* From top: bubble above arrow, tail points down */
.tutorial-arrow.tutorial-arrow-from-top .tutorial-speech-bubble::after {
    top: auto;
    bottom: -20px;
    left: 50%;
    right: auto;
    margin-left: -20px;
    margin-top: 0;
    border: 20px solid transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: #fff;
}

/* From bottom: bubble below arrow, tail points up */
.tutorial-arrow.tutorial-arrow-from-bottom .tutorial-speech-bubble::after {
    top: -20px;
    bottom: auto;
    left: 50%;
    right: auto;
    margin-left: -20px;
    margin-top: 0;
    border: 20px solid transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #fff;
}

/* Wrapper for arrow - pulse animation (toward target) */
.tutorial-arrow-wrapper {
    flex-shrink: 0;
    animation: tutorial-arrow-pulse-left 1.2s ease-in-out infinite;
}

.tutorial-arrow.tutorial-arrow-from-right .tutorial-arrow-wrapper {
    animation: tutorial-arrow-pulse-right 1.2s ease-in-out infinite;
}

.tutorial-arrow.tutorial-arrow-from-top .tutorial-arrow-wrapper {
    animation: tutorial-arrow-pulse-top 1.2s ease-in-out infinite;
}

.tutorial-arrow.tutorial-arrow-from-bottom .tutorial-arrow-wrapper {
    animation: tutorial-arrow-pulse-bottom 1.2s ease-in-out infinite;
}

@keyframes tutorial-arrow-pulse-left {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(12px); opacity: 0.85; }
}

@keyframes tutorial-arrow-pulse-right {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-12px); opacity: 0.85; }
}

@keyframes tutorial-arrow-pulse-top {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(12px); opacity: 0.85; }
}

@keyframes tutorial-arrow-pulse-bottom {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-12px); opacity: 0.85; }
}

/* Icon points down by default - rotate to point at target */
.tutorial-arrow .tutorial-arrow-icon {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transform: rotate(-90deg); /* down -> right (arrow from left) */
}

.tutorial-arrow.tutorial-arrow-from-right .tutorial-arrow-icon {
    transform: rotate(90deg); /* down -> left (arrow from right) */
}

.tutorial-arrow.tutorial-arrow-from-top .tutorial-arrow-icon {
    transform: rotate(0deg); /* points down */
}

.tutorial-arrow.tutorial-arrow-from-bottom .tutorial-arrow-icon {
    transform: rotate(180deg); /* points up */
}

/* Hex indicator: arrow only by default - points at placement hex */
.tutorial-hex-indicator .tutorial-speech-bubble {
    display: none !important;
}
/* Step 9 part 2: show bubble below arrow (same arrow position as part 1) */
.tutorial-hex-indicator.tutorial-hex-indicator-with-bubble .tutorial-hex-indicator-bubble {
    display: block !important;
}
.tutorial-hex-indicator.tutorial-hex-indicator-with-bubble {
    flex-direction: column; /* arrow on top, bubble below */
}
.tutorial-hex-indicator.tutorial-hex-indicator-with-bubble .tutorial-arrow-wrapper {
    order: 1;
}
.tutorial-hex-indicator.tutorial-hex-indicator-with-bubble .tutorial-hex-indicator-bubble {
    order: 2;
}
.tutorial-hex-indicator.tutorial-hex-indicator-with-bubble .tutorial-hex-indicator-bubble::after {
    top: -20px;
    bottom: auto;
    left: 50%;
    right: auto;
    margin: 0 0 0 -20px;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}

.tutorial-start-over-btn {
    width: auto !important;
    min-width: 120px;
    color: #fff !important;
    margin-right:-15px;
}
.tutorial-start-over-btn .tutorial-start-over-icon {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: contain;
}

/* Exit tutorial button */
.exit-tutorial-btn {
    width: auto !important;
    min-width: 140px;
    color: #fff !important;
}

.exit-tutorial-btn .exit-tutorial-icon {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: contain;
}

.story-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #FF6B35;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

#storyPanel1 .story-title {
    font-size: 75px;
    letter-spacing: 5px;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 107, 53, 1);
}

#storyPanel1 .story-title .hexfire-logo-icon {
    height: 1.7em;
}

.hexfire-logo-icon {
    height: 1.7em;
    width: auto;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.story-panel .story-text h2.story-panel-header {
    font-size: 2rem;
    font-weight: 700;
    color: #FF6B35;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left !important;
    transform: none !important;
    width: 100% !important;
    display: block !important;
    align-self: stretch !important;
}

.story-paragraph {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin: 0;
}

.story-paragraph strong {
    color: #4CAF50;
    font-weight: bold;
}

.story-skip-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    /* padding-left and padding-right come from .cta-button (28px each) */
    /* font-size, font-weight, letter-spacing, and text-transform come from .cta-button */
    /* Don't override - let .cta-button handle it */
    color: #fff;
    z-index: 10;
    width: auto; /* Auto width based on content, respecting .cta-button padding */
    min-width: 100px; /* Maintain minimum width for consistent appearance */
}

.level-up-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.level-up-actions .level-up-action-btn {
    width: auto !important;
    flex: 0 0 auto;
    flex-shrink: 0;
    height: 66px;
    min-height: 66px;
    white-space: nowrap;
}

/* Placement Phase Modal Styles */
.placement-header-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 5px!important;
}

/* Wave group name pill in placement modal - matches minimap pill but 2x font size */
/* Boss defeat graphic - wave group complete modal, bottom right */
.boss-defeat-graphic-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}

.boss-defeat-image-wrapper {
    width: 462px;
    min-height: 330px;
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.boss-defeat-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    transform: scaleX(-1);
}

.boss-defeat-speech-bubble {
    margin-bottom: 8px;
    min-width: 0;
    max-width: 340px;
    transform: translateY(-100px);
}

/* Boss name/title pill - matches in-game map boss label (frame-nameplate-boss.png) */
.boss-defeat-pill {
    position: absolute;
    bottom: 12px;
    right: 12px;
    left: auto;
    box-sizing: border-box;
    width: max-content;
    aspect-ratio: 398 / 186;
    padding: 16px 44px;
    background: transparent url('assets/images/ui/frame-nameplate-boss.png') center / 100% 100% no-repeat;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    z-index: 2;
}

.boss-defeat-pill-name {
    color: #FFFFFF;
    font-size: 19px;
    font-weight: bold;
    font-family: "Exo 2", sans-serif;
    line-height: 1.2;
    text-transform: uppercase;
}

.boss-defeat-pill-title {
    color: #FFFFFF;
    font-size: 12px;
    font-family: "Exo 2", sans-serif;
    line-height: 1.2;
}

.placement-wave-group-pill {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    font-family: "Exo 2", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.placement-boss-header-label {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 10;
    pointer-events: none;
}

.placement-boss-header-icon {
    width: 42px;
    height: 42px;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.placement-boss-header-text {
    color: #FF0000;
    font-size: 32px;
    font-weight: 300;
    font-family: "Exo 2", sans-serif;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}

.placement-title {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-align: center;
}

.placement-instructions {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto 18px auto;
    text-align: center;
    max-width:500px;
}

.placement-content-layout {
    display: flex;
    margin-bottom: 15px;
    justify-content: center;
}

.placement-content-boss {
    /* Two-column layout for boss waves */
    align-items: flex-end;
}

.placement-content-centered {
    justify-content: center;
}

.placement-left-column {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.placement-right-column {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
}

.placement-center-column {
    flex: 0 1 auto;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.placement-center-column:has(.placement-new-fire-type-row) {
    max-width: min(720px, 96vw);
}

/* Boss Section */
.placement-boss-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.placement-boss-frame {
    position: relative;
    width: 320px;
    height: 320px;
    background-image: url('assets/images/ui/frame-boss.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 2;
}

.placement-boss-image {
    max-width: 85%;
    max-height: 85%;
    width: auto;
    height: auto;
    image-rendering: crisp-edges;
    object-fit: contain;
    position: relative;
    z-index: 3;
}

.placement-boss-info-frame {
    /* Match frame-boss-info.png aspect ratio exactly (601×677) */
    width: 270px;
    aspect-ratio: 601 / 677;
    background-image: url('assets/images/ui/frame-boss-info.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 30px 20px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    margin-top: -128px;
    z-index: 1;
}

.placement-boss-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.placement-boss-icon {
    width: 52px;
    height: 52px;
    image-rendering: crisp-edges;
    flex-shrink: 0;
    margin-top:-6px;
}

.placement-boss-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.placement-boss-label {
    color: #FF0000;
    font-size: 14px;
    font-weight: 300;
    line-height: 14px;
}

.placement-boss-power-label {
    color: #E2E09B;
    font-size: 14px;
    font-weight: 300;
    line-height: 14px;
    margin-top:-3px;
}

.placement-boss-ability:first-child {
    margin-top: 2px;
}

.placement-boss-name {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-transform: uppercase;
}

.placement-boss-title {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.placement-boss-power {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-transform: uppercase;
}

.placement-boss-description {
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* New Item Section */
.placement-new-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.placement-new-item-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.placement-new-item-label {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.placement-divider {
    width: 100%;
    max-width: 250px;
    height: auto;
    image-rendering: crisp-edges;
}

.placement-new-items-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    flex-wrap: nowrap;
}

/* Scenario placement: starting currency line */
.placement-scenario-currency {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #FFFFFF;
}
.placement-scenario-currency-icon {
    width: 28px;
    height: auto;
    image-rendering: crisp-edges;
}
.placement-scenario-currency-amount {
    color: #00FF88;
    font-weight: bold;
}

/* Scenario placement: inventory items in grid (match side panel inventory exactly) */
.placement-scenario-inventory {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    width: 280px; /* Match side panel inventory tab content width */
    margin: 0 auto;
}
.placement-scenario-inventory .inventory-item {
    min-width: 0; /* Allow flex/grid shrinking */
}
.placement-scenario-inventory .inventory-item.tower {
    padding-top: 43px;
}

.placement-new-item-frame {
    background-image: url('assets/images/ui/frame-new-item.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 297px;
    height: 166.5px;
    box-sizing: border-box;
}

/* Placement / unlock modals: smooth downscale for high-res item & power-up art (matches map canvas). */
.placement-new-item-icon {
    width: 60px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

/*
 * Gift of the Grove — slow golden shimmer aura (CSS).
 * Inspired by conic-gradient glow / rotating light-border techniques (CodePen / DoCode style):
 * a blurred spinning gold conic behind the sprite + a softer pulsing outer bloom.
 */
@property --gift-shimmer-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.gift-grove-shimmer {
    --gift-shimmer-angle: 0deg;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    flex-shrink: 0;
    z-index: 0;
}

.gift-grove-shimmer > img {
    position: relative;
    z-index: 1;
    display: block;
}

/* Soft outer gold bloom (pulses slowly) — +15% reach; +25% brighter */
.gift-grove-shimmer::before {
    content: '';
    position: absolute;
    inset: -33.35%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 241, 176, 1) 0%,
        rgba(255, 214, 116, 0.78) 36%,
        rgba(255, 191, 94, 0.38) 58%,
        rgba(255, 169, 79, 0) 78%
    );
    filter: blur(7px);
    animation: giftGroveBloomPulse 3.8s ease-in-out infinite;
    pointer-events: none;
}

/* Spinning bright-gold shimmer rays behind the graphic (−25% spin speed; +25% brighter) */
.gift-grove-shimmer::after {
    content: '';
    position: absolute;
    inset: -28.75%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(
        from var(--gift-shimmer-angle),
        transparent 0deg,
        rgba(255, 248, 199, 0.15) 18deg,
        rgba(255, 236, 154, 1) 38deg,
        rgba(255, 214, 105, 0.69) 68deg,
        transparent 115deg,
        transparent 175deg,
        rgba(255, 244, 184, 1) 205deg,
        rgba(255, 221, 116, 0.5) 245deg,
        transparent 295deg,
        transparent 360deg
    );
    filter: blur(9px);
    opacity: 1;
    animation:
        giftGroveShimmerSpin 24s linear infinite,
        giftGroveShimmerBreathe 4.2s ease-in-out infinite;
    pointer-events: none;
}

.gift-grove-shimmer--tooltip {
    width: 48px;
    height: 48px;
}

/* Tooltips: icon only — map tiles keep the bloom/shimmer */
.gift-grove-shimmer--tooltip::before,
.gift-grove-shimmer--tooltip::after {
    content: none;
    display: none;
    animation: none;
}

@keyframes giftGroveShimmerSpin {
    from { --gift-shimmer-angle: 0deg; }
    to { --gift-shimmer-angle: 360deg; }
}

@keyframes giftGroveBloomPulse {
    0%, 100% { opacity: 0.85; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.14); }
}

@keyframes giftGroveShimmerBreathe {
    0%, 100% { opacity: 0.9; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.12); }
}

/* Fallback when @property / animated angle isn't supported: rotate the whole layer */
@supports not (background: conic-gradient(from var(--gift-shimmer-angle), red, blue)) {
    .gift-grove-shimmer::after {
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255, 248, 199, 0.15) 18deg,
            rgba(255, 236, 154, 1) 38deg,
            rgba(255, 214, 105, 0.69) 68deg,
            transparent 115deg,
            transparent 175deg,
            rgba(255, 244, 184, 1) 205deg,
            rgba(255, 221, 116, 0.5) 245deg,
            transparent 295deg,
            transparent 360deg
        );
        animation: giftGroveShimmerSpinFallback 24s linear infinite, giftGroveShimmerBreathe 4.2s ease-in-out infinite;
    }
}

@keyframes giftGroveShimmerSpinFallback {
    from { transform: rotate(0deg) scale(0.98); }
    to { transform: rotate(360deg) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
    .gift-grove-shimmer::before,
    .gift-grove-shimmer::after {
        animation: none;
        opacity: 0.85;
    }
    .gift-grove-shimmer::after {
        --gift-shimmer-angle: 40deg;
    }
}

/* Artifacts — same shimmer motion as gifts, electric fuchsia, +20% reach */
.artifact-shimmer::before {
    inset: -35%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 190, 255, 0.95) 0%,
        rgba(255, 60, 220, 0.7) 36%,
        rgba(255, 20, 180, 0.35) 58%,
        rgba(200, 0, 160, 0) 78%
    );
}

.artifact-shimmer::after {
    inset: -30%;
    background: conic-gradient(
        from var(--gift-shimmer-angle),
        transparent 0deg,
        rgba(255, 210, 255, 0.15) 18deg,
        rgba(255, 80, 240, 1) 38deg,
        rgba(255, 0, 200, 0.6) 68deg,
        transparent 115deg,
        transparent 175deg,
        rgba(255, 160, 255, 0.85) 205deg,
        rgba(255, 40, 210, 0.45) 245deg,
        transparent 295deg,
        transparent 360deg
    );
}

@supports not (background: conic-gradient(from var(--gift-shimmer-angle), red, blue)) {
    .artifact-shimmer::after {
        background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255, 210, 255, 0.15) 18deg,
            rgba(255, 80, 240, 1) 38deg,
            rgba(255, 0, 200, 0.6) 68deg,
            transparent 115deg,
            transparent 175deg,
            rgba(255, 160, 255, 0.85) 205deg,
            rgba(255, 40, 210, 0.45) 245deg,
            transparent 295deg,
            transparent 360deg
        );
    }
}

/*
 * High-res illustrated sprites (items, power-ups, artifacts, towers): smooth downscale in UI.
 * Matches map canvas bilinear scaling. !important overrides leftover inline pixelated/crisp-edges.
 */
.collectible-sprite-smooth,
.artifact-sprite-smooth,
.placement-new-item-icon,
.inventory-item.item .icon .icon-inner img,
.inventory-item.powerup .icon .icon-inner img,
.inventory-item.artifact .icon .icon-inner img,
.inventory-item.tower .icon .icon-inner img,
.meta-progression-tower-icon img,
.inventory-item.shop-bundle-discount .shop-discount-badge,
.bottom-edge-power-ups .power-up-indicator img,
#game-tooltip img[src*="assets/images/items/"],
#game-tooltip img[src*="assets/images/power_ups/"],
#confirmModal img[src*="assets/images/items/"],
#confirmModal img[src*="assets/images/power_ups/"],
#modalOverlay img[src*="assets/images/items/"],
#modalOverlay img[src*="assets/images/power_ups/"],
#waveCompleteModal img[src*="assets/images/items/"],
#waveCompleteModal img[src*="assets/images/power_ups/"],
.modal-overlay.artifact-trader-modal img[data-artifact-id],
.placement-scenario-modal img[src*="assets/images/items/"],
.placement-scenario-modal img[src*="assets/images/power_ups/"],
#overlayLevelXpRow img[src*="assets/images/items/"] {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: auto !important;
}

/* Water bucket / tank / vat — width set inline from CONFIG.WATER_TANK_DISPLAY_SCALE */
.placement-new-item-icon-water {
    flex-shrink: 0;
}

.placement-new-item-icon-dig-site {
    width: 88px;
}

.placement-new-item-icon-dungeon {
    width: 72px;
}

.placement-new-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.placement-new-item-name {
    color: #1FE2F5;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.placement-new-item-description {
    color: #FFFFFF;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.meta-progression-unlocks {
    margin-top: 18px;
}

.meta-progression-unlocks .placement-new-items-container {
    flex-wrap: wrap;
    max-width: 960px;
}

.meta-progression-unlock-copy {
    margin: 0 0 4px;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.meta-progression-tower-icon {
    width: 90px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* New Fire Type Section */
.placement-new-fire-type-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 12px auto;
}

.placement-new-fire-type-row .placement-new-fire-type {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.placement-new-fire-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.placement-new-fire-type-frame {
    background-image: url('assets/images/ui/frame-new-fire-type.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px 25px;
    display: flex;
    gap:5px;
    flex-direction: column;
    width: 297px;
    height: 166.5px;
    box-sizing: border-box;
    justify-content: center;
}

.placement-new-fire-type-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.placement-new-fire-type-icon {
    width: 28px;
    height: 28px;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.placement-new-fire-type-label {
    color: #FF4E4E;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.placement-new-fire-type-content {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    gap:8px;
}

.placement-new-fire-type-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
}

.placement-new-fire-type-hex-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placement-new-fire-type-hex-border {
    position: absolute;
    width: 100px;
    height: 115px;
    background-image: url('assets/images/ui/frame-fire-type.png');
    background-size: 100% 100%;
    background-position: center 13px;
    background-repeat: no-repeat;
    z-index: 2;
}

.placement-new-fire-type-hex {
    position: absolute;
    top:15px;
    width: 74px;
    height: 89px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

.placement-new-fire-type-name {
    position: relative;
    z-index: 3;
    color: white;
    transform: translateY(8px);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 13px;
    text-shadow:0 0 15px white, 0 0 5px white
}

.placement-new-fire-type-name-wrapped {
    font-size: 16px;
    line-height: 15px;
}

.placement-new-fire-type-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.placement-new-fire-type-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
}

.placement-new-fire-type-stat img {
    width: 28px;
    height: 28px;
    image-rendering: crisp-edges;
}

@keyframes placementVortexSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.placement-new-vortex-sprite {
    width: 76px;
    height: auto;
    image-rendering: crisp-edges;
    flex-shrink: 0;
    transform-origin: center center;
    animation: placementVortexSpin var(--vortex-spin-duration, 3.571s) linear infinite;
}

.placement-new-vortex-left {
    flex-direction: column;
    gap: 0;
    margin-top: -4px;
}

.placement-new-vortex-name {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    max-width: 110px;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 4px #000,
         0 0 8px rgba(0, 0, 0, 0.85);
}

/* Fire Types Section */
.placement-fire-types {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.placement-fire-types-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.placement-fire-types-label {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.placement-fire-types-frame {
    padding: 0 0 6px 0;
    display: grid;
    grid-template-columns:
        22px
        max-content
        4.5rem
        5.25rem
        4.25rem;
    column-gap: 8px;
    row-gap: 10px;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.placement-fire-type-entry {
    display: contents;
}

.placement-fire-type-hex {
    display: inline-block;
    width: 16px;
    height: 19px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: none;
    box-sizing: border-box;
    /* Reduce clip-path anti-alias fringe on dark fills */
    transform: translateZ(0);
    backface-visibility: hidden;
    flex-shrink: 0;
    justify-self: center;
    align-self: center;
}

.placement-fire-type-name {
    font-size: 14px;
    font-weight: 600;
    min-width: min-content;
    white-space: nowrap;
    overflow: visible;
    padding-right: 8px;
}

.placement-fire-type-stats-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.placement-fire-type-percent {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: normal;
    text-align: right;
    justify-self: end;
    font-variant-numeric: tabular-nums;
}

.placement-fire-type-stat {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    color: #FFFFFF;
    font-size: 13px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.placement-fire-type-stat-hp {
    justify-self: start;
}

.placement-fire-type-stat-dps {
    justify-self: start;
}

.placement-fire-type-stat img {
    width: 16px;
    height: 16px;
    image-rendering: crisp-edges;
}

/* Near-black fire (Blackfyre): white rim + glow so hex reads on dark map */
.placement-fire-type-hex-stack {
    display: inline-grid;
    width: 16px;
    height: 19px;
    justify-self: center;
    align-self: center;
    place-items: center;
}

.placement-fire-type-hex-stack > .placement-fire-type-hex {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: center;
}

.placement-fire-type-hex-stack .placement-fire-type-hex--rim {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.22);
    transform-origin: 50% 50%;
    z-index: 0;
}

.placement-fire-type-hex-stack .placement-fire-type-hex--fill {
    z-index: 1;
}

.placement-fire-type-entry--dark-fire .placement-fire-type-name {
    text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
        0 0 6px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.5);
    font-weight:900;
}

.placement-new-fire-type--dark-fire .placement-new-fire-type-hex--rim {
    position: absolute;
    top: 15px;
    left: 13px;
    width: 74px;
    height: 89px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(255, 255, 255, 0.96);
    z-index: 0;
    transform: scale(1.1);
    transform-origin: 50% 50%;
}

.placement-new-fire-type--dark-fire .placement-new-fire-type-hex-wrapper > .placement-new-fire-type-hex:not(.placement-new-fire-type-hex--rim) {
    z-index: 1;
    left: 13px;
}

.placement-new-fire-type--dark-fire .placement-new-fire-type-name {
    text-shadow:
        0 0 4px rgba(255, 255, 255, 1),
        0 0 12px rgba(255, 255, 255, 0.95),
        0 0 22px rgba(255, 255, 255, 0.6),
        0 0 1px rgba(0, 0, 0, 0.8);
}

/* Approx. config.js Blackfyre 4-stop cycle (2.6s); see getFireTypeDisplayColor */
@keyframes blackfyrePlacementHue {
    0%, 100% { background-color: hsl(275, 12%, 8%); }
    25% { background-color: hsl(247, 58%, 13%); }
    50% { background-color: hsl(315, 59%, 13%); }
    75% { background-color: hsl(32, 53%, 12%); }
}

@keyframes blackfyrePlacementTextHue {
    0%, 100% { color: hsl(275, 12%, 8%); }
    25% { color: hsl(247, 58%, 13%); }
    50% { color: hsl(315, 59%, 13%); }
    75% { color: hsl(32, 53%, 12%); }
}

.placement-blackfyre-color-anim {
    background-color: hsl(275, 12%, 8%);
    animation: blackfyrePlacementHue 2.6s linear infinite;
}

/* Label text: same cycle as hex (placement modal, spawner tooltips) */
.placement-blackfyre-name-color-anim {
    color: hsl(275, 12%, 8%);
    animation: blackfyrePlacementTextHue 2.6s linear infinite;
}

/* Boss Reward Section */
.placement-boss-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.placement-boss-reward-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.placement-boss-reward-label {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.placement-boss-reward-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.placement-boss-reward-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 270px;
}

.placement-boss-reward-frame {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    background-image: url('assets/images/ui/frame-round-blue.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placement-boss-reward-icon {
    width: 64px;
    height: auto;
    image-rendering: crisp-edges;
}

.placement-boss-reward-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.placement-boss-reward-amount {
    font-size: 26px;
    font-weight: bold;
    font-family: "Exo 2", sans-serif;
    line-height: 1;
    margin-bottom: 5px;
}

.placement-boss-reward-label-text {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: normal;
    font-family: "Exo 2", sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
}

/* START PLACEMENT — sits in flow under fire types (matches wave complete Collect spacing) */
.placement-start-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-shrink: 0;
}

.placement-start-button {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

.placement-modal-back-btn .control-btn-icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Map progression overlay (minimap click) */
#mapProgressionModal.map-progression-overlay {
    background: rgba(0, 0, 0, 0.85);
    padding: 24px 20px 32px;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#mapProgressionModal.map-progression-overlay.active {
    display: flex; /* backdrop fade: .modal-overlay.active rules above */
}

.map-progression-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    pointer-events: auto;
}

.map-progression-title {
    flex-shrink: 0;
    margin: 0 0 6px;
    padding: 0 16px;
    color: #ff6b35;
    font-family: "Exo 2", sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    transform: translateY(-4px);
}

#inventoryGridArtifacts .collection-artifact-trader-btn {
    justify-self: stretch;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#inventoryGridArtifacts .collection-artifact-trader-btn:disabled {
    opacity: 0.55;
    cursor: var(--cursor-default, default);
}

.map-progression-intro {
    flex-shrink: 0;
    margin: 0 0 12px;
    padding: 0 24px;
    max-width: 640px;
    width: 100%;
    align-self: center;
    color: rgba(203, 213, 225, 0.92);
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
}

.map-progression-mode-gate .map-progression-footer {
    display: none;
}

.map-progression-mode-review .map-progression-go {
    display: none;
}

.map-progression-grid-wrap {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 8px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.map-progression-grid-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.map-progression-connectors {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.map-progression-connectors line {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 2;
    stroke-linecap: round;
}

.map-progression-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 40px 40px;
    justify-content: center;
    align-content: flex-start;
    width: 100%;
    max-width: 1200px;
    padding: 8px 24px;
    overflow: visible;
}

.map-progression-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: visible;
    cursor: var(--cursor-default);
    opacity: 1;
}

.map-progression-cell .map-progression-hex-wrap {
    transition: transform 0.28s ease, filter 0.28s ease;
}

.map-progression-cell.is-hovered .map-progression-hex-wrap,
.map-progression-cell:hover .map-progression-hex-wrap {
    transform: translateY(-5px);
}

.map-progression-cell--beaten .map-progression-hex,
.map-progression-cell--beaten .map-progression-characters {
    filter: saturate(0.5) brightness(0.5);
}

.map-progression-cell--beaten.is-hovered .map-progression-hex,
.map-progression-cell--beaten:hover .map-progression-hex,
.map-progression-cell--beaten.is-hovered .map-progression-characters,
.map-progression-cell--beaten:hover .map-progression-characters {
    filter: saturate(1) brightness(1);
}

.map-progression-cell--current {
    opacity: 1;
}

.map-progression-cell--gate-target,
.map-progression-cell--gate-target .map-progression-hex-wrap,
.map-progression-cell--gate-target .map-progression-hex,
.map-progression-cell--gate-target img {
    cursor: var(--cursor-default);
}

.map-progression-go {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);
    pointer-events: none;
    margin: 0;
    flex-shrink: 0;
    transition: transform 0.1s ease, filter 0.1s ease;
}

/* Next wave group: press feedback (clicks hit the cell; go arrow is pointer-events: none) */
.map-progression-cell--gate-target:active .map-progression-go,
.map-progression-cell--gate-target.map-progression-cell--pressing .map-progression-go {
    transform: translate(-50%, calc(-50% + 2px));
    filter: brightness(0.88);
}

.map-progression-cell--gate-target:hover:active .map-progression-hex-wrap,
.map-progression-cell--gate-target.map-progression-cell--pressing:hover .map-progression-hex-wrap {
    transform: translateY(-3px);
}

.map-progression-cell--gate-target:active:not(:hover) .map-progression-hex-wrap,
.map-progression-cell--gate-target.map-progression-cell--pressing:not(:hover) .map-progression-hex-wrap {
    transform: translateY(2px);
}

.map-progression-cell--next,
.map-progression-cell--locked {
    opacity: 1;
}

.map-progression-name {
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 999px;
    color: #ffffff;
    font-size: 13.2px;
    font-weight: 600;
    font-family: "Exo 2", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.map-progression-hex-wrap {
    position: relative;
    width: 185px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.map-progression-hex {
    position: relative;
    width: 185px;
    height: 160px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    overflow: hidden;
    background: rgba(20, 24, 32, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    z-index: 1;
    transition: filter 0.28s ease;
}

.map-progression-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.map-progression-mystery {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(33 40 60);
    user-select: none;
}

.map-progression-mystery-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    image-rendering: auto;
    pointer-events: none;
}

.map-progression-characters {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    z-index: 3;
    pointer-events: none;
    transition: filter 0.28s ease;
}

.map-progression-hero,
.map-progression-boss {
    position: relative;
    flex-shrink: 0;
    width: auto;
    height: 110px;
    max-height: none;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
    /* Match in-game map / modal orientation (see wave-complete-hero-graphic img + drawBossImage flip) */
    transform: scaleX(-1);
    transform-origin: bottom center;
}

.map-progression-hero {
    margin-left: 30px;
}

/* Shards of Hexalon: no visible boss, but reserve right slot so hero stays left-aligned */
.map-progression-boss--layout-spacer {
    visibility: hidden;
    pointer-events: none;
}

.map-progression-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 8px;
    z-index: 2;
}

.map-progression-footer .choice-btn.cta-button {
    width: auto;
    min-width: 140px;
    display: inline-flex;
    flex: 0 0 auto;
}

.map-progression-tooltip-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 8px;
    line-height: 1.35;
}

.map-progression-tooltip-name {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
}

.map-progression-tooltip-group-num {
    font-weight: 400;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.92);
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
}

.map-progression-tooltip-status {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    line-height: 1.3;
}

.map-progression-tooltip-status--conquered {
    color: #ff9a2e;
}

.map-progression-tooltip-status--current {
    color: #00ff88;
}

.map-progression-tooltip-characters {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.map-progression-tooltip-row--power span:last-child {
    max-width: 160px;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
}

.map-progression-tooltip-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-progression-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 12px;
    line-height: 1.35;
}

.map-progression-tooltip-row span:first-child {
    color: rgba(203, 213, 225, 0.95);
}

.map-progression-tooltip-row span:last-child {
    font-weight: 600;
    color: #fff;
    text-align: right;
    white-space: nowrap;
}

.map-progression-tooltip-row--stars {
    align-items: center;
}

.map-progression-tooltip-star-icons {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    font-weight: 600;
    color: #fff;
    text-align: right;
    white-space: nowrap;
}

.map-progression-tooltip-perfect-icon {
    width: 1.15em;
    height: 1.15em;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: auto;
}

.map-progression-tooltip-row span.map-progression-tooltip-stat--fires {
    color: #6ecfff;
}

.map-progression-tooltip-row span.map-progression-tooltip-stat--damage {
    color: #ff9999;
}

.map-progression-tooltip-row--sub span:last-child {
    font-weight: 600;
    color: #ffe566;
}

.map-progression-tooltip-star-note {
    margin: 0 0 4px;
    font-size: 10px;
    line-height: 1.3;
    color: rgba(148, 163, 184, 0.92);
    font-style: italic;
}

.map-progression-tooltip-star-waves {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 2px 0 6px;
    padding: 6px 0 6px 8px;
    border-left: 2px solid rgba(255, 213, 74, 0.35);
}

.map-progression-tooltip-row--wave {
    align-items: center;
    font-size: 11px;
    gap: 12px;
}

.map-progression-tooltip-row--wave .map-progression-tooltip-star-icons {
    letter-spacing: 0.06em;
}

.map-progression-tooltip-row--perfect .map-progression-tooltip-star-icons,
.map-progression-tooltip-row--perfect span:last-child {
    color: #ffd54a;
}

.map-progression-tooltip-muted,
.map-progression-tooltip-foot {
    margin: 0;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.92);
    line-height: 1.4;
}

.map-progression-tooltip-foot {
    margin-top: 8px;
    font-style: italic;
}

/* Specialty research tree modal */
#specialtyModal.specialty-overlay {
    z-index: 1600;
    background: rgba(0, 0, 0, 0.85);
    padding: 24px 20px 32px;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#specialtyModal.specialty-overlay.active {
    display: flex;
}

/* Confirm unlock stays above specialty modal (confirm modal is z-index 3000) */
body:has(#specialtyModal.active) #confirmModal.modal-overlay.active {
    z-index: 3100 !important;
}

/* Dungeon reward picker is z-index 26000 — claim confirm must sit above it */
body:has(.dungeon-reward-overlay) #confirmModal.modal-overlay.active {
    z-index: 26100 !important;
}

.specialty-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 920px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    pointer-events: auto;
}

.specialty-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 6px;
}

.specialty-screen-title {
    margin-bottom: 0;
    color: #FDA801;
}

.specialty-plans-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transform: translateY(-4px);
    margin-right: -6px;
}

.specialty-plans-icon {
    width: 40px;
    height: auto;
    image-rendering: pixelated;
}

.specialty-plans-badge {
    color: #FDA801;
    font-family: "Exo 2", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.specialty-tree-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    padding: 4px 8px 12px;
}

.specialty-tree-wrap::-webkit-scrollbar {
    width: 8px;
}

.specialty-tree-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 31px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.specialty-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.specialty-column-icon {
    width: 80px;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin-bottom: -8px;
}

.specialty-column-header {
    font-family: "Exo 2", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.specialty-column--time .specialty-column-header {
    color: #FFD700;
}

.specialty-column--power .specialty-column-header {
    color: #00D4FF;
}

.specialty-column--money .specialty-column-header {
    color: #00FF88;
}

.specialty-column--health .specialty-column-header {
    color: #FF4757;
}

.specialty-levels {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.specialty-connector {
    width: 2px;
    height: 15px;
    flex-shrink: 0;
    align-self: center;
    pointer-events: none;
}

.specialty-connector--dim {
    background-color: rgba(255, 255, 255, 0.08);
}

.specialty-column--time .specialty-connector--bright {
    background-color: #FFE066;
}

.specialty-column--power .specialty-connector--bright {
    background-color: #66E5FF;
}

.specialty-column--money .specialty-connector--bright {
    background-color: #5CFFB0;
}

.specialty-column--health .specialty-connector--bright {
    background-color: #FF8A94;
}

.specialty-level-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 62px;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 5px 6px;
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
    cursor: var(--cursor-default);
}

.specialty-level-card-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
    text-align: center;
}

.specialty-level-card-level {
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;
}

.specialty-level-card-keyword {
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.06em;
}

.specialty-level-card--earned {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.specialty-level-card--earned .specialty-level-card-text {
    color: rgba(255, 255, 255, 0.85);
}

.specialty-column--time .specialty-level-card--earned {
    background: rgba(255, 215, 0, 0.28);
    border-color: #FFE066;
}

.specialty-column--time .specialty-level-card--earned .specialty-level-card-text {
    color: #FFF3BF;
}

.specialty-column--power .specialty-level-card--earned {
    background: rgba(0, 212, 255, 0.28);
    border-color: #66E5FF;
}

.specialty-column--power .specialty-level-card--earned .specialty-level-card-text {
    color: #C8F7FF;
}

.specialty-column--money .specialty-level-card--earned {
    background: rgba(0, 255, 136, 0.22);
    border-color: #5CFFB0;
}

.specialty-column--money .specialty-level-card--earned .specialty-level-card-text {
    color: #CCFFE8;
}

.specialty-column--health .specialty-level-card--earned {
    background: rgba(255, 71, 87, 0.28);
    border-color: #FF8A94;
}

.specialty-column--health .specialty-level-card--earned .specialty-level-card-text {
    color: #FFD0D5;
}

.specialty-level-card--available {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

.specialty-level-card--available .specialty-level-card-text {
    color: rgba(255, 255, 255, 0.72);
}

.specialty-column--time .specialty-level-card--available {
    border-color: rgba(255, 215, 0, 0.45);
}

.specialty-column--time .specialty-level-card--available .specialty-level-card-text {
    color: #FFD700;
}

.specialty-column--power .specialty-level-card--available {
    border-color: rgba(0, 212, 255, 0.45);
}

.specialty-column--power .specialty-level-card--available .specialty-level-card-text {
    color: #00D4FF;
}

.specialty-column--money .specialty-level-card--available {
    border-color: rgba(0, 255, 136, 0.45);
}

.specialty-column--money .specialty-level-card--available .specialty-level-card-text {
    color: #00FF88;
}

.specialty-column--health .specialty-level-card--available {
    border-color: rgba(255, 71, 87, 0.45);
}

.specialty-column--health .specialty-level-card--available .specialty-level-card-text {
    color: #FF4757;
}

.specialty-level-card--available.specialty-level-card--clickable {
    cursor: var(--cursor-default);
}

.specialty-column--time .specialty-level-card--available.specialty-level-card--clickable:hover {
    background: rgba(255, 215, 0, 0.22);
    border-color: rgba(255, 224, 102, 0.9);
}

.specialty-column--time .specialty-level-card--available.specialty-level-card--clickable:hover .specialty-level-card-text {
    color: #FFFDE0;
}

.specialty-column--power .specialty-level-card--available.specialty-level-card--clickable:hover {
    background: rgba(0, 212, 255, 0.22);
    border-color: rgba(102, 229, 255, 0.9);
}

.specialty-column--power .specialty-level-card--available.specialty-level-card--clickable:hover .specialty-level-card-text {
    color: #E8FAFF;
}

.specialty-column--money .specialty-level-card--available.specialty-level-card--clickable:hover {
    background: rgba(0, 255, 136, 0.18);
    border-color: rgba(92, 255, 176, 0.9);
}

.specialty-column--money .specialty-level-card--available.specialty-level-card--clickable:hover .specialty-level-card-text {
    color: #E8FFF4;
}

.specialty-column--health .specialty-level-card--available.specialty-level-card--clickable:hover {
    background: rgba(255, 71, 87, 0.22);
    border-color: rgba(255, 138, 148, 0.9);
}

.specialty-column--health .specialty-level-card--available.specialty-level-card--clickable:hover .specialty-level-card-text {
    color: #FFE8EB;
}

.specialty-level-card--locked {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 0.48;
    filter: brightness(0.64) saturate(0.36);
}

.specialty-level-card--locked .specialty-level-card-text {
    color: rgba(255, 255, 255, 0.48);
}

.specialty-level-card--available:not(.specialty-level-card--clickable) {
    opacity: 0.64;
    filter: brightness(0.76) saturate(0.56);
}

.specialty-milestone-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 128px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px 4px 8px;
    background: rgba(255, 255, 255, 0.03);
    cursor: var(--cursor-default);
}

.specialty-milestone-card--locked {
    opacity: 0.48;
    filter: brightness(0.64) saturate(0.36);
    border-color: rgba(255, 255, 255, 0.08);
}

.specialty-milestone-card--earned {
    opacity: 1;
    filter: none;
}

.specialty-column--time .specialty-milestone-card--earned {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 224, 102, 0.55);
}

.specialty-column--power .specialty-milestone-card--earned {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(102, 229, 255, 0.55);
}

.specialty-column--money .specialty-milestone-card--earned {
    background: rgba(0, 255, 136, 0.16);
    border-color: rgba(92, 255, 176, 0.55);
}

.specialty-column--health .specialty-milestone-card--earned {
    background: rgba(255, 71, 87, 0.2);
    border-color: rgba(255, 138, 148, 0.55);
}

.specialty-milestone-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.specialty-milestone-reward-row {
    pointer-events: none;
}

#specialtyModal .artifact-trader-reward-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: visible;
}

#specialtyModal .artifact-trader-reward-stack:has(> .artifact-trader-reward-unit) {
    gap: 8px;
}

#specialtyModal .artifact-trader-reward-row--overlap .artifact-trader-reward-stack,
#specialtyModal .artifact-trader-reward-row--overlap .artifact-trader-reward-stack:has(> .artifact-trader-reward-unit) {
    gap: 0 !important;
}

#specialtyModal .specialty-milestone-preview .artifact-trader-reward-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

#specialtyModal .artifact-trader-reward-count {
    font-size: 20px;
}

#specialtyModal .artifact-trader-reward-stack img {
    height: 60px !important;
    width: auto;
    flex-shrink: 0;
}

/* Time mastery: smaller icons, one row, xN under each power-up */
.specialty-column--time .artifact-trader-reward-stack img {
    height: 45px !important;
}

.specialty-column--time .artifact-trader-reward-stack:has(> .artifact-trader-reward-unit) {
    gap: 0;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.specialty-column--time .artifact-trader-reward-row,
.specialty-column--time .artifact-trader-reward-row--overlap {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    gap: 0;
}

.specialty-column--time .artifact-trader-reward-row--overlap .artifact-trader-reward-stack + .artifact-trader-reward-stack {
    margin-top: 0;
}

.specialty-column--time .artifact-trader-reward-unit {
    position: relative;
}

.specialty-column--time .artifact-trader-reward-count {
    position: static;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.specialty-milestone-money {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    flex-shrink: 0;
}

.specialty-milestone-money-icon {
    height: 60px;
    width: auto;
    image-rendering: pixelated;
}

.specialty-milestone-money-amount {
    color: #00FF88;
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}

.specialty-footer {
    flex-shrink: 0;
    margin-top: 12px;
}

.specialty-footer .choice-btn.cta-button {
    width: auto;
    min-width: 140px;
}

.specialty-tree-trigger {
    cursor: var(--cursor-default);
}

.specialty-tree-trigger:hover {
    filter: brightness(1.06);
}

/* Tower statistics modal (Towers On Map header) — button reset only; typography from .label */
button.tower-stats-header-trigger.label {
    margin: 0;
    padding: 0 46px 0 17px;
    border: none;
    background: transparent;
    cursor: var(--cursor-default);
    -webkit-appearance: none;
    appearance: none;
    /* Preserve .label typography (font: inherit was resetting size/weight/transform) */
    font-family: 'Exo 2', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: normal;
}

.tower-stats-header-trigger:hover,
.tower-stats-header-trigger:focus-visible {
    filter: brightness(1.08);
}

.tower-stats-header-trigger:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
}

#towerStatsModal.tower-stats-overlay {
    z-index: 1700; /* Above settings (1500) and advanced-settings sub-modals (1600–1650) */
    background: rgba(0, 0, 0, 0.85);
    padding: 24px 20px 32px;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#towerStatsModal.tower-stats-overlay.active {
    display: flex;
}

.tower-stats-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1120px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    pointer-events: auto;
}

.tower-stats-list-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: auto;
    padding: 8px 12px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 180, 255, 0.45) rgba(0, 0, 0, 0.25);
}

.tower-stats-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    width: 100%;
}

.tower-stats-row {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    padding: 20px 12px 30px 22px;
    border-radius: 8px;
    background: rgba(12, 18, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tower-stats-icon-slot {
    flex-shrink: 0;
    width: 64px;
    min-width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-default);
}

.tower-stats-icon-slot > div {
    transform: scale(0.92);
    transform-origin: center center;
}

.tower-stats-icon-slot--centered > div {
    transform: scale(0.92) translateY(2px);
}

.tower-stats-icon-slot--mystery {
    font-family: "Exo 2", sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.38);
    cursor: default;
    user-select: none;
}

.tower-stats-row--mystery .tower-stats-row-title {
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 2px;
}

.tower-stats-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}

.tower-stats-row-title {
    color: #ffffff;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.tower-stats-metric {
    display: grid;
    grid-template-columns: 54px 268px minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
}

.tower-stats-metric-label {
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.15;
    width: 54px;
    flex-shrink: 0;
    white-space: pre-line;
}

.tower-stats-metric-bar-wrap {
    width: 268px;
    flex-shrink: 0;
}

.tower-stats-metric-track {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.tower-stats-metric-value {
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 2px;
}

.tower-stats-metric-value--varies {
    cursor: help;
}

.tower-stats-usage {
    margin-top: 4px;
    padding-top: 6px;
    color: rgba(203, 213, 225, 0.92);
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.tower-stats-usage-label {
    font-weight: 700;
}

.tower-stats-metric-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    min-width: 0;
    width: 0%;
    transition: width 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.tower-stats-footer {
    flex-shrink: 0;
    margin-top: 8px;
}

/* Tower supercharger picker + options */
#superchargeModal.supercharge-overlay {
    z-index: 1750;
    background: rgba(0, 0, 0, 0.85);
    padding: 24px 20px 32px;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}

#superchargeModal.supercharge-overlay.active {
    display: flex;
}

#superchargeOptionsModal.supercharge-options-overlay {
    z-index: 1850;
    background: rgba(0, 0, 0, 0.55);
    padding: 24px 20px 32px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#superchargeOptionsModal.supercharge-options-overlay.active {
    display: flex;
}

body:has(#superchargeModal.active) #confirmModal.modal-overlay.active,
body:has(#superchargeOptionsModal.active) #confirmModal.modal-overlay.active {
    z-index: 3100 !important;
}

.supercharge-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1120px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
}

.supercharge-options-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 18px 22px 16px;
    border-radius: 10px;
    background: rgba(10, 16, 26, 0.94);
    border: 1px solid rgba(255, 210, 74, 0.22);
}

.supercharge-empty {
    grid-column: 1 / -1;
    color: rgba(220, 228, 240, 0.75);
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 32px 12px;
}

#superchargeModal.supercharge-overlay,
#superchargeModal.supercharge-overlay *,
#superchargeOptionsModal.supercharge-options-overlay,
#superchargeOptionsModal.supercharge-options-overlay * {
    cursor: var(--cursor-default);
}

#superchargeOptionsModal.supercharge-options-overlay .supercharge-option-card--used,
#superchargeOptionsModal.supercharge-options-overlay .supercharge-option-card--used *,
#superchargeOptionsModal.supercharge-options-overlay .supercharge-option-card--locked,
#superchargeOptionsModal.supercharge-options-overlay .supercharge-option-card--locked * {
    cursor: var(--cursor-x) !important;
}

.tower-stats-row.supercharge-tower-card {
    cursor: var(--cursor-default);
    text-align: left;
    font: inherit;
    color: inherit;
    appearance: none;
    width: 100%;
    position: relative;
    display: block;
    padding: 32px 36px 30px;
    background: rgba(32, 42, 58, 0.79);
    transition: border-color 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.supercharge-tower-card:hover,
.supercharge-tower-card:focus-visible {
    border-color: rgba(255, 210, 74, 0.45);
    background: rgba(40, 52, 71, 0.90);
    filter: brightness(1.06);
}

.supercharge-tower-card--active {
    border-color: rgba(255, 255, 255, 0.92);
}

.supercharge-tower-card--active:hover,
.supercharge-tower-card--active:focus-visible {
    border-color: #ffffff;
}

.supercharge-tower-card--maxed,
.supercharge-tower-card--maxed:hover,
.supercharge-tower-card--maxed:focus-visible,
.supercharge-tower-card--maxed.supercharge-tower-card--active,
.supercharge-tower-card--maxed.supercharge-tower-card--active:hover,
.supercharge-tower-card--maxed.supercharge-tower-card--active:focus-visible {
    filter: none;
    opacity: 1;
    cursor: var(--cursor-default);
    border-color: #FFD24A;
    background: rgba(46, 42, 28, 0.84);
}

.supercharge-tower-vitals .supercharge-track-badge {
    width: 25px;
    height: 25px;
    object-fit: contain;
    image-rendering: pixelated;
    margin-left: 0;
    flex-shrink: 0;
    transform: translateY(3px);
}

.supercharge-tower-vitals {
    pointer-events: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.supercharge-tower-vitals > div:first-child {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    gap: 10px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.supercharge-tower-vitals > div:first-child > div {
    flex: none !important;
    width: 100%;
    padding-left: 0 !important;
    padding-top: 6px !important;
    margin-top: 2px;
    align-items: center !important;
    gap: 0 !important;
    position: relative;
    z-index: 1;
}

.supercharge-tower-vitals > div:first-child > div > div {
    color: #ffffff !important;
    font-size: 13px;
    text-align: center;
    line-height: 1.2;
}

.supercharge-tower-vitals .tower-tooltip-name {
    color: #ffffff !important;
}

.supercharge-tower-vitals .tower-tooltip-details {
    flex: 1;
    min-width: 0;
    font-size: 1.125em;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.supercharge-tower-vitals .tower-tooltip-details .supercharge-track-slot {
    margin-left:5px;
}

.supercharge-tower-vitals .tower-tooltip-details > div {
    display: grid !important;
    grid-template-columns: 3.6em minmax(0, 1fr);
    align-items: center;
    column-gap: 4px;
    margin-bottom: 0 !important;
}

.supercharge-tower-vitals .supercharge-stat-label {
    white-space: nowrap;
}

.supercharge-tower-vitals .supercharge-stat-metrics {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.supercharge-tower-vitals .supercharge-stat-bolts {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    transform: translateY(4px);
    flex-shrink: 0;
}

.supercharge-tower-vitals .supercharge-stat-value {
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.supercharge-tower-vitals .tower-tooltip-details img {
    width: 18px !important;
    height: 18px !important;
}

.supercharge-tower-vitals .supercharge-stat-bolts img {
    width: 22px !important;
    height: 22px !important;
}

.supercharge-tower-vitals .tower-tooltip-details .supercharge-track-badge {
    width: 25px !important;
    height: 25px !important;
}

.supercharge-tower-vitals .tooltip-tower-icon {
    pointer-events: none;
    transform: scale(0.86) !important;
    transform-origin: top center !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 60px;
    overflow: visible;
}

.supercharge-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 12px 0 8px;
}

.supercharge-option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(12, 18, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: inherit;
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: var(--cursor-default);
}

.supercharge-option-card--available {
    cursor: var(--cursor-default);
    transition: border-color 0.15s ease, filter 0.15s ease;
}

.supercharge-option-card--available:hover,
.supercharge-option-card--available:focus-visible {
    border-color: rgba(255, 210, 74, 0.5);
    filter: brightness(1.08);
}

.supercharge-option-card--used,
.supercharge-option-card--used:hover,
.supercharge-option-card--used:focus-visible {
    filter: none;
    opacity: 1;
    cursor: var(--cursor-x) !important;
    border-color: #FFD24A;
    background: rgba(46, 42, 28, 0.84);
}

.supercharge-option-card--locked {
    cursor: var(--cursor-x) !important;
    filter: grayscale(0.85) brightness(0.72);
    opacity: 0.72;
}

.supercharge-option-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.supercharge-option-track-badge {
    width: 31px;
    height: 31px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    margin-left: auto;
}

.supercharge-option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.supercharge-option-name {
    font-family: "Exo 2", sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.supercharge-option-summary {
    color: rgba(230, 236, 245, 0.92);
    font-size: 13px;
    line-height: 1.35;
}

.supercharge-option-values {
    color: #FFD24A;
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.supercharge-option-arrow {
    color: #FFFFFF;
    margin: 0 6px;
}