/**
 * AMR AGENCY - MAIN STYLESHEET
 * * TABLE OF CONTENTS:
 * 1. Fonts & Variables
 * 2. Base / Reset
 * 3. Preloader
 * 4. Shared Sprite Button Utilities (NEW)
 * 5. Header & Navigation (UPDATED - Responsive Scroll)
 * 6. Arcade Stage Layout (Crowds, Playfield, Lights)
 * 7. Global Modals & Custom Scrollbars
 * 8. Player Profile Specifics
 * 9. On-Court Player Sprites
 * 10. Start Prompt
 */

/* ==========================================================================
   1. FONTS & VARIABLES
   ========================================================================== */

@font-face {
    font-family: 'Baskic8';
    src: url('../fonts/baskic8-webfont.woff2') format('woff2'),
         url('../fonts/baskic8-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Baskic8';
    src: url('../fonts/baskic8-bold-webfont.woff2') format('woff2'),
         url('../fonts/baskic8-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

:root {
    /* Colors */
    --black: #0b0e20;
    --white: #f6f7ea;
    --gray: #b8b4a9;
    --gray_light: #d1cfc6;
    --yellow: #fee79f;
    --orange: #ecb17f;
    --red_dark: #aa3f47;
    --purple_dark: #2e143b;
    --blue: #2e2f82;
    --teal_dark: #142834;
    
    /* Typography & Sizing */
    --font-arcade: 'Baskic8', monospace, sans-serif;
    --btn_size: clamp(3rem, 2.25rem + 2.5vw, 3.75rem);
    
    /* Crowd & Light Vars */
    --bg_min_height: 420px;
    --bg_height: 50%;
    
    --nav_margin: clamp(1.5rem, -0.375rem + 6.25vw, 3.375rem);
    --gap: clamp(1.25rem, 0rem + 4.1667vw, 2.5rem);
    --player_height: clamp(15rem, 13.75rem + 4.1667vw, 16.25rem);
    
    --league_menu_size: clamp(0.875rem, 0.625rem + 0.8333vw, 1.125rem);

    --marker_height: clamp(1.7rem, 0.75rem + 0.4167vw, 2rem);
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

body {
    padding: 0;
    margin: 0;
    background-color: var(--black);
    font-family: var(--font-arcade);
    color: var(--white);
    letter-spacing: 1px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale; 
    font-smoothing: none;
}

button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--white);
    font-family: var(--font-arcade);
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Utility Class */
.pixel-art {
    image-rendering: pixelated;
}

/* ==========================================================================
   3. PRELOADER
   ========================================================================== */

#arcade-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--black);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer; 
}

.preloader-content {
    width: 300px; 
    max-width: 90%;
}

#arcade-preloader .blinking-text {
    color: var(--yellow);
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 20px 0;
    animation: blink 1.5s infinite step-end;
    text-shadow: 4px 4px 0px #000;
}

#arcade-preloader .preloader-content p {
    color: var(--white);
    font-size: 1.125rem;
    margin: 0;
    text-align: left;
}

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

/* ==========================================================================
   4. SHARED SPRITE BUTTON UTILITIES
   ========================================================================== */

/* Group all buttons that use the 3-frame vertical sprite sheet logic */
.sport-icons button,
.nav-utilities button,
.btn-close-popup,
.swiper-nav-btn,
.stage-nav-btn {
    background-position: 0 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transition: filter 0.2s ease, opacity 0.2s;
}

/* Shared Hover State (Middle Frame) */
.sport-icons button:hover,
.nav-utilities button:hover,
.btn-close-popup:hover,
.swiper-nav-btn:hover,
.stage-nav-btn:hover { 
    background-position: 50% 0; 
}

/* Shared Active State (Last Frame) */
.sport-icons button:active,
.sport-icons button.active,
.nav-utilities button:active,
.btn-close-popup:active,
.swiper-nav-btn:active,
.stage-nav-btn:active { 
    background-position: 100% 0; 
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

.main-arcade-header {
    display: flex;
    gap: var(--gap);
    justify-content: space-between;
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    pointer-events: none;
    z-index: 999;
}

.main-arcade-header button,
.main-arcade-header a {
    pointer-events: auto;
}

.header-center-console {
    width: 50vw;
    max-width: 480px;
    position: relative;
    margin-bottom: auto;
}

.logo-container {
    position: relative;
}

.logo-container a {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    cursor: default;
}

.logo-container img {
    width: 100%;
    height: auto;
    max-height: min(310px, 25vh);
    min-height: 150px;
    aspect-ratio: 19 / 12;
    object-fit: contain;
    object-position: center top;
}

/* Header Buttons Layout */
.sport-icons,
.nav-utilities {
    width: var(--btn_size);
    margin: var(--nav_margin);
    flex-shrink: 0;
}

.sport-icons {
    list-style: none;
    padding: 0;
    margin-right: 0;
}

.nav-utilities {
    margin-left: 0;
}

.sport-icons button,
.nav-utilities button {
    width: 100%;
    padding: 0 0 100%;
    height: 0;
}

/* Sound Button Specific Overrides (6 Frames) */
.btn-sound { background-image: url('../assets/img/header/sound_btn.png'); }
.btn-info { background-image: url('../assets/img/header/info_btn.png'); }

.nav-utilities .btn-sound:hover { background-position: 20% 0; }
.nav-utilities .btn-sound:active { background-position: 40% 0; }
.btn-sound.is-muted { background-position: 60% 0; }
.btn-sound.is-muted:hover { background-position: 80% 0; }
.btn-sound.is-muted:active { background-position: 100% 0; }

/* Leagues Navigation */
.nav-leagues {
    margin: 0; 
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    /* The Holy Grail for centered absolute scrolling */
    max-width: 100vw; 
    padding-top: var(--marker_height);
    pointer-events: auto;
    
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none;
}

/* Hide scrollbar in Chrome/Safari to keep the arcade aesthetic */
.nav-leagues::-webkit-scrollbar {
    display: none;
}

.league-buttons {
    list-style: none;
    padding: 0;
    margin: 0 .5rem;
    background-color: var(--purple_dark);
    
    /* Replaces Flexbox. Hugs the items tightly and forces a single line */
    display: inline-block; 
    white-space: nowrap;
    
}

.league-buttons.hidden-menu {
    display: none;
}

.league-buttons.active-menu {
    display: block; 
}

.league-buttons li { 
    display: inline-block; /* Stacks horizontally without flex */
    padding: 0; 
    margin: 0;
    vertical-align: top;
}

.league-buttons button {
    position: relative;
    display: block;
    font-size: var(--league_menu_size);
    line-height: 1em;
    letter-spacing: .1em;
    padding: .5em 1em .1em;
    border: solid 3px;
    border-top-width: 0;
    border-bottom-width: 0;
    margin: 0 -1.5px;
    box-sizing: border-box;
}

.league-buttons button.active {
    font-weight: bold;
    color: var(--yellow);
    z-index: 10;
}

.league-buttons button:hover {
    font-weight: bold;
}

.league-buttons button.active:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: var(--marker_height);
    height: var(--marker_height);
    margin-bottom: 0px;
    background-image: url('../assets/img/header/nav_arrow.webp');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* Mobile: Align left so the start of the menu doesn't get clipped off-screen */
@media (max-width: 767px) {
    .league-buttons.active-menu {
        justify-content: flex-start;
    }
}

/* Desktop: Center perfectly */
@media (min-width: 768px) {
    .league-buttons.active-menu {
        justify-content: center;
    }
}


/* ==========================================================================
   6. ARCADE STAGE LAYOUT
   ========================================================================== */

.arcade-cabinet-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Fallback */
    min-height: 100dvh; /* The iOS Fix */
    width: 100%;
}

#main-arcade-screen {
    position: relative;
    flex-grow: 1;
    min-height: 600px; 
    overflow: hidden;
    display: flex; 
    flex-direction: column; 
}

/* Playfield Positioning Overlays */
#bg-lights,
#front-lights,
.court-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#front-crowd {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Background Crowd */
#bg-crowd {
    position: relative; 
    flex: 1 1 var(--bg_height); 
    min-height: var(--bg_min_height); 
    background-image: url('../assets/img/venues/default/crowd_loop.webp');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: bottom center;
    image-rendering: pixelated;
    z-index: 2; 
    display: flex;
    flex-shrink: 0;
    align-items: flex-end; 
    justify-content: center;
}

.casters {
    position: relative;
    z-index: 10;
    margin-bottom: 0; 
}

.casters img {
    height: auto;
    max-height: 120px; 
    display: block;
}

/* Playfield & Court */
#playfield {
    position: relative; 
    flex: 1 1 50%; 
    min-height: 300px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    flex-shrink: 0;
}

/* Playfield & Court Setup */
.court-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
}

/* Force all court images to stack on top of each other */
.court-background img {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block; 
    object-fit: cover;
    object-position: top; 
}

/* 1. The default court sits safely at the bottom */
.base-court {
    z-index: 1;
}

/* 2. Custom courts sit above it, invisible, waiting for JS */
.custom-court {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease; /* Buttery smooth crossfade */
}

/* 3. The active state triggered by JS */
.custom-court.active-court {
    opacity: 1;
}

/* Lighting Overlays */
#bg-lights {
    height: calc( var(--bg_height) * 1.2);
    min-height: calc( var(--bg_min_height) * 1.2);
    max-height: calc( var(--bg_height) + 100px);
    background-image: url('../assets/img/venues/default/back_lights.webp'); 
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
    pointer-events: none; 
    z-index: 10; 
    image-rendering: pixelated;
    mix-blend-mode: overlay;
}

#front-lights {
    height: 100%;
    background-image: url('../assets/img/venues/default/front_lights.webp'); 
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 100%;
    pointer-events: none; 
    z-index: 50; 
    image-rendering: pixelated;
    mix-blend-mode: screen;
}

#front-crowd {
    height: 25%;
    background-image: url('../assets/img/venues/default/foreground_crowd_loop.webp');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: bottom center;
    pointer-events: none;
    z-index: 100; 
    image-rendering: pixelated;
}

/* ==========================================================================
   7. GLOBAL MODALS & CUSTOM SCROLLBARS
   ========================================================================== */

.pixel-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* Fallback */
    height: 100dvh; /* The iOS Fix */
    background-color: rgba(11, 14, 32, 0.85); 
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    position: relative;
    width: 98%;
    max-width: 1080px;
    
    /* THE FIX: Explicit heights so the scrollbar knows where the bottom is! */
    height: 98vh; /* Fallback */
    height: 98dvh; /* The iOS Fix */ 
    max-height: 98%; 
    min-height: 400px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    z-index: 1; 
    
    /* Your Custom Padding Variables */
    --pad: 26px;
    --offset: clamp(1.875rem, 1.25rem + 2.0833vw, 2.5rem);
    --padding-vert: clamp(6.25rem, 3.75rem + 8.3333vw, 8.75rem);
    --padding-hor: clamp(1.875rem, -1.25rem + 10.4167vw, 5rem);
    --btn_close: clamp(2.25rem, 1.875rem + 1.25vw, 2.625rem); /* 36 - 42px*/
    padding: var(--pad) 6px; 
}

@media (min-width: 992px) {
    .modal-dialog {
       max-height: 820px; 
    }
    
}

.modal-dialog:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    pointer-events: none;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: 100px 15px;
    border-image-source: url('../assets/img/popup/popup_background.png');
    border-image-slice: 100 15 fill;
    border-image-repeat: stretch;
    image-rendering: pixelated;
    box-sizing: border-box; 
}

.btn-close-popup {
    position: absolute;
    top: calc( var(--pad) + var(--offset) ) ;
    right:  var(--offset);
    width: var(--btn_close); 
    height: var(--btn_close); 
    background-image: url('../assets/img/popup/close_btn.png');
    z-index: 10;
}

.modal-title {
    color: var(--yellow); 
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.modal-body-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--white);
    margin-bottom: 30px;
}

.modal-email-wrap { text-align: right; }
.modal-email { color: var(--yellow); text-decoration: none; font-size: 1.2rem; font-weight: bold; }
.modal-email:hover { color: var(--orange); }

/* Scrollable Container Rules (Text Modal) */
.modal-content-inner {
    flex: 1; 
    min-height: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--padding-vert) var(--padding-hor) calc( var(--padding-vert) * .9 );
    box-sizing: border-box;
}



/* ==========================================================================
   8. PLAYER PROFILE SPECIFICS (Top-Aligned, Block-Level Scroll)
   ========================================================================== */

/* 1. Constrain the Carousel strictly inside the Modal Dialog */
.modal-player-carousel {
    width: 100%;
    flex: 1; /* Fills the newly defined height of the modal-dialog */
    min-height: 0; 
    display: block; 
    position: static !important;
    --arrow_size: clamp(3rem, 2.25rem + 2.5vw, 3.75rem);
}

/* Safari Swiper Patch */
.modal-player-carousel {
    -webkit-transform: translateZ(0); transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.modal-player-carousel .swiper-wrapper,
.modal-player-carousel .swiper-slide {
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}

/* Swiper Arrows */
.swiper-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc( var(--arrow_size) * .65);
    height: var(--arrow_size);
    z-index: 20;
}
.swiper-nav-btn.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.swiper-nav-btn.prev-player { left: 20px; background-image: url('../assets/img/popup/arrow_left_popup.png'); }
.swiper-nav-btn.next-player { right: 20px; background-image: url('../assets/img/popup/arrow_right_popup.png'); }


/* 2. The Slide Container (Passes height to the scroller) */
.modal-player-carousel .swiper-slide {
    display: block;
    height: 100%; 
    overflow: hidden; /* Locks the slide itself in place */
}

/* THE SCROLL CONTAINER (Normal Flow!) */
.scroller-wrap {
    height: 100%; /* Perfectly matches the locked slide height */
    width: 100%;
    overflow-y: auto; /* The scrollbar trigger! */
    overflow-x: hidden;
}

/* 3. The Layout */
.player-slide-layout {
    display: block; /* Content flows naturally inside the scroller */
    width: 100%;
    max-width: 825px; 
    margin: 0 auto;
    padding: var(--padding-vert) calc(var(--padding-hor) * 1.6);
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .player-slide-layout {
        display: flex; /* Horizontal alignment for desktop */
        flex-direction: row;
        align-items: center; 
        justify-content: center;
        gap: 40px;
    }
}

/* The Main Frame Wrapper */
.player-card-graphic {
    display: block; 
    margin: 0 auto 40px auto; 
    background: transparent;
    border: none; 
    box-shadow: none;
    padding: 0;
    max-width: 385px;
    width: 100%;
}

@media (min-width: 992px) {
    .player-card-graphic {
        margin: 0; 
        flex-shrink: 0; 
    }
    
    .scroller-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%; /* Perfectly matches the locked slide height */
        width: 100%;
        overflow-y: auto; /* The scrollbar trigger! */
        overflow-x: hidden;
    }
    
    .player-slide-layout {

        padding: var(--padding-hor);

    }

}

/* Shared 9-Slice Border Rules for the Card */
.card-avatar-bg:before,
.card-nameplate:before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    border-style: solid;
    border-image-repeat: stretch;
    image-rendering: pixelated;
    box-sizing: border-box;
}

/* The Top Half (Orange Fill) */
.card-avatar-bg {
    position: relative;
    padding: 36px 39px 3px 33px; 
}

.card-avatar-bg:before {
    border-width: 48px 46px 3px 39px; 
    border-image-source: url('../assets/img/popup/frame_top.webp');
    border-image-slice: 48 46 3 39 fill; 
}

.card-avatar-bg img {
    width: 100%; 
    height: auto;
    display: block;
    margin: 0;
    position: relative;
}

/* The Bottom Half (Cream Fill + Shadow) */
.card-nameplate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 46px 48px 39px; 
    min-height: 80px;
    position: relative;
}

.card-nameplate:before {
    border-width: 6px 46px 48px 39px; 
    border-image-source: url('../assets/img/popup/frame_bottom.webp');
    border-image-slice: 6 46 48 39 fill; 
}

.card-nameplate h3 {
    margin: 0;
    padding: 16px;
    color: var(--black);
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
    transform: translateY(4px); 
    overflow-wrap: break-word; 
    word-break: break-word;
}

/* Right Side: Bio & Stats */
.player-details {
    flex: 1;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    --padding: 6px;
}

.player-bio-text {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
    color: var(--white);
    padding: 0 var(--padding);
}

.stat-row { margin-bottom: 15px; }
.stat-label { display: block; font-size: 1.125rem; color: var(--white); margin-bottom: 2px; padding: 0 var(--padding); }

.stat-track {
    width: 100%;
    background-color: var(--teal_dark); 
    border: 3px solid var(--black);
    box-shadow: 3px 3px 0 var(--blue);
    box-sizing: border-box;
}

.stat-fill {
    height: 18px;
    background-image: linear-gradient( to bottom, #bede8d 0px 3px, #68a651 3px calc(100% - 3px), #346c56 calc(100% - 3px) 100% );
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0s linear 0.5s;
}

.swiper-slide-active .stat-fill {
    transform: scaleX(1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}


/* ==========================================================================
   CUSTOM 8-BIT SCROLLBARS (Webkit) - PIXEL ART STYLE
   ========================================================================== */

/* Target BOTH the text modal AND the scroller wrap directly */
.modal-content-inner::-webkit-scrollbar,
.scroller-wrap::-webkit-scrollbar {
    width: 18px; 
}

.modal-content-inner::-webkit-scrollbar-track,
.scroller-wrap::-webkit-scrollbar-track {
    background: linear-gradient(to right,
        transparent 0px, transparent 6px,
        var(--black) 6px, var(--black) 12px,
        transparent 12px, transparent 18px
    );
    border: none; 
}

.modal-content-inner::-webkit-scrollbar-thumb,
.scroller-wrap::-webkit-scrollbar-thumb {
    border-style: solid;
    border-color: transparent;
    border-width: 0; 
    background-clip: padding-box;
    background-color: var(--orange);
    box-shadow: inset 3px 3px var(--black),
                inset -3px -3px var(--black),
                inset 6px 6px 0 var(--yellow),
                inset -6px -6px 0 var(--red_dark);
}

.modal-content-inner::-webkit-scrollbar-thumb:active,
.scroller-wrap::-webkit-scrollbar-thumb:active {
    background-color: #d86b4a; 
}

/* ==========================================================================
   9. ON-COURT PLAYER SPRITES
   ========================================================================== */
   
.stage-roster-carousel {
    
    --player_offset: calc( var(--player_height) * .24);
    --hitbox_width: calc( var(--player_height) * .32);
    --wrapper_width: calc( var(--player_height) * .48);
    --player_gap: calc( var(--player_height) * -.08);
    
    --arrow_size: clamp(3rem, 2.4375rem + 1.875vw, 3.5625rem);
    
    position: absolute;
    bottom: calc( ( 65% - var(--player_offset) / 3 ) + 20px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1080px;
    z-index: 20; 
    overflow: hidden;
}

.team-batch-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.team-batch-layout .raw-stage-player {
    position: relative;
    z-index: 1;
    width: var(--wrapper_width); 
    margin: 0 var(--player_gap); 
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.stage-roster-carousel .raw-stage-player:nth-child(odd) { margin-bottom: var(--player_offset); z-index: 0; }
.stage-roster-carousel .raw-stage-player:nth-child(even) { margin-top: var(--player_offset); z-index: 10; }

.stage-roster-carousel.layout-custom  .raw-stage-player:nth-child(odd) {
    margin-top: var(--player_offset);
    margin-bottom: auto;
    z-index: 10;
    
}

.stage-roster-carousel.layout-custom  .raw-stage-player:nth-child(even) {
    margin-bottom: var(--player_offset);
    margin-top: auto;
    z-index: 0;
    
}

.stage-player-btn {
    display: block;
    width: var(--hitbox_width); 
    height: var(--player_height); 
    cursor: pointer;
    outline: none;
    position: relative;
    pointer-events: auto;
}

.stage-player-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
    height: 100%;
    width: auto; 
    aspect-ratio: 212 / 336;
    background-repeat: no-repeat;
    background-size: 200% 100%; 
    background-position: 0 0;
    pointer-events: none; 
}

.stage-player-btn:hover .stage-player-img {
    background-position: 100% 0; 
}

/* Stage Arrows */
.stage-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--arrow_size) * .64);
    height: var(--arrow_size);
    z-index: 30;
}
.stage-nav-btn.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.prev-stage { left: 20px; background-image: url('../assets/img/venues/default/arrow_left_main.png'); }
.next-stage { right: 20px; background-image: url('../assets/img/venues/default/arrow_right_main.png'); }

.show-hover-names .stage-player-btn:after {
    content: attr(data-name);
    position: absolute;
    display: block;
    top: 0; /* Floats above their head */
    left: 50%;
    
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    /*
    text-shadow:    4px 4px 0 var(--black),
                    -4px 4px 0 var(--black),
                    -4px -4px 0 var(--black),
                    4px -4px 0 var(--black);
                    */
    background-color: var(--black);
    color: var(--white);
    padding: 8px 6px 2px;
    font-size: 1rem;
    line-height: .8em;
    letter-spacing: 1px;
    min-width: 100%;
    white-space: nowrap; /* Prevents long names from stacking */
    transform: translatex(-50%);
    pointer-events: none; /* So it doesn't block clicks */
    
    /* Hide it by default, reveal on hover */
    opacity: 0;
    transition: opacity 0s;
}

.show-hover-names .stage-player-btn:hover:after {
    opacity: 1;
    transition-delay: .2s;
}

/* ==========================================================================
   10. START PROMPT (Pulsing Text Overlay)
   ========================================================================== */

.start-bt-wrapper {
    position: absolute;
    bottom: 22.5%; /* Adjust this slightly up or down to align with the crowd's hands */
    left: 50%;
    transform: translateX(-50%);
    z-index: 150; 
    
    pointer-events: auto; 
    
    width: 506px;
    max-width: 85vw; /* Adjust this based on how large you exported the PNG */
    text-align: center;
}

.start-pulse-img {
    width: 100%;
    height: auto;
    
    /* Swapped to the hard blink! 
       1.2s infinite step-end gives it that aggressive, classic coin-op rhythm */
    animation: blink 1.2s infinite step-end; 
}


@keyframes sound-btn-pulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent) brightness(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 8px var(--yellow)) brightness(1.2); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent) brightness(1); }
}

.prompt-pulse {
    animation: sound-btn-pulse 1.5s infinite ease-in-out !important;
}