/* Basic styling for the Sniper Poker site. This file mirrors the provided
   "style (1).css" but uses a conventional filename. */

body {
    /* A poker-themed background image for the lobby.  The image
       poker_bg.png is included in the repository and provides a
       green felt table with chips.  Use a fixed background so it
       fills the viewport on all screen sizes. */
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #0a561d url('poker_bg.png') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    min-height: 100vh;
}

.screen {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

h1 {
    margin-top: 0;
    font-size: 2.2rem;
}

.description {
    margin-bottom: 20px;
    font-size: 0.9rem;
    /* Lighten the description text for better contrast on dark backgrounds */
    color: #ddd;
}

.lobby-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.join-area {
    display: flex;
    gap: 5px;
}

input[type="text"], input[type="number"] {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* Make inputs stand out on the dark lobby overlay */
    background: rgba(255, 255, 255, 0.9);
    color: #333;
}

button {
    /* Increase padding and border for a more substantial feel.  Use a
       green gradient reminiscent of poker tables and a subtle shadow
       for depth. */
    padding: 8px 16px;
    font-size: 1rem;
    border: 2px solid #352d1b;
    border-radius: 6px;
    background: linear-gradient(180deg, #377e22, #234d17);
    color: #f8f3e8;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button:not(:disabled):hover {
    background: linear-gradient(180deg, #408c27, #2a5a1a);
}

button:active:not(:disabled) {
    /* Create a pressed effect on click */
    transform: translateY(1px);
}

/* Special styling for the call time button to stand out with a
   cautionary red tone. */
#callTimeBtn {
    background: linear-gradient(180deg, #b33a3a, #7a2b2b);
    border-color: #571a1a;
}
#callTimeBtn:not(:disabled):hover {
    background: linear-gradient(180deg, #c24444, #8a3030);
}

/* When the actual game area is visible, revert text to dark for
   better contrast on the default white card backgrounds. */
#game {
    color: #333;
}

.status {
    margin-top: 15px;
    /* Use a warmer red for the status message against the green felt */
    color: #ff6347;
}

/* Lobby overlay container to improve readability against the busy poker
   table background.  It wraps the lobby controls and instructions. */
.lobby-overlay {
    background: rgba(0, 0, 0, 0.6);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 800px;
    margin: 40px auto;
}

/* Instructions section styling */
.instructions {
    text-align: left;
    margin-top: 20px;
    color: #eee;
    font-size: 0.85rem;
    line-height: 1.4;
}

.instructions h3 {
    margin-top: 15px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.1rem;
}

.instructions ul {
    margin-left: 20px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.instructions li {
    margin-bottom: 5px;
}

#statusBar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Hide old player/comm/hole areas since the new table UI will replace them */
#playersArea,
#communityArea,
#holeArea {
    display: none;
}

/* Container for the poker table that keeps the oval centred and responsive */
#tableWrapper {
    position: relative;
    max-width: 800px;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    /* Add some margin below to separate from controls */
    margin-bottom: 20px;
}

/* The oval poker table graphic */
#pokerTable {
    position: relative;
    width: 100%;
    height: 100%;
    /* Use a radial gradient to simulate the felt surface with a darker
       rim and a lighter centre, similar to professional poker tables. */
    background: radial-gradient(circle at center, #248a3b 0%, #0b4f23 60%, #052813 100%);
    /* Apply a subtle inner shadow to emphasize the padded rail and a white
       outer ring to mimic the highlight seen in the reference image. */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border: 8px solid #1a1a1a;
    /* Remove the white outer ring; keep only an inner shadow for depth. */
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.6);
    overflow: hidden;
}

/* Community cards area positioned in the centre of the table */
.community-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 6px;
    z-index: 1;
}
.community-card {
    width: 50px;
    height: 70px;
    border: 1px solid #999;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    background: #fff;
    color: #333;
}

/* Seat representing a player around the table */
/* Player seat container: holds cards and the player info bar.  It is
   positioned absolutely around the table ellipse.  Increase the
   default width to allow space for the avatar, name and chips. */
.player-seat {
    position: absolute;
    width: 140px;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* highlight active player's seat */
.player-seat.current-turn {
    box-shadow: 0 0 0 3px #007bff;
    border-radius: 6px;
}
.player-seat.folded {
    opacity: 0.4;
}
.player-seat.eliminated {
    opacity: 0.2;
}

/* Cards within each seat */
/* Cards for each player.  Increase card size slightly for better
   readability on the larger seat.  Cards appear above the info bar. */
.player-seat .cards {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}
.player-seat .cards .card {
    width: 38px;
    height: 56px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}
.player-seat .cards .card.back {
    background: #444;
    border-color: #666;
    color: transparent;
}

/* Player info (name and chips) */
/* Player info bar styled to resemble the dark panels in the reference
   image.  It contains an avatar and two lines for name and chips. */
.player-seat .player-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 3px 6px;
    min-height: 32px;
    width: 100%;
}
.player-seat .player-info .avatar {
    width: 22px;
    height: 22px;
    position: relative;
    flex-shrink: 0;
}
/* Draw a simple person icon using pseudo-elements: a head (circle) and a torso.
   This provides a clearer avatar representation than a plain circle. */
.player-seat .player-info .avatar::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}
.player-seat .player-info .avatar::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 3px;
    width: 16px;
    height: 8px;
    border-radius: 8px 8px 4px 4px;
    background: #fff;
}
.player-seat .player-info .details {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.player-seat .player-info .details .name {
    font-weight: bold;
    font-size: 0.75rem;
}
.player-seat .player-info .details .chips {
    font-size: 0.7rem;
    color: #ccc;
}

/* Bet display with chip icon */
/* Bet stack representation: show coloured chip icons for each unit bet (up to 5).
   These stacks appear just below the cards, mimicking chip piles on the table. */
.player-seat .bet {
    margin-top: 2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-height: 0;
}
/* The single chip icon representing a bet.  A gold-coloured circle
   accompanied by a numeric value indicates the size of the bet. */
.player-seat .bet .chip-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffe066 0%, #f2a900 60%, #c58d00 100%);
    border: 1px solid rgba(0,0,0,0.3);
    display: inline-block;
}

/* Ensure action area and message area are spaced relative to table */
#actionArea {
    margin-top: 10px;
}
#messageArea {
    margin-top: 10px;
    /* Display all game messages (timers, outcomes, etc.) in white for visibility */
    color: #fff;
}

.players-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.player {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    min-width: 120px;
    text-align: left;
    font-size: 0.9rem;
    position: relative;
}

.player.current-turn {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
}

.player.folded {
    opacity: 0.5;
}

.card-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.card {
    width: 50px;
    height: 70px;
    border: 1px solid #999;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    background: #fff;
}

.card.hidden {
    background: #d0d0d0;
    color: #d0d0d0;
}

/* Display snipe declarations in white text for visibility */
.snipes-display {
    color: #fff;
}

/* Hide the status bar at the top as it is no longer needed */
#statusBar {
    display: none;
}

/* Centered pot display beneath the community cards */
.pot-center {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0,0,0,0.7);
    pointer-events: none;
}

.action-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.message-area {
    margin-top: 20px;
    min-height: 40px;
    font-size: 0.95rem;
    /* Show messages (e.g., snipes, outcomes) in white for contrast on dark backgrounds */
    color: #fff;
}