body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* Auth & modal form layout */
.help-modal-content .form-group { margin: 12px 0; }
.help-modal-content label { display:block; margin: 0 0 6px 0; font-weight: 600; }
.help-modal-content label { white-space: normal; }
.help-modal-content form { margin-top: 8px; }
.help-modal-content .form-actions { display:flex; justify-content: flex-end; gap:8px; margin-top: 12px; }
.help-modal-content .form-check { display:flex; align-items:center; gap:8px; margin: 10px 0; }

/* Reusable button styles (used in modals) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.btn,input.btn[type="submit"]{ -webkit-appearance:none; appearance:none; font-weight:600; }
.btn-primary { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.btn-primary:hover { background: #0b5ed7; border-color: #0b5ed7; }
.btn:active { transform: translateY(1px); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(13,110,253,.2); }
.btn-secondary { background: #e9ecef; color: #212529; border-color: #dee2e6; }
.btn-secondary:hover { background: #dde1e4; }
.btn-danger { background: #dc3545; color: #fff; border-color: #dc3545; }
.btn-danger:hover { background: #bb2d3b; border-color: #bb2d3b; }

body.dark-mode .btn-secondary { background: #2c2c2c; color: #eee; border-color: #444; }
body.dark-mode .btn-secondary:hover { background: #3a3a3a; }
body.dark-mode .btn-primary { background: #2a66d2; border-color: #2a66d2; color: #fff; }
body.dark-mode .btn-primary:hover { background: #255ac0; border-color: #255ac0; }
body.dark-mode .btn:focus { box-shadow: 0 0 0 3px rgba(102,176,255,.25); }

/* Inputs inside modals */
.help-modal-content .input,
.help-modal-content input[type="text"],
.help-modal-content input[type="email"],
.help-modal-content input[type="password"] {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 6px;
}
body.dark-mode .help-modal-content .input,
body.dark-mode .help-modal-content input[type="text"],
body.dark-mode .help-modal-content input[type="email"],
body.dark-mode .help-modal-content input[type="password"] {
    background: #222;
    color: #eee;
    border: 1px solid #444;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 6px;
}

/* Input focus ring */
.help-modal-content .input:focus,
.help-modal-content input[type="text"]:focus,
.help-modal-content input[type="email"]:focus,
.help-modal-content input[type="password"]:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}
body.dark-mode .help-modal-content .input:focus,
body.dark-mode .help-modal-content input[type="text"]:focus,
body.dark-mode .help-modal-content input[type="email"]:focus,
body.dark-mode .help-modal-content input[type="password"]:focus {
    border-color: #66b0ff;
    box-shadow: 0 0 0 3px rgba(102, 176, 255, 0.25);
}
body.light-mode {
    background-color: #f8f9fa;
    color: #333;
}

body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

/* Prevent background scroll when a modal is open */
body.modal-open {
    overflow: hidden;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    /* padding-top: 120px;  */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff; /* Solid white background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure the header is above other content */
    width: 100%;
    left: 0; /* Ensures the header spans the entire width */
    box-sizing: border-box; /* Ensures padding is included in width */
    flex-direction: column; /* default: stack rows */
    align-items: flex-start; /* left align rows */
    /* padding: 10px 0; */
}

/* New header row with title left and actions right */
.header-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* right edge alignment */
    gap: 8px; /* space between rows */
}

.actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Nudge the top row slightly down to avoid protruding above header */
.header-right .top-row {
    margin-top: 6px;
}

.help-icon-container { position: static; }

/* Stronger override: when help icon is inside header-right, never use absolute */
.header-right .help-icon-container {
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* Normalize theme switch spacing within header-right rows */
.header-right .theme-switch-container {
    margin: 0 !important;
}

.plan-selector-placeholder {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0,0,0,0.06);
    color: #555;
    font-size: 14px;
}

body.dark-mode .plan-selector-placeholder {
    background: rgba(255,255,255,0.08);
    color: #ddd;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* space between switch and auth button */
}

.header-bottom {
    margin-top: 10px;
    width: 100%;
}

.user-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); 
    gap: 10px; /* Adds space between each week's choice */
}

.user-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    background-color: #f0f0f0; /* Light background for text blocks */
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    text-decoration: none; /* Remove underline from links */
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
    transition: background-color 0.3s ease;
}

.user-choice:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
}

body.dark-mode .user-choice {
    background-color: #444;
    color: #fff;
}

body.dark-mode .user-choice:hover {
    background-color: #555;
}

.controls {
    align-self: flex-end; /* Keeps the reset button on the right side */
    margin-top: 0; /* Avoid overlapping with auth button row */
}

h1 {
    margin-right: auto;
}

.header h1 a {
    text-decoration: none; /* Removes underline from the link */
    color: inherit; /* Inherits the color of the parent h1 */
}

.header h1 a:hover {
    text-decoration: underline; /* Optionally, add an underline on hover */
}

/* Referral banner */
.referral-banner {
    margin: 16px 0 24px 0;
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    color: #fff;
}

/* Muted palette (default in templates) */
.referral-banner--muted {
    background-color: #2B6CB0; /* muted primary blue */
    border: 1px solid rgba(255,255,255,0.15);
}

.referral-banner--muted .referral-text h3 { color: #eaf2ff; }
.referral-banner--muted .referral-text p { color: rgba(255,255,255,0.9); }

/* Bold palette */
.referral-banner--bold {
    background-color: #0d6efd; /* brighter blue */
    border: 1px solid rgba(255,255,255,0.2);
}

.referral-banner--bold .referral-text h3 { color: #ffffff; }
.referral-banner--bold .referral-text p { color: rgba(255,255,255,0.95); }

.referral-banner .referral-text {
    flex: 1 1 auto;
}

.referral-banner .referral-text h3 { margin: 0 0 6px 0; }

.referral-banner .referral-text p { margin: 0; }

.referral-banner .referral-cta {
    flex: 0 0 auto;
}

.referral-banner .cta-button {
    background-color: #E0550B; /* Partner brand orange */
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    border: 2px solid rgba(0,0,0,0.05);
}

.referral-banner .cta-button:hover {
    background-color: #f06928; /* slightly lighter on hover */
}

/* Splash banner variant (fixed at bottom, hidden by default) */
.splash-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    width: calc(100% - 32px);
    max-width: 920px;
    z-index: 1200;
    transition: opacity 0.28s ease, transform 0.28s ease;
    padding: 20px 60px 20px 20px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Use the bold color scheme directly */
    background-color: #0d6efd;
    border: 1px solid rgba(255,255,255,0.2);
    color: #ffffff;
}

/* Ensure text colors match the bold theme */
.splash-banner .referral-text h3 { 
    color: #ffffff !important;
    margin: 0 0 6px 0;
}

.splash-banner .referral-text p { 
    color: rgba(255,255,255,0.95) !important;
    margin: 0;
}

.splash-banner .splash-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1201; /* Ensure it's above the banner */
    transition: background-color 0.2s ease;
}

.splash-banner .splash-close:hover {
    background: rgba(0,0,0,0.5);
}

.splash-banner .splash-close:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.splash-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    visibility: hidden;
}

.splash-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
}

/* Ensure the banner content doesn't overlap with the close button */
.splash-banner .referral-text,
.splash-banner .referral-cta {
    position: relative;
    z-index: 1200;
}

/* Make sure links in the banner use the correct colors */
.splash-banner a {
    color: #ffffff;
    text-decoration: none;
}

/* Style for the bold variant */
.referral-banner--bold {
    background-color: #0d6efd;
    border: 1px solid rgba(255,255,255,0.2);
}

.referral-banner--bold .referral-text h3 { 
    color: #ffffff !important;
}

.referral-banner--bold .referral-text p { 
    color: rgba(255,255,255,0.95) !important;
}

@media (max-width: 768px) {
    .referral-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .referral-banner .referral-cta { width: auto; }
    .referral-banner .cta-button {
        width: auto; /* keep to content width on mobile */
        max-width: 100%;
        white-space: nowrap; /* avoid wrapping making it overly long */
        text-align: center;
    }
}

.reset-button {
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.reset-button:hover {
    background-color: #ff1a1a;
}

.share-button {
    padding: 10px 20px;
    background-color: #007bff; /* Primary blue color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px; /* Adds some space between Reset and Share buttons */
}

.share-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Desktop: three-column grid
   [ + / … ] | [Set over Reset] | [Log out over Share]
   Columns 2 and 3 have equal, bounded widths so Set and Reset match exactly. */
@media (min-width: 769px) {
  /* 3 columns: menu (narrow), left (bounded), right (bounded) */
  .header-right {
    display: grid;
    grid-template-columns: fit-content(80px) minmax(160px, 180px) minmax(160px, 180px);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "top top top"
      "menu select auth"
      ". reset share";
    column-gap: 8px;
    row-gap: 4px; /* tighter vertical spacing */
    align-items: center;
  }

  /* Flatten wrappers so inner controls can be direct grid items */
  .header-right .actions-row.middle-row,
  .header-right .actions-row.bottom-row,
  .header-right .controls,
  .header-right .pickset-inline { display: contents; }

  /* Place areas */
  .header-right .top-row { grid-area: top; justify-self: end; margin-top: 0; padding-bottom: 2px; align-items: center; }
  .header-right .theme-switch-container { padding-bottom: 2px; margin: 0; }
  /* Help button stays 30px on desktop */
  .header-right .help-button { width: 30px; height: 30px; line-height: 30px; }
  /* Make + and … half-size on desktop */
  .header-right .pickset-btn {
    box-sizing: border-box; /* include border in size */
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    overflow: hidden; /* prevent content from expanding box */
    border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center;
    font-size: 10px;
  }
  /* Put +/… in column 1 (menu), Set in column 2 (select) */
  .header-right .pickset-menu-wrap { grid-area: menu; justify-self: end; display: flex; gap: 6px; align-items: center; }
  .header-right .pickset-select-wrap { grid-area: select; justify-self: stretch; width: 100%; }
  .header-right .auth-controls { grid-area: auth; justify-self: stretch; }
  .header-right #reset-button { grid-area: reset; justify-self: stretch; margin: 0; }
  .header-right #share-button { grid-area: share; justify-self: stretch; margin: 0; }

  /* Make buttons fill their grid column width and remove inline margin */
  .reset-button, .share-button { width: 100%; }
  .share-button { margin-left: 0; }

  /* Prevent columns from exploding: bound control widths */
  .pickset-select {
    width: 100%;
    max-width: 180px;   /* match column */
    min-width: 160px;   /* same as column min to equal Reset */
    box-sizing: border-box;
    margin: 0; /* remove stray margins that create extra spacing */
  }
  .auth-button, .reset-button, .share-button {
    max-width: 180px;   /* match column */
    min-width: 160px;
    box-sizing: border-box;
  }
  .auth-button { width: 100%; }
}

.week-container {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.light-mode .week-container {
    background-color: #f1f1f1;
}

.dark-mode .week-container {
    background-color: #2c2c2c;
    border-color: #444;
}

.matchups {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.game {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-pair {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-button {
    width: 100px;
    padding: 10px;
    margin: 5px 0;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    background: var(--team-color); /* Uses the gradient or solid color */
    transition: transform 0.2s;
    text-align: center;
    background-size: 100% 100%; /* Ensures the gradient covers the entire button */
    background-repeat: no-repeat;
}

.team-button:hover {
    transform: scale(1.05);
}

.team-button.selected {
    border: 3px solid black; 
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5); /* Added for better visibility */
}

body.dark-mode .team-button.selected {
    border: 3px solid white;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

body.dark-mode .header {
    background-color: #333333; /* Solid dark background for dark mode */
}

/* Auth controls and button (Login/Logout) */
.auth-controls {
    /* on the actions row; no extra margins needed */
    margin: 0;
}

.auth-button {
    padding: 10px 20px;
    background-color: #28a745; /* Green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block; /* standard size; not full width */
    text-align: center;
    text-decoration: none; /* remove underline for anchor variant */
}

.auth-button:hover {
    background-color: #218838; /* Darker green on hover */
    text-decoration: none;
}

.team-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.at-sign {
    margin: 5px 0;
    font-size: 16px;
}

/* .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right: 10px;
    display: flex;
    align-items: center;
} */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right: 10px; /* Adds space on the right of the switch */
    vertical-align: middle;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 34px;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider {
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "☀️"; /* Sun icon */
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #121212;
    transition: .4s;
    border-radius: 50%;
    font-size: 14px;
}

input:checked + .slider:before {
    transform: translateX(26px);
    content: "🌙"; /* Moon icon */
    background-color: #f8f9fa
}

.theme-switch-container {
    margin-top: 10px;
    margin-bottom: 0;
}

#copy-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    font-size: 16px;
}

#copy-modal.show {
    display: block;
}

.share-modal {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: palegreen;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1100; /* Higher than the header */
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.share-modal.hidden {
    display: none;
}

@media (max-width: 768px) { /* Mobile view */
    /* Use more of the screen on mobile */
    .container { width: 94%; padding: 12px; }

    /* Make the header title smaller and stack controls below it */
    .header-top { flex-direction: column; align-items: stretch; gap: 8px; }
    .header h1 { font-size: 1.8rem; line-height: 1.1; margin: 0; }

    /* Header-right becomes full-width stack, but right-aligned rows */
    .header-right { align-items: flex-end; gap: 6px; width: 100%; }
    .actions-row { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
    .header-right .top-row { margin-top: 0; }

    /* Button sizing tweaks */
    .help-button { width: 28px; height: 28px; font-size: 16px; line-height: 28px; }
    .auth-button, .reset-button, .share-button { padding: 10px 16px; font-size: 15px; border-radius: 6px; min-width: 120px; text-align: center; }

    /* Simple consistent sizing on mobile */
    .auth-button, .reset-button, .share-button { min-width: 160px; display: inline-block; }
    .header-right .actions-row.middle-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .pickset-inline { display: contents; }
    .pickset-menu-wrap { order: 0; width: 100%; display: flex; gap: 8px; }
    /* Place Log in/Log out above Share (right), selector above Reset (left) */
    .auth-controls { order: 2; align-self: flex-end; }
    .pickset-select-wrap { order: 1; align-self: flex-end; }
    .pickset-select { width: 160px; }
    .plan-selector-placeholder { font-size: 12px; padding: 5px 8px; }

    /* Ensure the bottom control row aligns nicely and doesn't float over title */
    .controls { align-self: flex-end; }

    /* Reduce team button sizes slightly for tighter mobile fit */
    .user-choices {
        grid-template-columns: repeat(6, 1fr); /* Max 6 items per row */
    }

    .week-container .matchups {
        display: flex;
        justify-content: center; /* Center the game units horizontally */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    .week-container .game .team-pair {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        gap: 10px !important; /* Ensure spacing is applied */
    }

    .week-container .game .team-button {
        width: 90px !important; /* Set a fixed width for uniform size */
        padding: 5px 10px !important;
        font-size: 14px !important;
        text-align: center; /* Center the text within the button */
    }

    .week-container .game .at-sign {
        margin: 0 10px !important; /* Adjust spacing around "@" */
        font-size: 18px !important;
    }

    /* Stack and center/right-align nicely on mobile without forcing full width */
    .auth-controls {
        width: auto;
    }
}

.gameday-label {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0; /* Add some space around the label */
    color: #555; /* Slightly muted color */
}

body.dark-mode .gameday-label {
    color: #ddd; /* Lighter color for dark mode */
}

.week-container .game {
    border: 1px solid #ddd; /* Light border around each game */
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9; /* Slightly different background color */
    margin-bottom: 20px; /* Add space between games */
}

/* Divisional matchup highlight (light mode) */
.week-container .game.divisional {
    border-color: #8e44ad; /* standout purple border */
    background-color: rgba(142, 68, 173, 0.08); /* subtle tint that doesn't cover team button colors */
}

body.dark-mode .week-container .game {
    border-color: #444; /* Darker border for dark mode */
    background-color: #333; /* Darker background color for dark mode */
}

/* Divisional matchup highlight (dark mode) */
body.dark-mode .week-container .game.divisional {
    border-color: #f39c12; /* warm amber border for contrast on dark */
    background-color: rgba(243, 156, 18, 0.12);
}

/* Tooltip for divisional games */
.week-container .game.divisional[data-tip] {
    position: relative;
}

.week-container .game.divisional[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: -10px;
    right: 10px;
    transform: translateY(-100%);
    background: #2c3e50;
    color: #ecf0f1;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
    z-index: 2;
}

.week-container .game.divisional[data-tip]:hover::after,
.week-container .game.divisional[data-tip]:focus-within::after {
    opacity: 1;
}

/* Dark mode tooltip variant */
body.dark-mode .week-container .game.divisional[data-tip]::after {
    background: #111;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Touch devices: show a small always-visible badge instead of hover tooltip */
@media (hover: none) and (pointer: coarse) {
  .week-container .game.divisional[data-tip]::after {
    opacity: 1;                /* always visible */
    content: 'DIV';            /* concise badge */
    top: 8px;
    right: 8px;
    transform: none;           /* place inside the card */
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;      /* pill badge */
    background: #2c3e50;       /* light-mode base */
    color: #ecf0f1;
  }
  body.dark-mode .week-container .game.divisional[data-tip]::after {
    background: #111;          /* dark-mode base */
    color: #fff;
  }
}

/* Style for the help button */
.help-icon-container {
    position: absolute;
    top: 10px;
    right: 20px;
}

.help-button, .pickset-btn {
    background-color: #007bff; /* Primary blue color */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.help-button:hover, .pickset-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Style for the help modal */
.help-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Ensure it's on top */
}

body.modal-open{
    overflow: hidden;
}

.help-modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    text-align: justify;
    position: relative;
    /* top: 20px; */
}

/* Help modal styling for light mode */
body.light-mode .help-modal-content {
    background-color: #f8f9fa; /* Light background for light mode */
    color: #333; /* Dark text for contrast */
    border: 2px solid #ddd; /* Light border */
}

/* Help modal styling for dark mode */
body.dark-mode .help-modal-content {
    background-color: #333; /* Dark background for dark mode */
    color: #fff; /* Light text for contrast */
    border: 2px solid #444; /* Dark border */
}

/* Modernized typography for help modal */
.help-modal-content h2 {
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0.2px;
    margin: 0 0 12px 0;
}

.help-modal-content h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: 10px auto 14px auto; /* centered under the title */
    background: #E0550B; /* subtle accent */
    border-radius: 2px;
    opacity: 0.9;
}

.help-modal-content p {
    margin: 0 0 12px 0; /* tighter, consistent spacing */
    line-height: 1.6;
    font-size: 0.98rem;
}

.help-modal-content p + p {
    margin-top: 6px; /* subtle grouping */
}

/* Links with modern underline treatment */
.help-modal-content a {
    color: #0d6efd; /* primary blue */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(13, 110, 253, 0.45);
    font-weight: 600;
}

.help-modal-content a:hover {
    text-decoration-color: currentColor;
}

/* Light/Dark specific link colors */
body.dark-mode .help-modal-content a {
    color: #66b0ff;
    text-decoration-color: rgba(102, 176, 255, 0.5);
}

body.dark-mode .help-modal-content p {
    color: #ddd; /* soften pure white for long text */
}

/* Close button styling */
.help-modal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.help-modal .close:hover,
.help-modal .close:focus {
    color: black;
}

/* Help button styling for light mode */
body.light-mode .help-button, body.light-mode .pickset-btn {
    background-color: #f8f9fa; /* Light mode background */
    color: #333; /* Dark text color for contrast */
    border: 2px solid #ddd; /* Thicker border */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Help button styling for dark mode */
body.dark-mode .help-button, body.dark-mode .pickset-btn {
    background-color: #333; /* Dark mode background */
    color: #fff; /* Light text color for contrast */
    border: 2px solid #444; /* Thicker border */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover effects */
body.light-mode .help-button:hover, body.light-mode .pickset-btn:hover {
    background-color: #e0e0e0; /* Slightly darker on hover for light mode */
}

body.dark-mode .help-button:hover, body.dark-mode .pickset-btn:hover {
    background-color: #444; /* Slightly lighter on hover for dark mode */
}

/* ----- Pick-set bar styles ----- */
.pickset-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
}

/* Inline placement when used inside header middle row */
.pickset-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.pickset-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.pickset-right { display: flex; align-items: center; gap: 8px; }

.pickset-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pickset-tab {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

.pickset-tab.active {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

body.dark-mode .pickset-tab { background: #2c2c2c; color: #eee; border-color: #444; }
body.dark-mode .pickset-tab.active { background: #0d6efd; color: #fff; border-color: #0b5ed7; }

.pickset-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f8f9fa;
    color: #333;
    cursor: pointer;
}
body.dark-mode .pickset-btn { background: #2c2c2c; color: #eee; border-color: #444; }

.pickset-menu-wrap { position: relative; }
.pickset-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 6px;
    min-width: 160px;
    z-index: 1001;
}
body.dark-mode .pickset-menu { background: #333; border-color: #444; }

.pickset-menu.hidden { display: none; }
.pickset-menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; background: transparent; border: none; color: inherit; border-radius: 6px; cursor: pointer; }
.pickset-menu-item:hover { background: rgba(0,0,0,0.06); }
body.dark-mode .pickset-menu-item:hover { background: rgba(255,255,255,0.08); }
.pickset-menu-item.danger { color: #c0392b; }

.pickset-select-wrap { display: block; }
.pickset-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
}
body.dark-mode .pickset-select { background: #222; color: #eee; border-color: #444; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile: basic pick-set bar stacking (no conflicting header rules) */
@media (max-width: 768px) {
    .pickset-bar { padding: 8px 12px; flex-direction: column; align-items: stretch; gap: 8px; }
    .pickset-right { justify-content: flex-end; }
    .pickset-tabs { display: none; }
    .pickset-select-wrap { display: block; }
    .pickset-inline { width: 100%; }
}

/* Mobile: force exact 3-row header layout */
@media (max-width: 768px) {
  /* 3 rows x 2 columns grid */
  .header-right {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "menu top"
      "select auth"
      "reset share";
    row-gap: 6px;
    column-gap: 8px;
    align-items: center;
  }

  /* Flatten only middle-row wrappers so children can be positioned on the grid */
  .header-right .actions-row.middle-row,
  .header-right .actions-row.bottom-row,
  .header-right .pickset-inline,
  .header-right .controls { display: contents; }

  /* Place items by named grid areas */
  .header-right .pickset-menu-wrap { grid-area: menu; justify-self: start; }
  .header-right .top-row { grid-area: top; justify-self: end; }
  .header-right .pickset-select-wrap { grid-area: select; justify-self: stretch; }
  .header-right .auth-controls { grid-area: auth; justify-self: stretch; }
  .header-right #reset-button { grid-area: reset; justify-self: stretch; margin: 0; }
  .header-right #share-button { grid-area: share; justify-self: stretch; margin: 0; }

  /* Make controls fill their grid cell without overflow */
  .pickset-select { width: 100%; height: 38px; font-size: 14px; padding: 6px 10px; box-sizing: border-box; }
  .auth-button, .reset-button, .share-button {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 6px;
    box-sizing: border-box;
    margin: 0;
  }

  /* Compact icon buttons (help and +/…) */
  .help-button { width: 30px; height: 30px; font-size: 14px; line-height: 30px; }
  .pickset-btn { width: 30px; height: 30px; font-size: 14px; line-height: 30px; padding: 0; }

  /* Tighten group gaps and remove stray margins */
  .header-right .actions-row { gap: 6px; margin: 0; }
  .header-right .pickset-menu-wrap { gap: 6px; }
  .header-right .auth-controls, .header-right .pickset-select-wrap { margin: 0; }

  /* Remove margins from theme/help wrappers to align with + / ... */
  .theme-switch-container, .help-icon-container { margin: 0; }
}