/* ========================================
 * Project: Dice Games - Qwixx
 * File: qwixx.css
 * Author: Bretscher Jan
 * Date: 10.02.25
 * Version: 1.2
 * Description: Fixed checkbox styling for Qwixx.
 * ======================================== */

/* Universal selector to apply font family to all elements */
* {
    font-family: "Arial", sans-serif;
}

/* Color definitions for the game elements */
#red { color: red; } /* Red color for specific elements */
#yellow { color: #eeb422; } /* Yellow color */
#green { color: LimeGreen; } /* Green color */
#blue { color: blue; } /* Blue color */
#fehlwurf { color: grey; } /* Grey color for failed attempts */
#ergebnis { color: violet; } /* Violet color for results */

/* Basic styling for checkboxes */
input[type="checkbox"] {
    width: 40px; /* Width of the checkbox */
    height: 40px; /* Height of the checkbox */
    margin: 5px; /* Margin around the checkbox */
    appearance: none; /* Remove default checkbox style */
    border: 2px solid #000; /* Border style */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    display: inline-block; /* Inline block display */
    align-items: center; /* Align items in the center */
    justify-content: center; /* Center content */
    font-size: 20px; /* Font size for checkbox content */
    font-weight: bold; /* Bold font weight */
    position: relative; /* Positioning context for pseudo-elements */
}

/* Display the number inside the checkbox using a pseudo-element */
input[type="checkbox"]::after {
    content: attr(data-number); /* Get the number from data attribute */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position to center */
}

/* Styling for checked state of checkboxes */
input[type="checkbox"]:checked {
    background-color: black; /* Background color when checked */
    border: 2px solid black; /* Border color when checked */
    color: white; /* Text color when checked */
    border-color: white; /* Change border color to white */
}

/* Background colors for each row of checkboxes */
#rot input[type="checkbox"] { background-color: rgba(255, 0, 0, 0.5); } /* Red background */
#gelb input[type="checkbox"] { background-color: rgba(255, 215, 0, 0.5); } /* Yellow background */
#gruen input[type="checkbox"] { background-color: rgba(50, 205, 50, 0.5); } /* Green background */
#blau input[type="checkbox"] { background-color: rgba(0, 0, 255, 0.5); } /* Blue background */
#fehlwurf input[type="checkbox"] { background-color: rgba(128, 128, 128, 0.5); } /* Grey background */

/* Styling for the dice container */
#wuerfel {
    float: right; /* Float the dice container to the right */
}

/* Styling for dice elements */
.dice {
    width: 50px; /* Width of the dice */
    height: 50px; /* Height of the dice */
    border: 2px solid black; /* Border style */
    border-radius: 10px; /* Rounded corners */
    display: flex; /* Flexbox for alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    font-size: 24px; /* Font size for dice content */
    font-weight: bold; /* Bold font weight */
    text-align: center; /* Center text alignment */
    position: inherit; /* Inherit position from parent */
    margin: 5px; /* Margin around the dice */
    float: right; /* Float the dice to the right */
}

/* Background colors for different dice */
#diceRed { background-color: rgba(255, 0, 0, 0.5); color: rgb(0, 0, 0); } /* Red dice */
#diceYellow { background-color: rgba(255, 215, 0, 0.5); color: rgb(0, 0, 0); } /* Yellow dice */
#diceGreen { background-color: rgba(50, 205, 50, 0.5); color: rgb(0, 0, 0); } /* Green dice */
#diceBlue { background-color: rgba(0, 0, 255, 0.5); color: rgb(0, 0, 0); } /* Blue dice */
#diceWhite { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); } /* White dice */

/* Styling for buttons */
.btn {
    padding: 12px 24px; /* Padding for larger buttons */
    font-size: 18px; /* Font size for buttons */
    border: none; /* No border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin: 5px; /* Margin around buttons */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects for hover */
}

/* Hover effects for buttons */
.btn:hover {
    transform: scale(1.05); /* Slightly enlarge button on hover */
}

/* Specific background colors for buttons */
#rollButton { background-color: #37853a; color: white; } /* Roll button */
#undoButton { background-color: #ff1100; color: white; } /* Undo button */
#home { background-color: #00000080; color: rgb(255, 255, 255); } /* Home button */
#joinButton { background-color: #575757; color: rgb(255, 255, 255); } /* Join button */
#deleteSessionButton { background-color: #575757; color: rgb(255, 255, 255); } /* Delete session button */

/* Styling for text input fields */
input[type="text"] {
    padding: 10px; /* Padding for text fields */
    font-size: 16px; /* Font size for text fields */
    border: 2px solid #ccc; /* Border color */
    border-radius: 5px; /* Rounded corners */
    margin: 5px 0; /* Margin above and below */
    width: calc(25% - 12px); /* Adjust width to account for padding */
    transition: border-color 0.3s; /* Transition effect for border color */
}

/* Focus effect for text input fields */
input[type="text"]:focus {
    border-color: #37853a; /* Change border color on focus */
    outline: none; /* Remove default focus outline */
}

/* Container for buttons */
.button-container {
    text-align: center; /* Center alignment for buttons */
    margin-bottom: 10px; /* Margin below the button container */
}

/* Link styling */
#home a { text-decoration: none; } /* No underline for home link */
a:link { text-decoration: none; } /* No underline for unvisited links */
a:visited { text-decoration: none; } /* No underline for visited links */
a:hover { text-decoration: none; } /* No underline on hover */
a:active { text-decoration: none; } /* No underline when active */

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    .dice {
        width: 40px; /* Smaller width for dice */
        height: 40px; /* Smaller height for dice */
        font-size: 18px; /* Smaller font size for dice */
    }

    input[type="checkbox"] {
        width: 30px; /* Smaller width for checkboxes */
        height: 30px; /* Smaller height for checkboxes */
        font-size: 16px; /* Smaller font size for checkboxes */
    }

    /* Move dice below the game field */
    .dice-container {
        display: flex; /* Use flexbox for dice layout */
        flex-wrap: wrap; /* Allow wrapping of dice */
        justify-content: center; /* Center the dice */
        margin-top: 10px; /* Margin above the dice container */
    }

    #wuefel {
        flex-direction: column; /* Arrange elements in a column */
        align-items: center; /* Center elements */
    }
}

/* Hide initial checkboxes */
#r2, #y2, #g2, #b2, #f1 { display: none; } /* Hide specific checkboxes */

/* Round markers for the game */
#rRound, #yRound, #gRound, #bRound {
    width: 20px; /* Width of round markers */
    height: 20px; /* Height of round markers */
    border-radius: 50%; /* Make them circular */
    display: inline-block; /* Inline block display */
    margin: 5px; /* Margin around markers */
}

/* Background colors for round markers */
#rRound { background-color: rgba(255, 0, 0, 0.5); } /* Red marker */
#yRound { background-color: rgba(255, 215, 0, 0.5); } /* Yellow marker */
#gRound { background-color: rgba(50, 205, 50, 0.5); } /* Green marker */
#bRound { background-color: rgba(0, 0, 255, 0.5); } /* Blue marker */

/* Styling for evaluation text fields */
.evaluation-fields {
    display: flex; /* Use flexbox for horizontal arrangement */
    align-items: center; /* Center elements vertically */
}

.evaluation-fields input[type="text"] {
    padding: 5px; /* Less padding for evaluation fields */
    font-size: 14px; /* Smaller font size */
    border: 1px solid #ccc; /* Thinner border */
    border-radius: 3px; /* Smaller rounded corners */
    margin: 0 5px; /* Margin between text fields */
    width: 50px; /* Fixed width for evaluation fields */
    text-align: center; /* Center text alignment */
}