/*
Template Name: litterbox
Author: Wade Nolan
Email: litterbox@wadenolan.net
File: literbox.css
*/
.fixed-hand-container {
    /* KEY: Fixes the container to the browser viewport */
    position: fixed; 
    bottom: 0; /* Aligns to the bottom edge */
    left: 0; 
    width: 100%; /* Spans the full width of the viewport */
    
    background-color: rgba(0, 0, 0, 0.3);; /* Dark background for the hand area */
    padding: 15px 0;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.4);
    z-index: 999; /* Ensure it stays above all other content */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fixed-bgcard-container {
    /* KEY: Fixes the container to the browser viewport */
    position: fixed; 
    bottom: 0; /* Aligns to the bottom edge */
    left: 0; 
    width: 100%; /* Spans the full width of the viewport */

    padding: 15px 0;
    z-index: 900; /* Ensure it stays above all other content */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hand-background-card {
    /* KEY: Absolute positioning within the fixed container */
    position: absolute; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--card-image-url, url('../../card_back/CardBaxBottom.png')); 
    
    /* Make it span the full width and height of its parent */
    top: -283px;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    
    width: 125px; /* Adjust this to control how wide the card is */
    height: 175px; /* Adjust this to control how tall the card is */
    
    border-radius: 12px;
    
    /* KEY: Put it behind the other elements (status and hand-cards-wrapper) */
    z-index: 1; 
}

.hand-background-card:hover {
    top: -400px;
    
    width: 250px; /* Adjust this to control how wide the card is */
    height: 350px; /* Adjust this to control how tall the card is */
}

/* --- 2. Card Wrapper (For Centering) --- */
.hand-cards-wrapper {
    /* Uses Flexbox to arrange and center the cards */
    z-index: 3;
    display: flex;
    justify-content: center; /* Horizontally centers the group of cards */
    align-items: flex-end; /* Aligns cards to the bottom of the wrapper */
    width: 100%;
}
.hand-cards-status {
    text-align: center;
    margin-bottom: -35px;
    padding-bottom: 10px;
    z-index: 3; 
}

/* Base styling for all remote cards */
/* 1. Base Card Styles (Ensure position: relative is set) */
.lb-remote-card {
    /* Existing base styles */
    width: 100px; 
    height: 140px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
    margin: 5px;
    /* KEY: This allows the bubble to be positioned relative to the card */
    position: relative; 
    
    /* Hide the original number content inside the card */
    color: transparent; 
}

/* 2. Styles for the Count Bubble (using ::before) */
.lb-remote-card::before {
    /* KEY: The number from the HTML (e.g., '5') is placed here */
    content: attr(data-count); 
    
    /* KEY: Positions the bubble relative to the card */
    position: absolute; 
    top: -10px; /* Adjust vertical position */
    right: -10px; /* Adjust horizontal position */
    
    /* Bubble appearance */
    background-color: #ff4757; /* Red bubble background */
    color: white; /* White text color */
    font-weight: bold;
    font-size: 0.9em;
    
    /* Sizing and Shape */
    min-width: 24px; /* Ensures bubble is big enough for 1-9 */
    height: 24px;
    line-height: 24px; /* Centers the text vertically */
    text-align: center;
    border-radius: 50%; /* Makes it a circle/bubble */
    border: 2px solid white; /* Optional: adds a white border */
    z-index: 10; /* Ensures the bubble sits above other elements */
    
    /* Re-show the content color */
    color: white;
}

.lb-remote-card[data-count="0"] {
    /* The crucial properties to make the card disappear */
    content: none; 
    visibility: hidden; 
    height: 0px;
    width: 0px;
    
}

.lb-remote-card[data-count="no"]::before {
    /* The crucial properties to make the card disappear */
    content: none; 
    visibility: hidden; 
    
}

/* Specific background images for each color */
.lb-remote-card.red {
    background-image: url('../../cards/Red.png'); 
}

.lb-remote-card.red::before {
    background-color: #ff4757; /* A vibrant red */
}

.lb-remote-card.orange {
    background-image: url('../../cards/Orange.png'); 
}

.lb-remote-card.orange::before {
    background-color: #ffa502; /* A vibrant orange */
}

.lb-remote-card.yellow {
    background-image: url('../../cards/Yellow.png'); 
}

.lb-remote-card.yellow::before {
    background-color: #dbc200; /* A vibrant yellow */
}

.lb-remote-card.green {
    background-image: url('../../cards/Green.png'); 
}

.lb-remote-card.green::before {
    background-color: #00ac48; /* A vibrant green */
}

.lb-remote-card.blue {
    background-image: url('../../cards/Blue.png'); 
}

.lb-remote-card.blue::before {
    background-color: #1ed2ff; /* A vibrant blue */
}

.lb-remote-card.purple {
    background-image: url('../../cards/Purple.png'); 
}

.lb-remote-card.purple::before {
   background-color: #c800cf; /* A vibrant purple */
}

.lb-remote-card.pink {
    background-image: url('../../cards/Pink.png'); 
}

.lb-remote-card.pink::before {
    background-color: #ff71ac; /* A vibrant purple */
}

.lb-remote-card.red {
    background-image: url('../../cards/Red.png'); 
}

.card-body.opp-hand {
    text-align: center;
}

.card:has(.card-body.opp-hand.selected) {
    border-image: linear-gradient(to right, #ff0000 0%,#ffee00 20%,#00ff0d 40%,#0011ff 60%,#ff00f2 80%, #ff0000 80%) 1; /* Yellow border for selection */
    transform: scale(1.05);
    box-shadow: 0 0 40px #00ffea;
}

.lb-remote-card.steal {
    background-image: url('../../cards/Steal.png'); 
    width: 116px; 
    height: 161px;
}

.lb-remote-card.score {
    background-image: url('../../cards/Score.png'); 
    width: 116px; 
    height: 161px;
}

.lb-remote-card.steal[turn="false"] {
-webkit-filter: grayscale(100%);
filter: gray; /* IE6-9 */
}

.lb-remote-card.score[turn="false"] {
-webkit-filter: grayscale(100%);
filter: gray; /* IE6-9 */
}

.lb-remote-card.generated {
    background-image: url('../../card_back/CardBaxBottom.png'); 
}