/* FONTS */
@font-face {
    font-family: 'Tobias';
    src: url('ASSETS/TobiasTRIAL-Regular-BF6719af6e0eca4.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tobias';
    src: url('ASSETS/TobiasTRIAL-Light-BF6719af6e0a52b.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'DM Sans';
    src: url('ASSETS/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
}

:root {
    --primary: #9c1317;
    /* Vibrant Red from reference */
    --primary-dark: #A00000;
    --accent-gold: #f9a11b;
    /* Updated Brand Yellow */
    /* Softer Gold/Yellow from reference title */
    --accent-orange: #FF8F00;
    --white: #ffffff;
    --text-white: #ffffff;
    --pattern: url('ASSETS/SVG/Pattern.svg');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', sans-serif;
    /* Bright Top (#E62e2d) -> Dark Bottom (#9c1317) */
    background: linear-gradient(to bottom, #E62e2d 0%, #9c1317 100%);
    background-size: cover;
    background-attachment: fixed;
    color: var(--white);
    height: 100vh;
    width: 100vw;
    /* Enforce iPhone SE Minimums */
    min-width: 320px;
    min-height: 500px;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    overscroll-behavior-x: none;
    /* Prevent swipe nav */
    position: relative;
    /* Ensure relative for pseudo */
}

body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('ASSETS/SVG/Pattern.svg');
    background-repeat: repeat;
    opacity: 0.5;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 0;
}

#app {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Ensure content is above pattern */
}

/* --- INTRO VIEW --- */
#intro-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Display flex by default to allow fade out, hide via opacity */
    display: flex;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    z-index: 100;
    z-index: 100;
    overflow-y: auto;
    /* Allow vertical scroll */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.5s ease;
}

#intro-view.active {
    opacity: 1;
    pointer-events: auto;
    /* No animation needed here, just state */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(249, 161, 27, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 5px 25px rgba(249, 161, 27, 0.7);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(249, 161, 27, 0.4);
    }
}

#intro-top-section {
    flex: 1 0 auto;
    /* Allow growth */
    /* Do not shrink, allow full height */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centered Vertically */
    align-items: center;
    padding: 120px 20px 20px 20px;
    flex-grow: 1;
    /* Allow it to grow to fill space */
    z-index: 2;
    /* overflow-y: auto; REMOVED to allow body scroll */
}

.intro-top-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    /* Remove auto margin to prefer top alignment on scroll */
    /* If screen is tall, we can add spacing via gap or min-height on parent */
}

#intro-bottom-section {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 20px 50px 20px;
    z-index: 10;
    margin-top: auto;
    /* Push to bottom if space is available */
}

/* HEADER (Global) */
.intro-header {
    position: absolute;
    /* Fixed at top */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertically center */
    padding: 40px;
    /* Same padding as before */
    z-index: 200;
    /* Above everything */
    pointer-events: none;
    /* Let clicks pass through if needed, though buttons usually aren't here */
}

.brand-logo {
    width: 300px;
    /* Increased from 100px */
    height: auto;
    object-fit: contain;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s;
}

.brand-logo:hover {
    opacity: 0.8;
}

.brand-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-transform: uppercase;
}

.sound-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent-gold);
    padding: 0px;
    z-index: 200;
    pointer-events: auto;
    margin-right: -10px;
    /* Shift right by 5px */
    /* Ensure clickable */
}

.sound-toggle svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 5px rgba(249, 161, 27, 0.5));
}

.sound-toggle.muted .muted-line {
    display: block !important;
    stroke: var(--accent-gold);
    stroke-width: 3;
}


/* MAIN CONTENT */
/* .intro-visuals and .main-title are now direct children of #intro-top-section */

.main-title {
    font-family: 'Tobias', serif;
    font-weight: 300;
    font-size: 4rem;
    line-height: 1.1;
    color: var(--accent-gold);
    margin-bottom: 20px;
    letter-spacing: -1px;
    width: 100%;
    max-width: 800px;
    /* Constraint added back here */
    text-align: center;
    opacity: 0;
    animation: slideUpFade 0.8s ease-out 0.3s forwards;
}

@media (max-width: 480px) {
    .main-title {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .intro-visuals {
        margin-top: auto;
    }
}


/* INTRO CARD (Reverse Gradient) */
.intro-card {
    background: #9c1317;
    border-radius: 30px;
    /* Rounded corners all around */
    padding: 20px;
    /* Standard internal padding */
    width: 100%;
    max-width: 800px;
    /* Constraint added back here */
    margin-top: 0;
    margin-bottom: 0;
    /* Gap from bottom handled by container padding */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    z-index: 10;
    opacity: 0;
    animation: slideUpFade 0.8s ease-out 0.6s forwards;
}

.intro-body {
    text-align: center;
    margin-bottom: 20px;
    padding: 0;
}

.sub-title {
    font-family: 'DM Sans', sans-serif;
    color: var(--accent-orange);
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.instructions-list li {
    font-family: 'DM Sans', sans-serif;
    color: var(--accent-gold);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    /* Center the list items */
    opacity: 0.9;
}

.instructions-list li span {
    font-weight: bold;
    margin-right: 10px;
    /* Reduced from 10px */
    color: var(--accent-orange);
    flex-shrink: 0;
    /* Prevent number from shrinking */
}

/* BUTTON */
.pill-btn {
    background: var(--accent-gold);
    color: #8B0000;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    /* Slightly reduced to ensure single line */
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 18px 50px;
    /* Balanced padding */
    white-space: nowrap;
    /* Enforce single line */
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(249, 161, 27, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
    width: auto;
    max-width: 100%;
    animation: pulseGlow 2.5s infinite ease-in-out;
}

.pill-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(249, 161, 27, 0.6);
}

/* HORSE VISUALS (IN-FLOW) */
.intro-visuals {
    position: relative;
    width: 100%;
    /* Keep max-width for desktop constraints */
    max-width: 700px;
    margin: 0 auto;
    /* Removed margin-bottom to let flex gap handle it or be tight */
    pointer-events: none;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; REMOVED to prevent cropping */
}

.intro-hero-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 0;
    /* Ensure it doesn't overflow horizontally */
    max-width: 100%;
    /* Simple Slide In */
    animation: fadeInLeft 1s ease-out 0.2s forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



.visual-horse {
    position: absolute;
    width: 300px;
    height: 280px;

    /* BACKGROUND IMAGE APPROACH */
    background-image: url('ASSETS/SVG/Horse 1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    /* Default transparent */

    /* We will use Filters or Masks if we need to change color dynamically */
    /* But since the SVGs might be single color, we can just filter hue-rotate if needed */
    /* For now, let's trust the SVG itself or colorize it via mask IF it works */

    /* REVERTING TO MASK for Color Control IF it works, otherwise use above */
    /* The Browser Test showed Mask failure. Let's use Mask again but with cleaner syntax or fallback */
    /* Actually, let's use the Background Blend Mode approach with the SVG as Mask */

    background-color: currentColor;
    -webkit-mask: url('ASSETS/Horse_1.png') no-repeat center;
    mask: url('ASSETS/Horse_1.png') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* ADD PATTERN ? */
    /* If mask works, background-image pattern works inside it. */
    /* If mask fails, we see nothing. */
    /* Browser test showed failure. Let's try just Background Image and CSS Filter for color? */
    /* BUT User wanted Pattern. */

    /* Alternative: Mask Image with Pattern Background */
    background-image: var(--pattern);
    background-size: 80px;
    background-blend-mode: multiply;
}

/* HORSE POSITIONS & COLORS */

/* Top Horse: Orange, moving right */
/* Top Horse: Orange */
.horse-top {
    top: 25%;
    left: -100px;
    background-color: var(--accent-orange);
    z-index: 1;
    transform: rotate(-10deg) scale(0.85);
    opacity: 0.9;
}

/* Middle Horse: Gold, Brightest */
.horse-middle {
    top: 40%;
    left: 50px;
    background-color: var(--accent-gold);
    /* Bright Gold updated */
    z-index: 10;
    transform: rotate(-5deg) scale(1);
    box-shadow: 0 0 30px rgba(249, 161, 27, 0.6);
    /* Glow effect attempt (won't work on mask directly but good intent) */
    filter: drop-shadow(0 0 10px rgba(249, 161, 27, 0.5));
    -webkit-mask: url('ASSETS/Horse_1.png') no-repeat center;
    mask: url('ASSETS/Horse_1.png') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Bottom Horse: Dark Red */
.horse-bottom {
    top: 60%;
    left: -50px;
    background-color: #580000;
    /* Very Dark Red */
    z-index: 5;
    transform: rotate(5deg) scale(0.9);
    filter: brightness(0.7);
    -webkit-mask: url('ASSETS/Horse_2.png') no-repeat center;
    mask: url('ASSETS/Horse_2.png') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ANIMATION: Slide In Left */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%) scale(0.8);
        opacity: 0;
    }

    to {
        transform: translateX(0) scale(1);
        /* Resets to base, but we have individual transforms */
        opacity: 1;
    }
}

/* We need to combine the animation with the specific transforms for each horse 
   Since we can't easily merge keyframes with static transforms without complex setup,
   we'll animate the LEFT property or use a wrapper if needed. 
   Simplest approach: Animate 'left' from off-screen.
*/

.visual-horse {
    /* ... existing styles ... */
    transition: all 1s ease-out;
    animation: horseSlideIn 1.5s ease-out forwards;
}

@keyframes horseSlideIn {
    0% {
        left: -400px;
        opacity: 0;
    }

    100% {
        opacity: 1;
        /* Left is determined by the specific class rules not the keyframe final state if we omit it here? 
           Actually, CSS animations override. We need separate animations or use 'transform: translateX' on top of rotation.
           Let's use a simple FROM state.
        */
    }
}

/* Better approach: Use margin-left or specific start points */
.horse-top {
    animation: slideInTop 1.2s ease-out forwards;
}

.horse-middle {
    animation: slideInMiddle 1.4s ease-out forwards;
}

.horse-bottom {
    animation: slideInBottom 1.6s ease-out forwards;
}

@keyframes slideInTop {
    from {
        left: -100%;
        opacity: 0;
    }

    to {
        left: -20px;
        opacity: 1;
    }
}

@keyframes slideInMiddle {
    from {
        left: -100%;
        opacity: 0;
    }

    to {
        left: 50px;
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        left: -100%;
        opacity: 0;
    }

    to {
        left: -50px;
        opacity: 1;
    }
}


/* --- GAME VIEW --- */
#game-view {
    display: none;
    height: 100%;
    width: 100%;
    /* Full screen viewport */
    flex-direction: column;
    overflow: hidden;
    /* Prevent body scroll */
}

#game-view.active {
    display: flex;
    animation: fadeIn 0.5s ease-out;
}

#game-view.racing-mode {
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 1s ease;
}

/* --- TOP SECTION (TRACK) --- */
#top-section {
    position: relative;
    flex: 1 1 auto;
    /* Allow shrink and grow */
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 120px 40px 20px 40px;
    /* Top clears header */
    overflow-y: auto;
    /* Scrollable */
    z-index: 1;
    height: auto;
    /* Let flex handle height */
    min-height: 225px;
    /* Ensure at least 2 tracks visible */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 100px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 100px, black 100%);
}

header {
    display: none;
    /* Hide header completely since logos/leaderboard are gone */
}

.track-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Changed from center to allow scroll */
    gap: 10px;
    /* Reduced from 15px */
    /* Spacing between tracks */
    min-height: 200px;
}

.empty-track-message {
    text-align: center;
    font-size: 1.5rem;
    opacity: 0.5;
    color: #FFD700;
    /* Center Vertically and Horizontally */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}




.track {
    scroll-margin-top: 150px;
    /* Buffer for fixed header + padding */
    flex-shrink: 0;
    /* Prevent squeezing */
    position: relative;
    height: 55px;
    /* Increased by 10% from 50px */
    margin-bottom: 5px;
    /* Reduced from 20px - Closer packing */
    background: rgba(255, 255, 255, 0.8);
    /* Increased opacity for legibility */
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Transition for entry */
    animation: slideInRight 0.3s ease;
    touch-action: pan-y;
    /* Allow vertical scroll, block horizontal for JS */
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* Ensure finish line is visible and red */
.finish-line {
    position: absolute;
    right: 10%;
    height: 100%;
    width: 1px;
    /* Thinner line */
    background: repeating-linear-gradient(to bottom,
            #9c1317,
            #9c1317 4px,
            transparent 4px,
            transparent 8px);
    z-index: 5;
    opacity: 100%;
}

.horse-runner {
    position: absolute;
    left: 10px;
    margin-left: 20px;
    /* Offset to not overlap number but also not hit name */
    width: 65px;
    height: 65px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: left 0.1s linear;
}

.horse-avatar {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url('ASSETS/Horse_1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.horse-runner.moving .horse-avatar {
    animation: wiggle 0.4s infinite ease-in-out;
}

@keyframes wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    75% {
        transform: rotate(-3deg);
    }
}


.horse-label {
    position: absolute;
    left: 20px;
    /* Left side */
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
    white-space: nowrap;
    font-size: 1.8rem;
    /* Reduced from 2.5rem */
    color: #9c1317;
    /* Brand Red */
    text-shadow: none;
    z-index: 5;
    font-family: 'DM Sans', sans-serif;
}

/* Duplicate .horse-runner removed */

.player-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align left */
    padding-left: 100px;
    /* Offset to start after horse */
    color: #9c1317;
    /* Primary Red */
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    /* Reduced */
    font-weight: 500;
    z-index: 1;
    /* Behind horse */
    pointer-events: none;
    text-shadow: none;
    background: none;
    box-shadow: none;
    margin: 0;
    transform: none;
    opacity: 0.2;
    /* Faint */
}

/* --- BOTTOM SECTION (CONTROLS) --- */
#bottom-section {
    position: relative;
    flex: 0 0 auto;
    /* Rigid height, do not shrink */
    width: 100%;
    z-index: 100;
    pointer-events: none;
    /* Let clicks pass through empty areas */
    background: transparent;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: none;
    left: auto;
    /* Reset left/transform centering since it's now in flow */
    transform: none;
}

#control-panel {
    pointer-events: auto;
    /* Re-enable clicks on panel */
    padding: 20px;
    padding-bottom: 50px;
    /* Increased for safe area */
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* RED BOX STYLE for Registration Panel -> NOW GOLD */
#panel-setup {
    background: #9c1317;
    /* Red Box */
    border-radius: 20px;
    padding: 30px 40px;
    /* Compact padding */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: var(--accent-gold);
    /* Gold Text */
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.panel.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

/* SETUP LAYOUT */
.setup-layout {
    display: flex;
    width: 100%;
    gap: 40px;
    text-align: left;
}

.registration-form {
    width: 100%;
    /* Full width since list is gone */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center content */
    text-align: center;
}

.registration-form h2 {
    color: 9c1317;
    /* Orange Title */
    margin-bottom: 5px;
    /* Reduced significantly */
    font-size: 3rem;
    font-family: 'Tobias', serif;
    font-weight: 300;
}

.input-group {
    display: flex;
    gap: 15px;
    /* slightly tighter */
    margin-bottom: 10px;
    /* Increased from 10px for better spacing with shadow */
    /* Reduced spacing */
    width: 100%;
    justify-content: center;
    max-width: 600px;
    /* Constrain width to match button below */
}

.button-row {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
    max-width: 600px;
    /* Align with input group */
}

#btn-start-race {
    width: 100%;
    /* Force full width */
    max-width: 100%;
    /* Ensure it fills the container */
}

input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 15px 25px;
    border: 2px solid transparent;
    border-radius: 50px;
    font-size: 1rem;
    font-family: 'DM Sans', sans-serif;
    color: #000;
    /* Black text */
    background: #ffffff;
    box-shadow: none;
    /* No shadow in reference */
    text-align: center;
}

input[type="text"]:focus {
    border-color: var(--accent-gold);
    outline: none;
}

.hint {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1rem;
    color: #FFD700;
    opacity: 0.8;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 1px;
}

.player-list-container {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    /* Darker background for list inside red box */
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.player-list-container h3 {
    font-size: 1rem;
    color: var(--accent-gold);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
}

#player-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    max-height: 120px;
    margin-bottom: 15px;
}

#player-list li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
}

.horse-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-gold);
    /* Gold dots */
}

/* BUTTONS */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.1s;
    /* Centering */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#btn-join,
.btn.primary,
.btn.secondary,
#btn-rematch {
    background: var(--accent-gold);
    color: #8B0000;
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 5px 15px rgba(249, 161, 27, 0.4);
    text-transform: uppercase;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    min-width: 100px;
}



.button-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Gap between buttons */
    margin-top: 5px;
}

#panel-finished .button-row {
    max-width: 100%;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.leaderboard-title {
    margin: 0;
    /* Remove default margin */
}

.btn-reset-lb {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    text-decoration: underline;
    /* Underscore style */
    opacity: 0.8;
    transition: opacity 0.2s;
    padding: 0 5px;
    z-index: 100;
    pointer-events: auto;
    position: relative;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 1px;
}

.btn-reset-lb:hover {
    opacity: 1;
    color: #fff;
}

#btn-rematch,
#btn-reset {
    flex: auto;
    /* Content-based width + growth */
    min-width: 0;
    /* Allow shrinking if needed */
    white-space: nowrap;
    /* Prevent line break */
}

#btn-join:hover,
.btn.primary:hover,
.btn.secondary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(249, 161, 27, 0.6);
    /* Gold glow like intro */
    background: #FFD700;
    /* Keep red background */
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #000000;
    /* Deeper Grey */
    color: #9c1317;
    /* Lighter text for contrast */
    box-shadow: none;
    transform: none;
}

.full-width {
    width: 100%;
}

/* RESULTS */
#panel-finished {
    background: #9c1317;
    color: var(--accent-gold);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

#panel-finished h2 {
    font-size: 2rem;
    color: var(--accent-orange);
    margin-bottom: 10px;
    font-family: 'Tobias', serif;
    font-weight: 300;
}

.winner-subtitle {
    font-size: 1.2rem;
    color: #FFD700;
    margin-bottom: 20px;
    font-family: 'DM Sans', sans-serif;
    opacity: 0.9;
}

.race-results-container {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    margin: 0 auto 20px auto;
    max-height: 200px;
    overflow-y: auto;
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'DM Sans', sans-serif;
    color: var(--white);
    font-size: 1rem;
}

.result-row.winner {
    background: rgba(210, 31, 31, 0.1);
    color: #FFD700;
    font-weight: bold;
}

.result-rank {
    font-weight: bold;
    margin-right: 10px;
    min-width: 25px;
}

.result-name {
    flex: 1;
    text-align: left;
}

.track.dimmed {
    opacity: 0.4;
    transition: opacity 1s ease;
}

/* ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* HICCUPS */
.hiccup-bubble {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 15px;
    background: white;
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 20;
    border: 1px solid #ddd;
}

/* Chat bubble arrow */
.hiccup-bubble::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

/* Winner Glow Animation */
@keyframes winnerGlowPulse {
    0% {
        box-shadow: 0 0 10px rgba(249, 161, 27, 0.5), inset 0 0 10px rgba(249, 161, 27, 0.2);
        border-color: rgba(249, 161, 27, 0.8);
    }

    50% {
        box-shadow: 0 0 30px rgba(249, 161, 27, 1), inset 0 0 20px rgba(249, 161, 27, 0.5);
        border-color: #fff;
    }

    100% {
        box-shadow: 0 0 10px rgba(249, 161, 27, 0.5), inset 0 0 10px rgba(249, 161, 27, 0.2);
        border-color: rgba(249, 161, 27, 0.8);
    }
}

.winner-glow {
    /* Track glow - kept subtle */
    box-shadow: 0 0 15px rgba(249, 161, 27, 0.4);
    border-color: rgba(249, 161, 27, 0.6);
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
}

/* Specific Horse Glow */
.winner-glow .horse-avatar {
    filter: drop-shadow(0 0 8px #FFD700) drop-shadow(0 0 15px #FFA500);
    animation: horsePulse 1s infinite alternate;
}

@keyframes horsePulse {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 8px #FFD700);
    }

    to {
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px #FFD700) drop-shadow(0 0 25px #FFA500);
    }
}

/* Leaderboard */
.leaderboard-container {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 12px;
    width: 100%;
    margin-top: 15px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-title {
    color: var(--accent-gold);
    font-family: 'Tobias', serif;
    font-size: 1.2rem;
    margin-bottom: 0;
    /* Reset margin for specific alignment */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.promo-link {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--accent-gold);
    font-family: 'DM Sans', sans-serif;
    text-align: center;
    width: 100%;
    opacity: 0.9;
}

.promo-link a {
    color: var(--accent-gold);
    text-decoration: underline;
    font-weight: bold;
}

/* Intro List Styling */
.instruction-list {
    text-align: left;
    padding-left: 25px;
    margin-top: 10px;
    line-height: 1.6;
    color: var(--accent-gold);
    list-style-type: decimal;
    /* Ensure numbers appear */
    list-style-position: inside;
    /* Try inside to ensure visibility if padding issues */
}

.instruction-list li {
    margin-bottom: 10px;
    font-family: 'DM Sans', sans-serif;
}

.instruction-list li {
    margin-bottom: 10px;
    font-family: 'DM Sans', sans-serif;
}

/* Force numbered list */
.instruction-list {
    list-style-type: decimal !important;
    padding-left: 40px;
    /* Ensure space for numbers */
}

.instruction-list li {
    display: list-item;
    /* Reset display if overridden */
    list-style-position: outside;
}

/* RESPONSIVE: Stack Setup Form on Mobile */
@media (max-width: 480px) {
    .input-group {
        flex-direction: column;
        gap: 15px;
        /* Increased from 10px to match regular gap */
    }

    .input-group input[type="text"],
    .input-group .btn {
        width: 100%;
        max-width: 100%;
    }

    #btn-join {
        width: 100%;
        /* Ensure Join button fills width */
    }
}

/* CONFETTI */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    z-index: 1000;
    pointer-events: none;
    animation: confettiFall 3s linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* MODAL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: #9c1317;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    border: 1px solid var(--accent-gold);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-content h2 {
    color: var(--accent-gold);
    font-family: 'Tobias', serif;
    font-size: 2rem;
    margin-bottom: 10px;
}

.modal-content p {
    color: var(--white);
    margin-bottom: 25px;
    font-size: 1.1rem;
    font-family: 'DM Sans', sans-serif;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}