/* ---
   BHI Scramble Scorekeeper Stylesheet
   --- */

/* 1. Design System & Global Styles
   ========================================================================== */
:root {
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    
    --color-dark-green: #041a04;
    --color-sand: #F5F5DC;
    --color-graphite: #333333;
    --color-white: #FFFFFF;
    --color-sand-darker: #e0dacd;

    --radius-sharp: 8px;
    --radius-soft: 15px;
    --radius-round: 50px;

    --shadow-large: 0 15px 35px rgba(0, 0, 0, 0.5);

    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
    height: 100%; margin: 0; padding: 0; font-family: var(--font-body);
    overflow: hidden; display: flex; justify-content: center; align-items: center;
    text-align: center; color: var(--graphite);
}
body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1535131749006-b7f58c99034b?auto=format&fit=crop&w=1920&q=80');
    background-size: cover; background-position: center;
    filter: blur(8px) brightness(0.7); transform: scale(1.1); z-index: -1;
}
button { touch-action: manipulation; cursor: pointer; }

/* 2. Navigation
   ========================================================================== */
.top-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: rgba(4, 26, 4, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav-brand { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-sand); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 15px; }
.nav-button { padding: 8px 16px; border-radius: var(--radius-round); border: none; background-color: transparent; color: var(--color-sand); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; transition: all var(--transition-smooth); }
.nav-button:hover, .nav-button:focus-visible { background-color: var(--color-sand); color: var(--color-dark-green); transform: translateY(-2px); }
.hamburger-button { display: none; }
.dropdown { position: relative; display: flex; }
.dropdown-content { display: none; position: absolute; background-color: var(--color-sand); min-width: 160px; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); z-index: 1; border-radius: var(--radius-sharp); overflow: hidden; margin-top: 10px; top: 100%; left: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-smooth); }
.dropdown-content a { color: var(--graphite); padding: 12px 16px; text-decoration: none; display: block; text-align: left; transition: background-color var(--transition-fast); }
.dropdown-content a:hover { background-color: var(--color-sand-darker); }
.dropdown-content.show { display: block; opacity: 1; visibility: visible; transform: translateY(0); }

/* 3. Main Scorecard & Countdown
   ========================================================================== */
.scorecard { position: relative; padding: 40px; border-radius: var(--radius-soft); background: var(--color-sand); box-shadow: var(--shadow-large); width: 90%; max-width: 600px; border: 1px solid #c9c4b8; margin-top: 80px; }
.scorecard-header { border-bottom: 2px solid #ddd8c8; padding-bottom: 20px; }
.scorecard-header h2 { font-family: var(--font-heading); font-size: 1.8rem; margin: 0; color: var(--color-dark-green); text-transform: uppercase; letter-spacing: 2px; }
.countdown-container { display: flex; justify-content: space-around; align-items: center; padding: 20px 0; min-height: 130px; }
.countdown-item { display: flex; flex-direction: column; line-height: 1; }
.countdown-item span { font-family: var(--font-heading); font-size: 4rem; font-weight: 700; }
.countdown-item div { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
#countdown-finished-message { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; min-height: 130px; display: none; align-items: center; justify-content: center; }

/* 4. Modals
   ========================================================================== */
.modal-overlay { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); justify-content: center; align-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity var(--transition-smooth), visibility var(--transition-smooth); }
.modal-overlay.is-visible { display: flex; opacity: 1; visibility: visible; }
.modal-content { position: relative; width: 100%; background-color: var(--color-sand); border-radius: var(--radius-soft); padding: 20px; display: flex; flex-direction: column; transform: scale(0.95); transition: transform var(--transition-smooth); }
.modal-overlay.is-visible .modal-content { transform: scale(1); }
.modal-close-btn { position: absolute; top: 10px; right: 10px; z-index: 1001; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); border: none; display: flex; justify-content: center; align-items: center; transition: background-color var(--transition-fast); color: var(--graphite); /* Set base color for SVG */ }
.modal-close-btn:hover { background: rgba(0, 0, 0, 0.2); }
.modal-close-btn svg { width: 24px; height: 24px; }
.modal-close-btn svg path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; } /* CORRECTED: Inherits color, fill is none */

.chart-container { max-width: 800px; }
.podcast-container { max-width: 500px; }
.sheet-container { max-width: 900px; height: 90vh; }
.roast-container { max-width: 700px; padding-top: 40px; }
.modal-content h3 { font-family: var(--font-heading); margin-top: 0; color: var(--color-dark-green); flex-shrink: 0; }
.video-container-wrapper { background-color: #000; padding: 20px; max-width: 854px; }
.video-container-wrapper .modal-close-btn { background: rgba(255, 255, 255, 0.2); color: var(--color-white); /* White 'X' */ }
.video-container-wrapper .modal-close-btn:hover { background: rgba(255, 255, 255, 0.3); }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
#un-roll-btn { display: none; }

.table-wrapper { width: 100%; height: 100%; overflow: auto; }
.sheet-container table { width: 100%; border-collapse: collapse; }
.sheet-container th, .sheet-container td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd8c8; }
.sheet-container th { background-color: var(--color-sand-darker); color: var(--color-dark-green); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; position: sticky; top: 0; }
.sheet-container tbody tr:nth-child(even) { background-color: #ebe7db; }
.sheet-container tbody tr:hover { background-color: #daceb8; }

.roast-container .accuracy-display { position: absolute; top: 15px; left: 20px; font-size: 0.9rem; font-weight: 700; color: var(--color-dark-green); opacity: 0.7; }
.player-score-modal { font-family: var(--font-heading); font-size: 2.5rem; min-height: 100px; margin: 20px 0 30px 0; }
.roast-container .scorecard-footer { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 20px; }
.roast-container #golf-ball-button { position: relative; width: 100px; height: 100px; border-radius: 50%; border: none; background: radial-gradient(circle at 30% 30%, #ffffff, #e0e0e0); box-shadow: inset -5px -5px 15px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.3); transition: all var(--transition-fast); color: var(--color-dark-green); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; line-height: 1.2; }
.roast-container #golf-ball-button:hover { transform: scale(1.05); box-shadow: inset -5px -5px 15px rgba(0,0,0,0.1), 0 8px 25px rgba(0,0,0,0.4); }
.roast-container #golf-ball-button:active { transform: scale(0.98); }
.roast-container #edit-code-btn { background: none; border: none; color: var(--color-dark-green); opacity: 0.7; font-size: 0.9rem; transition: opacity var(--transition-fast); }
.roast-container #edit-code-btn:hover { opacity: 1; text-decoration: underline; }

/* 5. Responsive Styles
   ========================================================================== */
@media (max-width: 850px) {
    .scorecard { margin-top: 0; }
    .top-nav { padding: 10px 20px; }
    .nav-links { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; align-items: center; padding: 0; background: rgba(4, 26, 4, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1), padding 0.3s ease-in-out; }
    .top-nav.nav-open .nav-links { max-height: 500px; padding: 20px 0; }
    .nav-links .dropdown { flex-direction: column; width: 100%; }
    .nav-links .dropdown-content { position: static; box-shadow: none; background: transparent; text-align: center; margin-top: 10px; display: none; flex-direction: column; gap: 10px; max-height: 0; overflow: hidden; padding: 0; opacity: 1; visibility: visible; transform: none; transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; }
    .nav-links .dropdown-content.show { max-height: 200px; padding-top: 10px; display: flex; }
    .nav-links .dropdown-content a { color: var(--color-sand); opacity: 0.8; text-align: center; }
    .hamburger-button { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 24px; background: transparent; border: none; padding: 0; z-index: 10; }
    .hamburger-button span { width: 30px; height: 3px; background: var(--color-sand); border-radius: 10px; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: relative; transform-origin: 1px; }
    .top-nav.nav-open .hamburger-button span:nth-child(1) { transform: rotate(45deg); }
    .top-nav.nav-open .hamburger-button span:nth-child(2) { opacity: 0; transform: translateX(20px); }
    .top-nav.nav-open .hamburger-button span:nth-child(3) { transform: rotate(-45deg); }
    .countdown-item span { font-size: 2.5rem; }
}