/* --- Global Styles & Theme --- */
/* Import moved here - alternatively keep in HTML head */
/* @import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Roboto+Condensed:wght@400;700&display=swap'); */

:root {
    --color-background: #1a1a1a;
    --color-dark-grey: #2b2b2b;
    --color-medium-grey: #444;
    --color-light-grey: #666;
    --color-text: #c5c5c5;
    --color-highlight: #f5d06a; /* Muted yellow/gold */
    --color-red: #a02c2c; /* Blood red */
    --color-dark-red: #7a1f1f;
    --color-green: #5a7d5a; /* Muted green */
    --color-dark-green: #3a5d3a;

    --font-primary: 'Roboto Condensed', sans-serif;
    --font-secondary: 'Special Elite', cursive; /* Stencil/Typewriter */

    /* Keep data URIs or move to assets/images/ and use url() */
    --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    --texture-splatter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C40 10, 30 10, 20 20 S10 40, 15 50 S25 70, 40 80 S70 95, 80 90 S95 70, 90 50 S80 20, 70 10 S60 0, 50 0 Z' fill='%23a02c2c' opacity='0.1' transform='rotate(15 50 50) scale(0.8)'/%3E%3Cpath d='M60 10 C55 15, 45 15, 40 25 S30 45, 35 55 S45 75, 60 85 S80 90, 85 85 S98 65, 92 45 S80 20, 75 15 S70 10, 60 10 Z' fill='%237a1f1f' opacity='0.08' transform='rotate(-25 50 50) scale(0.6) translate(20 10)'/%3E%3C/svg%3E");
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Improve focus visibility for accessibility */
*:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
    box-shadow: 0 0 8px var(--color-highlight);
}


body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text);
    background-image: var(--texture-noise);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding: 10px; /* Add padding around the edges */
}

.app-container {
    max-width: 1200px;
    margin: 15px auto;
    padding: 20px;
    background-color: rgba(43, 43, 43, 0.85); /* Dark grey semi-transparent */
    border: 2px solid var(--color-medium-grey);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    position: relative; /* For absolute positioning inside */
    background-image: var(--texture-splatter), var(--texture-noise);
    background-repeat: no-repeat, repeat;
    background-position: top right, top left;
}

header { /* Style the new header element */
     margin-bottom: 20px; /* Add space below main title */
}

/* Room info bar */
.room-info-bar {
    background-color: var(--color-dark-grey);
    border: 1px solid var(--color-medium-grey);
    border-radius: 3px;
    padding: 8px 15px;
    text-align: center;
    font-family: var(--font-secondary);
    color: var(--color-highlight);
    margin-top: 10px;
    font-size: 1.2em;
    letter-spacing: 2px;
}

/* Hide room info bar when empty */
.room-info-bar:empty {
    display: none;
}

h1, h2, h3, h4 { /* Added h4 */
    font-family: var(--font-secondary);
    color: var(--color-highlight);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 1px;
}

h1 { font-size: 2.5em; margin-bottom: 5px; } /* Reduced margin for main title */
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; margin-bottom: 10px; color: var(--color-text); } /* Player name / Section titles */
h4 { font-size: 1.2em; color: var(--color-text); } /* Added for modal subheadings */


button, input[type="text"], input[type="number"], select {
    font-family: var(--font-primary);
    padding: 10px 15px;
    border: 1px solid var(--color-light-grey);
    background-color: var(--color-medium-grey);
    color: var(--color-text);
    border-radius: 3px;
    transition: all 0.3s ease;
    margin: 5px;
    font-size: 1rem; /* Ensure consistent base size */
}

button {
    cursor: pointer;
    background-color: var(--color-green);
    border-color: var(--color-dark-green);
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

button:hover:not(:disabled) {
    background-color: var(--color-dark-green);
    box-shadow: 0 0 5px rgba(90, 125, 90, 0.5);
    transform: translateY(-1px);
}

button:active:not(:disabled) {
    transform: translateY(0px);
}

button:disabled {
    background-color: var(--color-light-grey);
    border-color: var(--color-medium-grey);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none; /* Prevent hover/active transforms */
    box-shadow: none;
}

/* Specific Button Colors */
button.btn-danger { background-color: var(--color-red); border-color: var(--color-dark-red); }
button.btn-danger:hover:not(:disabled) { background-color: var(--color-dark-red); box-shadow: 0 0 5px rgba(160, 44, 44, 0.5); }
button.btn-primary { background-color: var(--color-highlight); color: var(--color-dark-grey); border-color: #cba74a; }
button.btn-primary:hover:not(:disabled) { background-color: #e6c66e; box-shadow: 0 0 5px rgba(245, 208, 106, 0.5); }


input[type="text"], input[type="number"], select {
    background-color: var(--color-dark-grey);
    border-color: var(--color-medium-grey);
}
input:focus, select:focus { /* Keep non-outline focus styles */
    /* outline: none; Remove this if using focus-visible */
    border-color: var(--color-highlight);
    box-shadow: 0 0 5px rgba(245, 208, 106, 0.5);
}


/* --- Screen Visibility --- */
.screen { display: none; }
.screen.active { display: block; }

/* --- Room Selection Screen --- */
#room-selection-screen {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

.room-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

#room-code-input {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
    width: 180px;
}

.error-message {
    color: var(--color-red);
    font-weight: bold;
    margin: 15px 0;
    min-height: 24px;
}

/* --- Setup Screen --- */
#setup-screen {
    text-align: center;
}

#leave-room-btn, #leave-room-btn-game {
    background-color: var(--color-red);
    border-color: var(--color-dark-red);
    margin-top: 15px;
}

#leave-room-btn:hover:not(:disabled), #leave-room-btn-game:hover:not(:disabled) {
    background-color: var(--color-dark-red);
    box-shadow: 0 0 5px rgba(160, 44, 44, 0.5);
}
#player-list-setup {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
#player-list-setup li {
    background: var(--color-medium-grey);
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
#player-list-setup button { /* Remove player button */
    padding: 3px 8px;
    font-size: 0.8em;
    background-color: var(--color-red);
    border-color: var(--color-dark-red);
}
 #player-list-setup button:hover:not(:disabled) { /* Ensure hover specificity */
     background-color: var(--color-dark-red);
     box-shadow: 0 0 3px rgba(160, 44, 44, 0.5);
 }

/* --- Game Screen --- */
#game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--color-medium-grey);
    margin-bottom: 20px;
}
#game-timer {
    font-family: var(--font-secondary);
    font-size: 1.5em;
    color: var(--color-highlight);
    min-width: 100px; /* Prevent jumpiness */
    text-align: center; /* Center timer text */
}
#game-header .header-buttons button {
    margin-left: 5px;
    padding: 8px 12px;
}

#players-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.player-card {
    background-color: var(--color-dark-grey);
    border: 2px solid var(--color-medium-grey);
    border-radius: 5px;
    padding: 15px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden; /* For pseudo-elements */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Use flex for better internal layout */
    flex-direction: column;
}
.player-card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4);
}

.player-card h3 { /* Player name styling */
    background: linear-gradient(to right, var(--color-medium-grey), transparent);
    padding: 5px 10px;
    margin: -15px -15px 15px -15px; /* Extend to edges */
    border-bottom: 1px solid var(--color-light-grey);
    text-align: left;
    color: var(--color-highlight);
    font-size: 1.3em; /* Slightly smaller */
}

.player-points {
    font-size: 2em;
    font-weight: bold;
    color: var(--color-highlight);
    text-align: center;
    margin-bottom: 15px;
    display: block; /* Ensure it takes full width */
    transition: color 0.3s ease, transform 0.2s ease;
    text-shadow: 0 0 8px rgba(245, 208, 106, 0.5);
}
.player-points.increase {
    animation: pointIncrease 0.5s ease-out;
}
.player-points.decrease {
    animation: pointDecrease 0.5s ease-out;
}

@keyframes pointIncrease {
    0% { transform: scale(1); color: var(--color-highlight); }
    50% { transform: scale(1.2); color: #aaffaa; } /* Bright green flash */
    100% { transform: scale(1); color: var(--color-highlight); }
}
@keyframes pointDecrease {
    0% { transform: scale(1); color: var(--color-highlight); }
    50% { transform: scale(0.9); color: #ffaaaa; } /* Bright red flash */
    100% { transform: scale(1); color: var(--color-highlight); }
}


.player-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: var(--color-text);
    background: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 3px;
}
.player-stats span {
    display: flex;
    align-items: center;
}
.player-stats .icon {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    opacity: 0.8;
    flex-shrink: 0; /* Prevent icon shrinking */
}

.player-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto; /* Push actions to bottom if card height varies */
}
.player-actions button {
    width: 100%;
    padding: 12px 5px; /* Adjust padding for better fit */
    font-size: 0.9em;
}
.player-actions .btn-beer { background-color: var(--color-green); border-color: var(--color-dark-green); }
.player-actions .btn-shot { background-color: var(--color-highlight); color: var(--color-dark-grey); border-color: #cba74a; }
.player-actions .btn-revive { background-color: var(--color-green); border-color: var(--color-dark-green); } /* Green for +points */
.player-actions .btn-redeem { background-color: var(--color-red); border-color: var(--color-dark-red); }

.player-actions .btn-beer:hover:not(:disabled) { background-color: var(--color-dark-green); }
.player-actions .btn-shot:hover:not(:disabled) { background-color: #e6c66e; }
.player-actions .btn-revive:hover:not(:disabled) { background-color: var(--color-dark-green); }
.player-actions .btn-redeem:hover:not(:disabled) { background-color: var(--color-dark-red); }


/* --- Game Stats, History, Leaderboard --- */
#game-info-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed var(--color-medium-grey);
}
.info-section {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--color-medium-grey);
}
.info-section h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--color-light-grey);
    padding-bottom: 5px;
    margin-bottom: 10px;
    color: var(--color-highlight);
    text-align: left;
     font-size: 1.2em; /* Slightly smaller */
}
#game-stats ul, #leaderboard ol, #history-log ul {
    list-style: none;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--color-light-grey) var(--color-dark-grey);
}
 /* Improve scrollbar styling for Webkit */
#game-stats ul::-webkit-scrollbar,
#leaderboard ol::-webkit-scrollbar,
#history-log ul::-webkit-scrollbar {
    width: 8px;
}
#game-stats ul::-webkit-scrollbar-track,
#leaderboard ol::-webkit-scrollbar-track,
#history-log ul::-webkit-scrollbar-track {
    background: var(--color-dark-grey);
}
#game-stats ul::-webkit-scrollbar-thumb,
#leaderboard ol::-webkit-scrollbar-thumb,
#history-log ul::-webkit-scrollbar-thumb {
    background-color: var(--color-light-grey);
    border-radius: 4px;
    border: 2px solid var(--color-dark-grey);
}

 #history-log ul li {
     font-size: 0.9em;
     margin-bottom: 4px;
     padding-bottom: 4px;
     border-bottom: 1px dotted var(--color-medium-grey);
     opacity: 0.9;
 }
#history-log ul li:last-child { border-bottom: none; }

#leaderboard li {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
#leaderboard .leader-points { font-weight: bold; color: var(--color-highlight); }

/* --- Modals (<dialog>) --- */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 550px; /* Adjusted max-width slightly */
    background-color: var(--color-dark-grey);
    border: 2px solid var(--color-light-grey);
    padding: 30px;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    color: var(--color-text); /* Ensure text color is set */
}

/* Style backdrop for modal */
.modal-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
}

/* Hide dialog by default (handled by JS .showModal()) */
.modal-dialog:not([open]) {
    display: none;
}

.modal-dialog h2 { margin-top: 0; color: var(--color-highlight); } /* Ensure heading color */

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8em; /* Larger close button */
    cursor: pointer;
    color: var(--color-light-grey);
    background: none;
    border: none;
    padding: 0 5px; /* Add padding for easier clicking */
    line-height: 1;
    text-shadow: none; /* Remove text shadow from close button */
}
.modal-close-btn:hover {
    color: var(--color-highlight);
    background: none; /* Ensure no background on hover */
    box-shadow: none; /* Ensure no shadow on hover */
    transform: none; /* Ensure no transform on hover */
}

/* Options Panel Specifics */
#options-panel .options-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}
#options-panel .options-grid label { justify-self: start; }
#options-panel .options-grid input[type="number"] { width: 80px; text-align: right; }
#options-panel #options-buttons { text-align: right; margin-top: 20px;}
#options-panel #options-buttons button { margin-left: 10px; }
#cancel-options-btn { /* Style cancel button */
    background-color: var(--color-medium-grey);
    border-color: var(--color-light-grey);
    color: var(--color-text);
}
#cancel-options-btn:hover:not(:disabled) {
    background-color: var(--color-light-grey);
}


/* End Game Modal Specifics */
#end-game-modal .modal-content { /* Use modal-content for inner padding if needed */
     padding: 0; /* Remove padding if dialog padding is sufficient */
     text-align: center;
     width: 100%; /* Take full width of dialog */
}
#end-game-modal h2 { margin-bottom: 20px;}
#end-game-stats ul { list-style: none; padding: 0; margin-bottom: 20px; text-align: left; }
#end-game-stats li { margin-bottom: 8px; } /* Increased spacing */
#end-game-stats h4 { margin-top: 20px; text-align: center; }
#challenge-question { margin-top: 25px; margin-bottom: 25px; }
#challenge-question label { display: block; margin-bottom: 10px; }
#challenge-winner { width: 60%; min-width: 150px; } /* Adjust select width */
#confirm-new-game-btn { margin-top: 15px; }


/* --- Utility & Icons --- */
.hidden { display: none !important; }
.icon { display: inline-block; vertical-align: middle; width: 1em; height: 1em; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Base class for icons */

/* Example using SVG for icons (replace with actual SVGs or font icons) */
.icon-beer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c5c5c5'%3E%3Cpath d='M19 11h-1V7h1c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v1c0 1.1.9 2 2 2h1v4H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm-8 9H7v-6h4v6zm6 0h-4v-6h4v6zm1-11H6V7h12v2z'/%3E%3C/svg%3E"); width: 18px; height: 18px; }
.icon-shot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c5c5c5'%3E%3Cpath d='M7 2v11h10V2H7zm4 9H9V7h2v4zM19 15H5c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); width: 18px; height: 18px; }
/* Add zombie icon if needed */
.icon-zombie { /* Placeholder - replace with actual icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5d06a'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2.5-9.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-2.5 6c-2.33 0-4.32-1.45-5.12-3.5h10.24c-.8 2.05-2.79 3.5-5.12 3.5z'/%3E%3C/svg%3E");
    width: 1em; height: 1em; margin: 0 5px;
}


/* --- Responsiveness --- */
@media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }
    .app-container { padding: 15px; margin: 10px; }
    #game-header { flex-direction: column; align-items: stretch; text-align: center; }
    #game-timer { margin-bottom: 10px; font-size: 1.8em; /* Make timer more prominent */ }
    #game-header .header-buttons { text-align: center; margin-top: 10px; width: 100%; } /* Ensure buttons take width */
    #game-header .header-buttons button { margin: 5px; display: inline-block; width: auto; } /* Adjust button layout */
    #players-container { grid-template-columns: 1fr; /* Stack cards */ }
    .player-actions { grid-template-columns: 1fr 1fr; } /* Keep actions side-by-side */
    #game-info-sections { grid-template-columns: 1fr; }
    /* Options Modal Responsive */
    #options-panel .options-grid { grid-template-columns: 1fr; gap: 8px; }
    #options-panel .options-grid label { margin-bottom: 0; justify-self: stretch; }
    #options-panel .options-grid input[type="number"] { width: 100%; text-align: left; }
    .modal-dialog { width: 95%; padding: 20px; } /* Adjust modal padding */
    #end-game-modal .modal-content { padding: 0px; } /* Adjust modal content padding */
}

 @media (max-width: 480px) {
    body { padding: 5px; }
     .app-container { padding: 10px; margin: 5px; }
     button, input, select { padding: 10px 12px; font-size: 0.95em; } /* Slightly larger touch targets */
     .player-actions button { padding: 10px 5px; }
     h1 { font-size: 1.8em; }
     h2 { font-size: 1.3em; }
     .player-points { font-size: 1.8em; }
     #game-timer { font-size: 1.6em; }
     #player-list-setup li { flex-direction: column; align-items: stretch; }
     #player-list-setup li span { margin-bottom: 5px; text-align: center;}
     #player-list-setup li button { width: 100%; } /* Make remove button full width */
     #options-panel #options-buttons { text-align: center; } /* Center buttons */
     #options-panel #options-buttons button { width: 45%; margin: 5px 2%; } /* Stack buttons */
 }