/* === GENERAL PAGE STYLING === */
@font-face {
    font-family: 'Compacta';
    src: url('../IMAGES/Compacta-Bold.woff2') format('woff2'),
         url('../IMAGES/Compacta-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    margin-left: 20px;
    margin-right: 20px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-family: 'Compacta', sans-serif; /* Default font */
    background: url('../IMAGES/BACKGROUNDFINAL.png') no-repeat center center fixed;
    background-size: cover; /* Ensures it covers the whole screen */
    background-attachment: fixed; /* Keeps the background from moving when scrolling */
    text-align: center;
    margin: 0;
    padding: 0;
    color: white; /* Makes text white by default */
    overflow: auto; /* Makes the entire page scrollable */
    text-shadow:rgba(0, 0, 0, 0.5)
}

/* === Apply Text Stroke (Black Outline Around Letters) === */
h1, h2, h3, p, .indicator-label, button {
    text-shadow: 
        -1px -1px 0 black, 
         1px -1px 0 black, 
        -1px  1px 0 black, 
         1px  1px 0 black; /* Creates a bold black outline */
    color: white; /* Text remains white */
}

/* === MAIN CONTAINER === */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Adjusts dynamically based on content */
    padding-bottom: 50px; /* Adds space at the bottom for long scrolling */
}

/* === LOGO === */
.logo {
    display: flex;
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Ensure the image resizes properly */
.logo img {
    width: 380px;  /* Adjust width */
    height: auto;  /* Maintain aspect ratio */
    max-width: 100%;  /* Ensure it remains responsive */
}

/* Game mode Selector */
.mode-bar-wrapper {
    margin-top: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .mode-bar {
    display: flex;
    gap: 18px;
    align-items: center;
    background: none;
  }
  
  .mode-icon {
    width: 70px;
    height: 70PX;
    background-color: #1e1e1e;
    border: 3px solid #888;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
    cursor: pointer;
  }
  
  .mode-icon img {
    width: 50px;
    height: 50px;
    pointer-events: none;
  }
  
  .mode-icon:hover {
    border-color: gold;
    transform: scale(1.07);
  }

  .mode-icon:hover .mode-label {
    opacity: 1;
    transform: translateY(0);
  }
  
  .mode-icon.active {
    border-color: orange;
    box-shadow: 0 0 10px rgba(255,165,0,0.6);
  }
  .mode-label {
    position: absolute;
    top: 65px;
    color: white;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black,
                 -1px 1px 0 black, 1px 1px 0 black;
  }
  
  .check {
    position: absolute;
    bottom: -8px;
    right: -6px;
    background: #2ecc71;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: bold;
  }

/* INFO CONTAINER */

.info-container {
    display: flex;
    justify-content: center;
    background: #333232; /* Light grey background */
    padding: 10px;
    margin-bottom: 8px;
    gap: 20px;
    border-radius: 8px;
    /*border: 2px solid black; /* Added black border */
    border: 2px solid #c3a169; /* Gold Border */ 
}

/*MODAL BOX STARTS*/

/* === Fighter Roster Modal === */
.fighter-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 500px;
    background-color: #1E1E1E;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    text-align: center;
    border: 2px solid #C4A26A; /* Gold border */
}

/* Modal Header */
.fighter-title {
    font-size: 24px;
    font-weight: bold;
    color: white;
    border-bottom: 2px solid #C4A26A;
    padding-bottom: 10px;
}

/* Close Button */
.close-fighter {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background-color: #C4A26A;
    border-radius: 50%;
    padding: 5px 10px;
    text-align: center;
}

.close-fighter:hover {
    background-color: red;
}

/* Scrollable Fighter List Container */
.fighter-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: #2B2B2B;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    text-align: left;
    color: white;
}

/* Individual Fighter Name */
.fighter-container div {
    background-color: #3B3B3B;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: white;
    text-align: left;
    font-size: 14px;
}

/* Fighter Name Styling */
.fighter-container div strong {
    color: white;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}


/* Patch Notes Image Button */
/* Patch Notes Modal */
.patch-modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 500px;
    background-color: #1E1E1E;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    text-align: center;
    border: 2px solid #C4A26A; /* Gold border */
}

/* Modal Header */
.patch-title {
    font-size: 24px;
    font-weight: bold;
    color: white;
    border-bottom: 2px solid #C4A26A;
    padding-bottom: 10px;
}

/* Close Button */
.close-patch-notes {
    float: right;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background-color: #C4A26A;
    border-radius: 50%;
    padding: 5px 10px;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
}

.close-patch-notes:hover {
    background-color: red;
}

/* Scrollable Patch Notes Container */
.patch-notes-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: #2B2B2B;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    text-align: left;
}

/* Individual Patch Note Entry */
.patch-notes-container div {
    background-color: #3B3B3B;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: white;
    text-align: left;
    font-size: 14px;
}

/* Date Formatting */
.patch-notes-container div strong {
    color: #C4A26A;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

/* Patch Notes Text */
.patch-notes-container div span {
    color: #B3B3B3;
    font-style: italic;
}

/* Tooltip Styling */
/* Ensure the image size stays small */



/* STREAK COUNTER STYLE */

.fire-gif {
    position: relative;
    cursor: pointer;
    width: 50px;  /* Adjust based on your desired size */
    height: 40px; /* Maintain aspect ratio */
    display: inline-block; /* Ensures it doesn't stretch */
}

#streakContainer {
    position: relative;
    display: inline-block;
  }
  
  
  #streakOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    pointer-events: none;
    color: white; /* or whatever base text color */
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
         -1px  1px 0 black,
         1px  1px 0 black;
  }

  

.tooltip-hover {
    position: relative;
    cursor: pointer;
    width: 40px;  /* Adjust based on your desired size */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* Ensures it doesn't stretch */
}

/* Tooltip Styling */
.tooltip-hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Show Tooltip on Hover */
.tooltip-hover:hover::after {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* === CONTACT POPUP (Same Style as Patch Notes) === */
/* === CONTACT MODAL (Styled Identical to Patch Notes) === */
.contact-modal {
    display: none;
    position: fixed; /* Ensure it's positioned relative to the viewport */
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 500px;
    background-color: #1E1E1E;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    text-align: center;
    border: 2px solid #C4A26A;
}

/* Modal Content */
.contact-modal-content {
    position: relative;
}

/* Modal Header */
.contact-title {
    font-size: 24px;
    font-weight: bold;
    color: white;
    border-bottom: 2px solid #C4A26A;
    padding-bottom: 10px;
}

/* Close Button */
.close-contact {
    float: right;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background-color: #C4A26A;
    border-radius: 50%;
    padding: 5px 10px;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2000;
}

.close-contact:hover {
    background-color: red;
}

/* Ensure no inherited styles affect positioning */
.close-contact a {
    text-decoration: none;
    color: inherit;
}

/* Scrollable Contact Container */
.contact-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: #2B2B2B;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    text-align: left;
}

/* Individual Contact Entry */
.contact-entry {
    background-color: #3B3B3B;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: white;
    text-align: left;
    font-size: 14px;
}

/* Contact Entry Labels */
.contact-entry strong {
    color: #C4A26A;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

/* Contact Links */
.contact-entry span a {
    color: #B3B3B3;
    text-decoration: none;
    font-style: italic;
}

.contact-entry span a:hover {
    color: #ffffff;
}

/* MODAL ENDS */

/* === COLOR INDICATORS HEADER === */
.color-indicators-header {
    font-size: 18px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

/* === FEEDBACK INDICATORS CONTAINER (Now with Black Border) === */
.feedback-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #333232; /* Light grey background */
    padding: 15px;
    padding-bottom: 10px;
    margin-top: 10px;
    gap: 8px;
    border-radius: 8px;
    /*border: 2px solid black; /* Added black border */
    border: 2px solid #b6a232; /* Gold Border */
}

/* Feedback images */
.feedback-item {
    width: 50px;
    height: 50px;
    object-fit: contain; /* Ensures images fit properly */
}

.feedback-container-div {
    display: flex;
    flex-direction: row;
    gap: 20px;

}

/* Labels under each indicator */
.indicator-label {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
}

/* === INPUT BOX (Now with Black Border) === */
.input-box {
    display: flex;
    align-items: center;
    background: #333232;
    padding: 10px;
    margin-top: 20px;
    border-radius: 5px;
    border: 2px solid #b6a232; /* Gold Border */
}

input {
    width: 250px;
    padding: 10px;
    font-size: 16px;
    border: none;
    outline: none;
}

button {
    padding: 10px 15px;
    background: red;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}





/* === MOBILE RESPONSIVENESS === */
@media (max-width: 768px) {

    * {
        box-sizing: border-box;
      }      
    

    body, html {
        width: 100%;
        margin-bottom: 0;
        padding: 0;
        overflow-x: hidden; /* Prevents horizontal scrolling */
    }

    body {
        background: url('../IMAGES/BACKGROUNDFINAL.png') no-repeat center center fixed;
        background-size: cover; /* Ensures it covers the whole screen */
        background-position: center; /* Centers the background */
        background-attachment: fixed; /* Prevents scrolling issues */
        width: 100%;
        margin: 0;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-x: hidden; /* Prevents scrolling to the right */
    }

    .container {
        width: 100%;
        padding:  15px; /* Adds safe spacing */
    }

    .logo {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 80%; /* Full width to ensure centering */
    height: 80%;
    max-width: 400px; /* Adjust if needed */
    margin: 0 auto; /* Centers the logo */
    text-align: center;
    padding: 10px 0;
    }

    .logo img {
        display: block;
        margin: 0 auto; /* Ensures the image itself is centered */
        max-width: 100%; /* Prevents it from overflowing */
        height: auto;
    }

    .feedback-box {
        flex-wrap: wrap;
        gap: 10px;
        max-width: 95%;
    }

    .feedback-container-div {
        display: flex;
        flex-direction: row;
        gap: 5px;  
        font-size:x-small  
    }

    .input-box {
        max-width: 100%;
        display: flex;
        flex-direction: column; /* Stack input & button on smaller screens */
        justify-content: center;
        align-items: center;
    }

    input {
        width: 85%;
        text-align: center;
    }

    button {
        width: 85%;
        margin-top: 5px;

    }

    .previous-guesses-container {
        overflow-x: auto;
        display: block;
        width: 100%;
    }

    .guess-wrapper {
        overflow-x: auto;
        white-space: nowrap;
        min-width: 800px;
    }

    .headerRowContainer {
        display: flex;
        overflow-x: auto;
        padding-bottom: 5px;
        min-width: 800px;
    }

    .guess-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        min-width: 800px;
    }

    .hint-box {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
        background-size: cover;
        background-position: center;
        border-radius: 0px;
        border: 1px solid white;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        text-align: center;
        word-wrap: break-word;
        padding: 5px;
        box-sizing: border-box;
        line-height: 1.1;
        transform: rotateY(90deg); /* Hidden initially */
        opacity: 0;
        transition: transform 0.5s ease, opacity 0.5s ease;
        backface-visibility: hidden; /* Stops flickering */
        overflow: hidden;
        gap: 10px;
        text-shadow: 1px 1px 2px rgba(1, 1, 1, 1);
        white-space: normal; /* Ensures text wraps */

    }

    .hints-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hint-image {
        width: 60px;
        height: 60px;
    }

    .victory-card {
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
        max-width: 90%;
        width:90%;
        margin: 0 auto;
    }

    .victory-next-button img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      
}

/* Checkmark CSS */
.checkmark {
    display: none;
    position: absolute;
    bottom: -8px;
    right: -6px;
    background: #2ecc71;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: bold;
    pointer-events: none;
  }

  /* Footer Section */
  .footer {
    height: 200px;
    max-height: 200px;
    color: #ffffff;
    text-align: center;
    padding: 0px;
    padding-bottom: 150px;
  }
  
  .footer-container {
    max-width: 1200px;
    padding: 0 15px;
  }
  
  .social-links {
    margin-bottom: 10px;
  }
  
  .social-links a {
    margin: 0 8px;
    display: inline-block;
    transition: transform 0.3s ease;
  }
  
  .social-links a:hover {
    transform: scale(1.1);
  }
  
  .social-icon {
    width: 40px;
    height: 40px;
  }
  
  @media (max-width: 600px) {
    .social-icon {
      width: 30px;
      height: 30px;
    }
  }

  .copyright {
    font-size: small;
    color: #888;
  }
  
  .socials-text {
    font-size:medium;
    color: white;
    margin-top: -10px
  }

  .checkmark {
    display: none;
    position: absolute;
    bottom: -8px;
    right: -6px;
    background: #2ecc71;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: bold;
    pointer-events: none;
  }

  .check {
    position: absolute;
    bottom: -8px;
    right: -6px;
    background: #2ecc71;
    color: white;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: bold;
  }









  

  






  :root {
    /* layout */
    --grid-max-width: 1050px;
    --grid-gap: 24px;
  
    /* card + image geometry */
    --card-stroke: 3px;
    --card-radius: 22px;
    --img-radius: 16px;
    --img-stroke: 3px;
  
    /* inner column (centers image + voting) */
    --inner-max: 520px;
    --pad-x: 18px;
  
    /* voting module + rows */
    --module-pad: 16px;
    --module-border-width: 0px;        /* keep outer frame OFF */
    --row-height: 52px;                /* was 60px */
    --row-gap: 10px;                   /* was 16px */
    --row-stroke: 3px;
    --row-radius: 14px;
    --row-pad-x: 12px;                 /* was 16px */
    --col-letter: 38px;                /* was 42px */
    --col-pct: 64px;                   /* was 70px */
    --col-gap: 12px;
    --row-font: 16px;
  
    /* optional: make the pills list a touch narrower than inner column */
    --rows-max: 480px;
  
    /* site colors */
    --gold: #C4A26A;
    --card-bg: #2D2D2D;                 /* dark panel */
    --pill-bg: #3A3A3A;                 /* voting pill fill */
    --text-on-dark: #FFFFFF;
    --muted-on-dark: #CFCFCF;
    --stroke-dark: #000000;
  
    /* fill tints (soft for dark UI) */
   
    --fill-A:#ffc1c1E6;  /* brighter pink-red */
    --fill-B:#ffd89aE6;  /* brighter peach */
    --fill-C:#ffe95aE6;  /* bright pastel yellow */
    --fill-D:#bdeabfE6;  /* bright mint */
    --fill-E:#c5d2ffE6;  /* brighter baby blue */
    --fill-F:#d8c8ffE6;  /* brighter lilac */
    }
    

  
  /* Grid: auto 1/2/3 columns; each card ≥ 310px */
  .daily-take-root,
  #dailyTakeRoot.daily-take-root {
    width: 100%;
    max-width: var(--grid-max-width);
    margin-bottom: 20px;
    padding: 0 12px;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    align-items: start;
  }
  
  /* Card */
  .dt-card {
    background: var(--card-bg);
    color: var(--text-on-dark);
    text-shadow: none;
    border: var(--card-stroke) solid var(--gold);   /* gold trim */
    border-radius: var(--card-radius);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    overflow: hidden;
    text-align: initial;
  }
  .dt-card * { text-shadow: none; }
  
  /* Centered inner column (image, meta, voting) */
  .dt-header,
  .dt-meta,
  .dt-grades {
    width: min(100%, var(--inner-max));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    box-sizing: border-box;
  }
  
  /* Image block */
  .dt-header {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    padding-bottom: 0;
  }
  .dt-pic {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;                       /* square */
    height: auto;                               /* width controls height */
    object-fit: cover;
    border: var(--img-stroke) solid var(--stroke-dark);   /* inner black frame */
    border-radius: var(--img-radius);
    background: #1f1f1f;
    margin-left: auto;
    margin-right: auto;
    box-shadow: inset 0 0 0 2px var(--gold);    /* subtle gold ring */
  }
  
  /* Meta (category + name) */
  .dt-meta { padding-top: 12px; padding-bottom: 6px; text-align: left; }
  .dt-tag  { font:700 12px/1 system-ui,sans-serif; letter-spacing:.18em; color: var(--muted-on-dark); margin-bottom: 6px; }
  .dt-name { font:800 22px/1.2 system-ui,sans-serif; color: var(--text-on-dark); }
  
  /* Voting module wrapper */
  .dt-grades {
    margin-top: 14px;
    margin-bottom: 22px;
    padding: var(--module-pad);
    background: transparent;
    border-radius: 18px;
    border: var(--module-border-width) solid var(--gold); /* outer frame (off) */
    display: grid;
    gap: var(--row-gap);
    box-sizing: border-box;
    width: 100%;
  }
  
  /* Make the pills list slightly narrower for a slimmer feel */
  .dt-grades .dt-row {
    max-width: var(--rows-max);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Rows */
  .dt-row {
    position: relative;
    height: var(--row-height);
    min-height: var(--row-height);
    width: 100%;
  
    display: grid;
    grid-template-columns: var(--col-letter) 1fr var(--col-pct);
    column-gap: var(--col-gap);
    align-items: center;
    justify-items: stretch;
  
    padding: 0 var(--row-pad-x);
    background: var(--pill-bg);
    border: var(--row-stroke) solid var(--stroke-dark);   /* inner black stroke */
    border-radius: var(--row-radius);
    box-sizing: border-box;
    cursor: pointer;
    color: var(--text-on-dark);
    text-align: left;
    box-shadow: 0 0 0 0 var(--gold);                       /* no static gold ring */
  }
  .dt-row.is-selected { outline: 2px dashed var(--gold); outline-offset: 2px; }
  .dt-row.is-locked:not(.is-selected) { opacity: .70; cursor: default; }
  
  /* Fill layer */
  .dt-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    transition: width .45s ease;
    border-radius: calc(var(--row-radius) - 4px);
  }
  .dt-row[data-grade="A"] .dt-fill { background: var(--fill-A); }
  .dt-row[data-grade="B"] .dt-fill { background: var(--fill-B); }
  .dt-row[data-grade="C"] .dt-fill { background: var(--fill-C); }
  .dt-row[data-grade="D"] .dt-fill { background: var(--fill-D); }
  .dt-row[data-grade="E"] .dt-fill { background: var(--fill-E); }
  .dt-row[data-grade="F"] .dt-fill { background: var(--fill-F); }
  
  /* Labels */
  .dt-letter { font-weight: 800; font-size: var(--row-font); line-height: 1; }
  .dt-pct    { font-weight: 900; font-size: var(--row-font); line-height: 1; text-align: right; color: var(--text-on-dark); }
  
  /* Optional date label */
  .dt-day { color: #bdbdbd; text-shadow: none; }
  
  /* Optional hover lift (keeps the gold pulse only on hover) */
  .dt-row:hover{
    box-shadow: 0 0 0 2px var(--gold), 0 6px 14px rgba(0,0,0,.35);
    filter: brightness(1.02);
  }
  
  /* Keep text above the fill */


/* White text + non-shifting black halo (no stroke) */
.dt-letter,
.dt-pct {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;      /* kill stroke */
  text-shadow:
    0 0 3px #000,
    0 0 3px #000,
    0 0 2px #000 !important;               /* soft glow = readable, no drift */
  filter: drop-shadow(0 0 1px #000);       /* extra crisp edge without reflow */
}

/* Fallbacks in case these vars aren’t present yet */
:root{
  --gold: #c3a169;
  --card-bg: #2D2D2D;
  --text-on-dark: #FFFFFF;
  --muted-on-dark: #CFCFCF;
}

/* Hero wrapper */
.dt-hero{
  width: 60%;
  display: flex;
  justify-content: center;
  margin: 18px auto 22px;
  padding: 0px;               /* safe gutter */
}

/* Card-like inner panel */
.dt-hero__inner{
  width: 100%;
  max-width: var(--grid-max-width, 1200px);
  background: linear-gradient(180deg, #2d2d2de6 0%, #232323e6 100%);
  border: 3px solid var(--gold);
  border-radius: 18px;
  color: var(--text-on-dark);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(196,162,106,.12);
  padding: 18px 22px 16px;
  position: relative;
  overflow: hidden;
}

/* subtle gold glow edge */
.dt-hero__inner::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 24px rgba(196,162,106,.18);
  border-radius: 16px;
}

/* Title */
.dt-hero__title{
  margin: 4px 0 6px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  text-shadow: 0 1px 0 #000;
}

/* Subtitle */
.dt-hero__subtitle{
  margin: 0 0 10px;
  color: var(--muted-on-dark);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.5;
}

/* Hairline divider */
.dt-hero__rules{
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(196,162,106,.35);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  list-style: none;
}

/* Rule “chips” */
.dt-hero__rules li{
  background: #3A3A3A;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(196,162,106,.35);
}

/* Mobile tighten */
@media (max-width: 640px){
  .dt-hero{width: 100%; }
  .dt-hero__inner{ padding: 16px 16px 14px; }
  .dt-hero__rules{ gap: 10px; }
  .dt-hero__rules li{ padding: 6px 10px; font-size: 12px; }
}

/* --- Daily Take timer --- */

.dt-hero__timer {
  margin: 0.4rem;
  padding: 0.9rem 1.8rem;
  border-radius: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;

  border: 0px solid #c3a169;       /* gold-ish border */
          /* soft gold glow */
}

.dt-timer-label {
  font-size: 1.0rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

.dt-timer-value {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;

  color: #ffe7b0; /* warm gold */
  text-shadow:
    0 0 8px rgba(255, 204, 120, 0.9),
    0 0 18px rgba(0, 0, 0, 0.95);
}

.dt-timer-note {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* When timer hits 00:00:00 */
.dt-timer-live .dt-timer-value {
  animation: dt-timer-pulse 1s infinite alternate;
}

@keyframes dt-timer-pulse {
  from {
    transform: scale(1);
    text-shadow:
      0 0 8px rgba(255, 204, 120, 0.8),
      0 0 18px rgba(0, 0, 0, 1);
  }
  to {
    transform: scale(1.04);
    text-shadow:
      0 0 14px rgba(255, 230, 170, 1),
      0 0 24px rgba(0, 0, 0, 1);
  }
}

.dt-hero__timer {
  /* your existing styles here */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.dt-timer-underline {
  margin-top: 0.1rem;
  margin-bottom: 0.3rem;
  width: 100%;                 /* adjust width if you like */
  height: 3px;
  border-radius: 999px;

  background: linear-gradient(
    to right,
    transparent,
    #ffda8a,
    #ffe9b8,
    #ffda8a,
    transparent
  );

  box-shadow:
    0 0 8px rgba(255, 218, 138, 0.8),
    0 0 14px #3A3A3A(0, 0, 0, 0.9);
}

/* ---- Base (desktop stays close to what you have) ---- */
.mode-bar-wrapper {
  margin-top: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 10px; /* helps on small screens */
}

.mode-bar {
  display: flex;
  gap: 18px;
  align-items: center;
  background: none;
  flex-wrap: nowrap;
  justify-content: center;
}

/* Make touch feel nicer */
.mode-icon {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

 /* Desktop / default stays as-is */
 .mode-bar-wrapper {
  padding: 0 10px;
}

/* iOS-style horizontal scroll on small screens */
@media (max-width: 700px) {
  .mode-bar-wrapper {
    justify-content: flex-start;          /* align to left for scroll feel */
    overflow-x: auto;                      /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch;     /* smooth iOS scrolling */
    scrollbar-width: none;                /* Firefox hide scrollbar */
  }

  .mode-bar-wrapper::-webkit-scrollbar {
    display: none;                         /* Chrome/Safari hide scrollbar */
  }

  .mode-bar {
    flex-wrap: nowrap;                     /* IMPORTANT: prevent wrapping */
    gap: 14px;
    padding: 6px 4px 14px;                 /* room for labels */
    width: max-content;                    /* shrink to content so it scrolls */
  }

  /* Make buttons bigger on phones (iOS included) */
  .mode-icon {
    width: 78px;
    height: 78px;
    flex: 0 0 auto;                        /* don't shrink in flex row */
    border-width: 3px;
  }

  .mode-icon img {
    width: 52px;
    height: 52px;
  }

  /* On touch devices, show labels without hover */
  .mode-label {
    top: 78px;
    font-size: 0.85rem;
    opacity: 1;
    transform: translateY(0);
  }

  /* Give space for label so it doesn't overlap next row */
  .mode-icon {
    margin-bottom: 18px;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .mode-icon {
    width: 72px;
    height: 72px;
  }

  .mode-icon img {
    width: 48px;
    height: 48px;
  }

  .mode-label {
    top: 72px;
    font-size: 0.8rem;
  }
}

@media (max-width: 700px) {
  .mode-bar-wrapper {
    scroll-snap-type: x mandatory;
  }
  .mode-icon {
    scroll-snap-align: start;
  }
}