/* --- BRUTALIST BRAND STANDARDS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap');

:root {
    --bg-white: #FFFFFF;
    --text-black: #000000;
    --border-black: #000000;
    --terminal-gray: #F3F4F6;
    --font-mono: 'Roboto Mono', monospace;
    --font-sans: 'Inter', sans-serif;
}

body { background: var(--bg-white); color: var(--text-black); font-family: var(--font-sans); margin: 0; padding: 0; }
/* --- BRUTALIST OS RESET --- */
/* Forces mobile browsers to respect sharp, square edges */
input, select, button, textarea {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

/* Strips the native iOS inner shadow on text inputs */
input {
    -webkit-appearance: none;
    appearance: none;
}
main { max-width: 900px; margin: 0 auto; padding: 1rem; }

/* --- HEADER ALIGNMENT --- */
header {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

header h1 {
    margin: 0; /* Removes default margin so it vertically centers with the buttons */
    line-height: 1;
}

.controls {
    display: flex;
    gap: 10px;
}

/* --- HEADER CONTROLS --- */
.controls { display: flex; gap: 10px; }

/* --- THE MONOLITHIC STICKY HUD --- */
#sticky-hud {
    position: sticky; 
    top: 0; 
    z-index: 1000;
    background: #fff; 
    display: flex; 
    flex-direction: column;
}

.dice-container { 
    box-sizing: border-box; /* Forces padding inside the width so it never overflows */
    width: 100%;            /* Locks it to the exact same width as the table */
    border: 3px solid #000; 
    border-bottom: none; 
    padding: 1.2rem; 
    box-shadow: none; 
    text-align: center; 
}

.dice-display { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 1.2rem; 
}

/* --- VERTICAL STACK CONTROLS --- */
.dice-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dice-button-row {
    display: flex;
    gap: 15px;
}

.round-status {
    font-family: var(--font-mono);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.status-bar {
    box-sizing: border-box;
    width: 100%;
    border: 3px solid #000; 
    border-bottom: none; 
    background: #ffc78a; 
    padding: 0.8rem;
    margin-top: 0; 
    font-family: var(--font-mono); 
    font-weight: bold; 
    text-align: center;
}


/* --- TABLE ARCHITECTURE (SCROLL-SYNCED) --- */
.header-scroll-container {
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden; 
    border: 3px solid #000;
    border-bottom: none; 
    margin-top: 0; 
    background: var(--terminal-gray);
}

.table-container { 
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto; 
    border: 3px solid #000; 
    border-top: none; 
    background: #fff; 
}

/* --- UPPER SECTION DIVIDER --- */
/* Targets the 9th row (Upper Total) to ensure a heavy section break */
tbody tr:nth-child(9) td,
tbody tr:nth-child(9) th {
    border-bottom: 3px solid #000 !important;
}

/* Remove borders from the tables themselves to force identical box-model math */
.header-table, #score-table {
    width: 100%; 
    border-collapse: collapse; 
    table-layout: fixed;
    border: none;
}

th, td { 
    border: 1px solid #4B5563; 
    padding: 0.8rem; 
    height: 60px; 
    text-align: center; 
    box-sizing: border-box; 
    min-width: 110px; /* Forces a scroll ONLY when there are too many players */
}

/* Category Column Lock */
th:first-child, td:first-child {
    position: sticky; left: 0; z-index: 10;
    width: 140px; border-right: 3px solid #000; text-align: left;
    font-family: var(--font-mono); font-weight: bold; background: var(--terminal-gray);
}

/* Category Column Lock - Hard Fixed Widths */
th:first-child, td:first-child {
    width: 140px !important; 
    min-width: 140px !important;
    max-width: 140px !important;
    border-right: 3px solid #000; 
    text-align: left;
    font-family: var(--font-mono); 
    font-weight: bold; 
    background: var(--terminal-gray);
}

/* Scrollable Body */
/* 1. Remove the outer border from the wrapper so it doesn't compress the inner width */
.table-container { 
    overflow-x: auto; 
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    border-top: none; 
    background: #fff; 
}
.total-row td { background: var(--terminal-gray); border-top: 3px solid #000; font-weight: bold; }

/* --- UI ELEMENTS --- */
/* --- WELCOME SCREEN EDGE-CASE HARMONY --- */

/* REQUIREMENT 1: Guaranteed Button Text Containment (forces multi-line wrapping) */
#start-game-btn, #score-only-btn {
    white-space: normal;      /* Explicitly allows text to wrap to multi-line */
    overflow-wrap: break-word; /* Robustly breaks even very long single words */
    word-wrap: break-word;     /* Legacy browser support */
    display: inline-flex;     /* Helps with internal padding and vertical scaling */
    align-items: center;      /* Centers multi-line text vertically */
    justify-content: center;   /* Centers text horizontally */
    min-height: 45px;         /* Sets a minimum height for a good tap target */
    box-sizing: border-box;    /* Ensures borders/padding are contained within width */
}

/* REQUIREMENT 2: Header Escape Hatch (shift headers over the left shadow) */
.setup-container h2 {
    overflow-wrap: break-word; /* Prevents text from bleeding out the right side */
    word-wrap: break-word;
    word-break: break-word;    /* Forces hard breaks on massive words if necessary */
    max-width: 100%;
    margin-left: 0;            /* Resets any accidental negative margins */
}
.player-count-row label {
    overflow: visible;         /* Ensure nothing is clipped by the container */
    max-width: none;          /* Allow text to grow beyond standard width */
}

/* Ensure the question can also scale nicely when shifted */
.player-count-row {
    flex-wrap: wrap;          /* Allows label/dropdown to wrap when on same line */
}

.setup-container { border: 3px solid #000; padding: 2rem; box-shadow: 8px 8px 0px #000; margin-top: 2rem; }
.setup-group { margin-bottom: 15px; }
.setup-group input { 
    width: 100%;             /* Fluid width for mobile */
    max-width: 300px;        /* Keeps it from getting infinitely wide on desktop */
    box-sizing: border-box;  /* Forces the heavy borders inside the width calculation */
    display: block; 
    border: 2px solid #000; 
    padding: 0.6rem; 
    background: var(--terminal-gray); 
    font-family: var(--font-mono); 
    font-weight: bold;   
    font-size: 1rem;     
    color: var(--text-black); 
}
#start-game-btn { background: #A8FFB2; color: #000; margin-right: 15px !important; margin-top: 1rem; }
/* --- SETUP SCREEN ALIGNMENT FIX --- */
.player-count-row {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds a nice gap between the question and the dropdown */
    margin-bottom: 1.5rem;
}

#player-count {
    width: auto; /* Overrides the 100% width from the global select rule */
    height: auto;
    border: 2px solid #000; /* Restores the brutalist border */
    padding: 0.4rem 1rem;
    background: var(--terminal-gray);
    text-align: left;
    text-align-last: left;
}
.die { 
    width: 55px; height: 55px; border: 2px solid #000; display: flex; 
    align-items: center; justify-content: center; font-size: 3.2rem; 
    box-shadow: 4px 4px 0px #000; cursor: pointer; font-family: var(--font-mono);
}
.die.held { background: #000; color: #fff; }

button { font-family: var(--font-mono); text-transform: uppercase; font-weight: bold; border: 2px solid #000; padding: 0.6rem 1rem; cursor: pointer; box-shadow: 4px 4px 0px #000; background: #fff; }

select { 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; /* Forces the select to strictly obey the parent width */
    margin: 0; 
    padding: 0; /* Kills the default OS padding causing the right-side bleed */
    border: none; 
    background: transparent; 
    font-family: var(--font-mono); 
    font-weight: bold; 
    font-size: 1rem; 
    color: #000; 
    text-align: center; 
    text-align-last: center; 
    cursor: pointer; 
}

option { 
    font-weight: bold; 
    color: #000; 
    text-align: center; 
}

/* --- MODAL OVERLAY --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8);
}

.modal-content {
    background-color: var(--bg-white);
    margin: 5% auto;
    padding: 2rem;
    border: 4px solid #000;
    box-shadow: 8px 8px 0px #000;
    max-width: 700px;
    line-height: 1.6;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #000;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.modal-header h2 { margin: 0; font-family: var(--font-mono); text-transform: uppercase; }
.close-btn { font-size: 1.5rem; border: none; background: none; box-shadow: none; padding: 0; cursor: pointer; }
.close-btn:hover { color: #555; }

.rules-section h3 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    margin-top: 1.5rem;
    border-bottom: 2px solid #000;
    display: inline-block;
    padding-bottom: 0.2rem;
}

.rules-section ul { padding-left: 1.5rem; }
.rules-section li { margin-bottom: 0.5rem; }

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 650px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px; /* Adds breathing room between the title and the buttons */
    }

    .controls {
        width: 100%;
        flex-wrap: wrap; /* Allows the buttons themselves to wrap to a new line if the phone is super narrow */
    }
    
    /* Ensure the h1 line-height doesn't cause weird spacing when stacked */
    header h1 {
        line-height: 1.1;
    }
    /* Stacks the "How many players" label and the dropdown */
    .player-count-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Makes the dropdown stretch nicely on mobile */
    #player-count {
        width: 100%; 
        box-sizing: border-box;
    }

    /* Stacks the buttons and adds breathing room */
    #start-game-btn, #score-only-btn {
        display: block;
        width: 100%; /* Makes buttons full-width and highly tappable on mobile */
        box-sizing: border-box;
    }

    #start-game-btn {
        margin-right: 0 !important; /* Overrides the desktop margin */
        margin-bottom: 15px; /* The gap between the two buttons */
    }
    /* --- MOBILE DICE & BUTTON CONTAINMENT --- */
    
    /* Allow the dice container to wrap and reduce the gap */
    .dice-display {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px; /* Tighter spacing for mobile */
        margin-bottom: 1rem;
    }

    /* Scale the dice down slightly so 5 can still fit in a row on most phones */
    .die {
        width: 45px; 
        height: 60px;
        font-size: 1.8rem; /* Scales down the dice number/icon */
        box-sizing: border-box; /* Forces shadows/borders inside the width calculation */
    }

    /* Allow the action buttons to wrap and share space */
    .dice-button-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Force the buttons to stay inside the box */
    .dice-button-row button {
        flex: 1 1 40%; /* Tells buttons to share space, but wrap if they get smaller than 40% of the box */
        margin: 0 !important; /* Strips out any desktop margins pushing them out of bounds */
        white-space: normal;
        box-sizing: border-box;
    }
}
@media (max-width: 400px) {
    .setup-container h2 {
        font-size: 1.5rem; 
    }
}

/* --- DEDICATION FOOTNOTE --- */
.dedication {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem; /* Keeps it small and elegant */
    text-transform: uppercase;
    color: #555; /* Muted so it doesn't fight the stark black UI */
    letter-spacing: 0.1em; /* Widens the text slightly for a technical feel */
    margin-top: 2rem; /* Pushes it down away from the main box */
    width: 100%;
}

/* --- PORTFOLIO FOOTER --- */
#portfolio-footer {
    text-align: center;
    margin-top: 1.5rem;
    width: 100%;
}

#portfolio-footer a {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid transparent; /* Invisible border for hover effect */
    transition: border-color 0.1s ease-in;
}

/* Brutalist hover state: a thick underline snaps into place */
#portfolio-footer a:hover, 
#portfolio-footer a:active {
    border-bottom: 2px solid #000;
}