/* Roulette Page Specific Styles */
.roulette-page-container {
    background: linear-gradient(135deg, var(--purple-start), var(--purple-end));
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.3);
    /* Centering is handled by flex on the container in HTML */
}

#game-status-message { /* Now a subtitle */
    font-size: 0.9rem; /* Smaller text */
    color: #9ca3af; /* Tailwind gray-400 */
}

/* Minimalist Bar View Styles */
#minimalist-roulette-bar-area {
    border: 2px solid var(--gold);
    background-color: var(--dark-gradient-start);
    /* Ensure it's a positioning context for overlays */
    position: relative; 
}

#minimalist-roulette-strip .minimalist-segment {
    width: 60px; /* Width of each color segment */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 1.2em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
#minimalist-roulette-strip .minimalist-segment.red { background-color: #FF0000; }
#minimalist-roulette-strip .minimalist-segment.black { background-color: #333333; }
#minimalist-roulette-strip .minimalist-segment.green { background-color: #008000; }

.minimalist-pointer {
    box-shadow: 0 0 5px var(--gold);
}

/* Overlay for Winning Number and Timer */
#roulette-overlay-info {
    /* Default to visible, JS will handle opacity for fade */
    opacity: 1; 
    pointer-events: none; /* Allow clicks to pass through if needed, though not much to click under */
}
#roulette-overlay-info.hidden-fade {
    opacity: 0;
}


#winning-number-display {
    /* Sizing and centering already in HTML via Tailwind */
    border: 4px solid var(--gold);
    transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
#winning-number-display.bg-gray-700 { background-color: #374151; color: white; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
#winning-number-display.bg-green-500 { background-color: #22c55e; color: white; box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 15px #22c55e; }
#winning-number-display.bg-red-600 { background-color: #dc2626; color: white; box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 0 15px #dc2626; }
#winning-number-display.bg-black { background-color: #1f2937; color: white; box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 15px #333; }

#round-timer {
    /* Styling via Tailwind in HTML */
}

/* History and Summary */
#roulette-history .history-item {
    width: 30px; /* Slightly smaller */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem; /* Slightly smaller */
    font-weight: bold;
    margin: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
}
#roulette-history .history-item.bg-green-500 { background-color: #22c55e; color: white; }
#roulette-history .history-item.bg-red-600 { background-color: #dc2626; color: white; }
#roulette-history .history-item.bg-black { background-color: #1f2937; color: white; }

#roulette-summary-last-100 {
    /* Styling is now more granular via Tailwind in HTML and specific classes if needed */
}

.summary-ball {
    display: inline-block;
    width: 10px; /* Small ball size */
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2); /* Subtle border for definition */
}
.summary-ball-red { background-color: #dc2626; } /* Tailwind red-600 */
.summary-ball-green { background-color: #22c55e; } /* Tailwind green-500 */
.summary-ball-black { background-color: #1f2937; } /* Tailwind gray-800 (used for black in history items) */


/* Bet Suggestions */
.bet-suggestion {
    padding: 8px 5px; /* Adjust padding for smaller buttons */
}

/* Input with Clear Button - Styles Removed as button is now outside */


/* Per-Color Betting Sections */
.place-bet-on-color.casino-button-black {
    background: #1F2937; 
    color: white;
    border: 1px solid #4b5563; 
}
.place-bet-on-color.casino-button-black:hover {
    background: #374151; 
}

.bets-list {
    /* casino-input and bg-gray-800 provide base styling */
    /* Height and overflow handled in HTML */
    width: 100%;
}
.bets-list .player-bet-item {
    display: flex;
    align-items: center;
    padding: 4px 2px;
    border-bottom: 1px solid #4b5563; /* Tailwind gray-600 */
    font-size: 0.8rem;
}
.bets-list .player-bet-item:last-child {
    border-bottom: none;
}
.bets-list .player-bet-item img {
    width: 24px; /* Smaller profile pic */
    height: 24px;
    border-radius: 50%;
    margin-right: 6px;
    border: 1px solid var(--gold);
}
.bets-list .player-bet-item .username {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
}
.bets-list .player-bet-item .bet-amount {
    font-weight: bold;
    color: var(--gold);
}

.roulette-strip-dimmed {
    filter: blur(1.5px) grayscale(70%);
    transition: filter 0.3s ease-in-out;
}