/* mainc.css */

/* --- Root Variables & Basic Setup --- */
:root {
    --bg-color: #006400;
    --card-color: #d3d3d3;
    --text-color: #000000;
    --gold-color: #ffd700;
    --green-color: #008000;
    --red-color: #dc3545;
    --border-color: #000000;
    --button-base: #f0f0f0;
    --button-shadow: #888;
    --button-highlight: #fff;
    --button-text: #000;
    --flash-green: rgba(0, 255, 0, 0.7);
    --flash-red: rgba(255, 0, 0, 0.7);
}


body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none; user-select: none;

    /* Prevent accidental zooming on mobile */
    touch-action: manipulation;
    -ms-touch-action: manipulation;

    /* Prevent horizontal scrolling */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: border-box;
}

#player-info-header {
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: var(--card-color);
    color: var(--text-color);
    padding: 10px; border-bottom: 2px solid var(--border-color);
    text-align: center; font-size: 1.1rem; font-weight: bold;
    z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.container {
    width: 100%; max-width: 600px;
    min-width: 280px; /* Minimum width for mobile */
    display: flex; flex-direction: column;
    gap: 15px; margin: 0 auto;
    padding: 5px; padding-top: 10px; /* Minimal top padding */
}

.card {
    background-color: var(--card-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 5px; /* Minimal padding */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.hidden { display: none !important; }

/* --- Player Box Styles --- */
.player-box {
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Tighter gaps */
}

.betting-area {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax prevents overflow */
    gap: 8px;
    width: 100%; /* Ensure full width */
}

.bet-item {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0; /* Allow flex children to shrink properly */
}

.bet-combo-button {
    flex-grow: 1;
    flex-shrink: 1; /* Allow shrinking to fit */
    min-width: 0; /* Allow to shrink below content size */
    padding: 5px;
    font-size: 1.1rem; /* Combo text size */
    height: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;
    line-height: 1.1; /* Adjust line height */
}

.combo-odds-text {
    font-size: 1.4rem; /* Larger font for just the number */
    color: var(--green-color);
    font-weight: bold;
}


/* Base for all buttons in the player box */
.bet-combo-button, .bet-amount-control button, #ready-button {
    background-color: var(--button-base);
    border: 1px solid var(--button-text);
    border-radius: 5px;
    box-shadow: inset -1px -1px 0px var(--button-shadow), inset 1px 1px 0px var(--button-highlight);
    font-weight: bold;
    color: var(--button-text);
    cursor: pointer;
    position: relative;
    z-index: 1;

    /* Prevent double-tap zoom on buttons */
    touch-action: manipulation;
    overflow: hidden;
}
.bet-combo-button:active, .bet-amount-control button:active, #ready-button:active {
    box-shadow: inset 1px 1px 0px var(--button-shadow), inset -1px -1px 0px var(--button-highlight);
    transform: translateY(1px);
}
.bet-combo-button:disabled, .bet-amount-control button:disabled, #ready-button:disabled {
    background: #bbb;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
    border-color: #999;
}




/* Bet Amount Control Styles */
.bet-amount-control {
    border-top: 2px solid #888;
    padding-top: 10px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.bet-amount-control h3 {
    text-align: center;
    margin: 0 0 5px 0;
}

.amount-button-row {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: 90px;
}
.amount-button-row button {
    flex-grow: 1;
    font-size: 1.2rem;
    padding: 2px;
    height: 30px;
}
/* Vintage 7-Segment Display Styles */
.seven-segment-display {
    display: flex;
    background: #1a0f0a;
    border: 3px solid #4a3428;
    border-radius: 6px;
    padding: 6px 8px;
    height: 60px;
    gap: 4px;
    box-sizing: border-box;
}

.digit-7seg {
    position: relative;
    width: 32px;
    height: 100%;
    background: #1a0f0a;
}

.segment {
    position: absolute;
    background: #331a0d;
    border-radius: 2px;
}

.segment.active {
    background: #ff8800;
    box-shadow: 0 0 8px #ff6600, inset 0 0 4px #ffaa33;
}

/* Fixed segment positions - vintage proportions */
.segment-0 { /* top */
    top: 3px;
    left: 6px;
    width: 20px;
    height: 4px;
}

.segment-1 { /* top-right */
    top: 6px;
    right: 3px;
    width: 4px;
    height: 22px;
}

.segment-2 { /* bottom-right */
    bottom: 6px;
    right: 3px;
    width: 4px;
    height: 18px;
}

.segment-3 { /* bottom */
    bottom: 3px;
    left: 6px;
    width: 20px;
    height: 4px;
}

.segment-4 { /* bottom-left */
    bottom: 6px;
    left: 3px;
    width: 4px;
    height: 22px;
}

.segment-5 { /* top-left */
    top: 6px;
    left: 3px;
    width: 4px;
    height: 18px;
}

.segment-6 { /* middle */
    top: 50%;
    left: 6px;
    width: 20px;
    height: 4px;
    transform: translateY(-50%);
}

.bet-amount-control .seven-segment-display {
    width: 120px;
}

/* Flash animation for insufficient funds */
.segment-flash-error {
    animation: flashAmberToRed 0.4s ease-in-out infinite;
}

@keyframes flashAmberToRed {
    0% {
        background: #ff8800;
        box-shadow: 0 0 8px #ff6600, inset 0 0 4px #ffaa33;
    }
    50% {
        background: #ff2200;
        box-shadow: 0 0 8px #ff0000, inset 0 0 4px #ff4444;
    }
    100% {
        background: #ff8800;
        box-shadow: 0 0 8px #ff6600, inset 0 0 4px #ffaa33;
    }
}

/* Flash animation for winning bets */
.segment-flash-win {
    animation: flashAmberToGreen 0.4s ease-in-out infinite;
}

@keyframes flashAmberToGreen {
    0% {
        background: #ff8800;
        box-shadow: 0 0 8px #ff6600, inset 0 0 4px #ffaa33;
    }
    50% {
        background: #00ff00;
        box-shadow: 0 0 8px #00ff00, inset 0 0 4px #88ff88;
    }
    100% {
        background: #ff8800;
        box-shadow: 0 0 8px #ff6600, inset 0 0 4px #ffaa33;
    }
}

/* Flash animation for winning combo button */
.button-flash-win {
    animation: buttonFlashGreen 0.4s ease-in-out infinite;
}

@keyframes buttonFlashGreen {
    0% {
        background: var(--button-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        background: #00ff00;
        box-shadow: 0 0 12px #00ff00, 0 4px 8px rgba(0, 255, 0, 0.5);
    }
    100% {
        background: var(--button-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Ready Button Style */
#ready-button {
    margin-top: 15px;
    padding: 12px;
    font-size: 1.2rem;
    width: 100%;
    background-color: var(--green-color);
    color: white;
    border-color: #004d00;
}
#ready-button:disabled {
    background: #5a8c5a !important;
    color: #ccc !important;
    border-color: #4a754a !important;
}


/* Styles for initial menu */
.menu-button { font-size: 1.2rem; padding: 12px; }
input[type="text"] { margin-bottom: 10px; width: calc(100% - 20px); padding: 8px; font-size: 1rem; }
.name-input-container { padding: 10px 0; }

/* Styles for the player options container */
#player-options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
}
.options-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1rem;
}
.options-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}


/* --- SPECTATOR VIEW STYLES --- */
.spectator-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    margin: 0 auto;
    overflow: hidden;
}

#race-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.panel {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 2px solid var(--gold-color);
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
}

.panel-race-info {
    top: 80px;
    left: 30px;
    width: 250px;
    height: 500px;
}

.panel-horse-form {
    top: 60px;
    right: 15px;
    width: 280px;
    height: 500px;
}

.horse-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.horse-form-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.horse-form-item strong {
    min-width: 200px;
    flex-shrink: 0;
}
.horse-form-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.horse-form-stats p {
    margin: 0;
    font-size: 1rem;
}

.panel-odds-display {
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    background: none;
    border: none;
    padding: 0;
}
.panel-odds-display h2 { display: none; }

.odds-grid-spec {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    text-align: center;
}

.odds-item-spec {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--gold-color);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80px;
}
.odds-combo-text { font-size: 2rem; color: var(--gold-color); }
.odds-payout-text { font-size: 2.5rem; color: white; font-weight: bold; }

.panel-race-timer {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 400px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--gold-color);
    border-radius: 10px;
    white-space: nowrap;
}

.back-to-bet-button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    background: var(--button-base);
    color: var(--button-text);
    border: 2px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.back-to-bet-button:hover {
    background: var(--button-highlight);
}

.how-to-play-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: var(--button-base);
    color: var(--button-text);
    border: 2px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.how-to-play-button:hover {
    background: var(--button-highlight);
}

#action-buttons-container {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.action-button {
    flex: 1;
    padding: 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quit-button {
    background: #dc3545;
    color: white;
}

.quit-button:hover {
    background: #c82333;
}

.spectate-button {
    background: var(--gold-color);
    color: var(--text-color);
}

.spectate-button:hover {
    background: #e6c200;
}


.panel-player-boxes {
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1800px;
    height: auto;
    min-height: 280px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.player-box-spec {
    background: var(--card-color);
    color: var(--text-color);
    border: 1px solid black;
    border-radius: 8px;
    padding: 10px;
    width: 180px;
    height: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.player-box-spec h3 {
    font-size: 1.2rem;
    margin: 0;
    text-align: center;
}
.player-box-spec .player-type {
    font-size: 0.8rem;
    font-weight: normal;
    color: #555;
    margin: 2px 0 2px 0;
}
.player-box-spec .player-funds {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 8px 0;
}
.player-box-spec .player-bets-container {
    width: 100%;
    text-align: left;
    margin-top: 5px;
    border-top: 1px solid #888;
    padding-top: 5px;
    flex-grow: 1;
    overflow-y: auto;
}
.player-box-spec .player-bets-container h4 {
    margin: 0 0 5px 0;
    text-align: center;
    font-size: 0.9rem;
}
.player-box-spec .player-bets-container div {
    margin-bottom: 2px;
    font-size: 0.8rem;
}


.panel-winners-banner {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gold-color);
    color: var(--text-color);
    padding: 10px 40px;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 15px;
    display: none;
}

/* --- ACCESSIBILITY SCANNER STYLES --- */
.scanner-highlight::before {
    content: '';
    position: absolute;
    top: -3px; 
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background: linear-gradient(135deg, #DA70D6, #9400D3);
    border-radius: 8px;
    z-index: -1;
    animation: scannerGlowPulse 1.5s infinite ease-in-out;
}

.scanner-timeout {
    animation: scannerFlashRed 0.4s 3;
}

@keyframes scannerGlowPulse {
    0% {
        transform: scale(1.0);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 1.0;
    }
    100% {
        transform: scale(1.0);
        opacity: 0.7;
    }
}

@keyframes scannerFlashRed {
    0%, 100% {
        outline: 4px solid var(--red-color) !important;
        box-shadow: 0 0 15px 5px var(--red-color);
    }
    50% {
        outline: none !important;
        box-shadow: none;
    }
}

/* --- Flair animations --- */
.flash-win::after, .flash-lose::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 8px;
    pointer-events: none;
}

.flash-win {
    animation: flashGreen 0.7s infinite;
}

.flash-lose {
    animation: flashRed 0.7s infinite;
}

.odds-winner {
    animation: flashGold 0.8s infinite;
}

@keyframes flashGreen {
    0% { background-color: transparent; }
    50% { background-color: var(--flash-green); }
    100% { background-color: transparent; }
}

@keyframes flashRed {
    0% { background-color: transparent; }
    50% { background-color: var(--flash-red); }
    100% { background-color: transparent; }
}

/* --- THIS IS THE FIX: Added background color flash --- */
@keyframes flashGold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
        border-color: var(--gold-color);
        background-color: rgba(0, 0, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.4);
        border-color: white;
        background-color: rgba(128, 128, 128, 0.6); /* Flash to gray */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        border-color: var(--gold-color);
        background-color: rgba(0, 0, 0, 0.8);
    }
}

/* Modal popup styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: var(--card-color);
    border: 3px solid var(--gold-color);
    border-radius: 15px;
    width: 95%;
    max-width: 500px;
    height: 90vh;
    height: 90dvh; /* Dynamic viewport height - excludes mobile browser UI */
    max-height: 900px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    position: relative;
}

/* Mobile: use nearly full screen */
@media (max-width: 600px) {
    .modal-content {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border: none;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid var(--border-color);
    background-color: var(--gold-color);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-color);
    font-size: 1.4rem;
}

.close-modal {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color);
    cursor: pointer;
    padding: 0 10px;
}

.close-modal:hover {
    color: var(--red-color);
}

#popup-betting-container {
    width: 100%;
    height: 100%; /* NO HEADER - FULL HEIGHT! */
    padding: 0;
    margin: 0;
}

#popup-betting-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media (max-width: 600px) {
    #popup-betting-container iframe {
        border-radius: 0;
    }
}

/* Make clickable player boxes more obvious */
.player-box-spec[style*="cursor: pointer"]:hover {
    background-color: rgba(255, 215, 0, 0.1);
    transform: scale(1.02);
    transition: all 0.2s ease;
}

/* Neon Sign Style for KaJiggers Label */
.neon-sign {
    font-family: 'Brush Script MT', cursive, 'Lucida Handwriting', fantasy;
    font-size: 2.4rem;
    font-weight: 900;
    text-align: center;
    margin: 10px 0;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
}

.neon-letter {
    color: #cc6600;
    text-shadow:
        0 0 2px rgba(255, 136, 0, 0.3),
        0 0 4px rgba(255, 102, 0, 0.2);
    transition: color 0.1s, text-shadow 0.1s;
}

.neon-letter.neon-off {
    color: #331a0d;
    text-shadow: none;
}

.neon-letter.neon-flash {
    color: #ff8800;
    text-shadow:
        0 0 4px rgba(255, 136, 0, 0.6),
        0 0 8px rgba(255, 102, 0, 0.4);
}