/* **************************** */
/* Primary Layout               */
/* **************************** */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-kerning: normal;
    color: #303030;
    background-image: url(images/bk_ricepaper.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Ensures the background stays fixed during scrolling */
    width: 100%;
    height: 100%;
    min-height: 100vh; /* Default fallback */
}

.wrapper {
    height: 100vh; /* Default/fallback */
    margin: 0 60px;
    display: flex;
    flex-direction: column;
}

/* iOS Safari override using JS-calculated viewport height */
@supports (height: 100vh) {
    .wrapper {
        height: calc(var(--vh, 1vh) * 100);
    }
}

/* iOS exception, override min-height only if --vh is set by JS */
@supports (height: 100vh) {
    body, html {
        min-height: calc(var(--vh, 1vh) * 100);
    }

    .wrapper {
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

.container {
    flex: 1; /* Take remaining vertical space between header/footer */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Top-aligned content */
}

.centerdiv {
    margin: 0 auto;
    vertical-align: middle;
}
/* **************************** */
/* High Scoring Roll Animation  */
/* **************************** */
.flying-text {
    position: relative; /* Needed for pseudo-element positioning */
    font-size: 36px;
    font-weight: bold;
    color: rgb(29, 114, 230);
    white-space: nowrap;
    pointer-events: none;
    animation: popFloatFade 1.3s ease-out forwards;
    z-index: 10;
}

/* Blurred glow layer */
.flying-text::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -45%);
    width: 120%;
    height: 120%;
    filter: blur(6px);
    background: rgba(255, 255, 255, 1); /* White glow */
    border-radius: 20px;
    z-index: -1;
    pointer-events: none;
}


@keyframes popFloatFade {
    0% {
        opacity: 0.9;
        transform: scale(1) translateY(-30px);
    }

    60% {
        opacity: 1; /* Still fully visible */
        transform: scale(1.3) translateY(-20px); /* Smooth progression */
    }

    100% {
        opacity: 0;
        transform: scale(0.9) translateY(80px); /* Smooth finish */
    }
}

.shutout-animated-text {
    position: relative; /* Needed for pseudo-element positioning */
    font-size: 36px;
    font-weight: bold;
    color: rgb(29, 114, 230);
    white-space: nowrap;
    pointer-events: none;
    animation: popFloatFade 2s ease-out forwards;
    z-index: 10;
}

    /* Blurred glow layer */
    .shutout-animated-text::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -45%);
        width: 120%;
        height: 120%;
        filter: blur(6px);
        background: rgba(255, 255, 255, 1);
        border-radius: 20px;
        z-index: -1;
        pointer-events: none;
    }

/* **************************** */
/* Leaderboard                  */
/* **************************** */
.leaderboard-container {
    display: grid;
    gap: 10px;
    padding: 15px;
}

/* Default: Single Column for Mobile */
@media (max-width: 600px) {
    .leaderboard-container {
        grid-template-columns: 1fr;
    }
}

/* Medium Screens: 3 Rows of 2 Columns */
@media (min-width: 601px) and (max-width: 1024px) {
    .leaderboard-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Screens: 2 Rows of 3 Columns */
@media (min-width: 1025px) {
    .leaderboard-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.leaderboard-section {
    background: rgba(255,255,255,0.40);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

    .leaderboard-section h4 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 0;
    }

#mostWins, #mostGamesPlayed, #highScore, #longestWinStreak, #mostConsecutiveDaysPlayed {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.leaderboard-row {
    display: flex;
    justify-content: flex-start;
    gap: 10px; /* Reduce from 15px */
    align-items: center; /* Ensure text is vertically aligned */
    min-height: 20px; /* Adjust as needed */
}

.leaderboard-column {
    line-height: 1.2; /* Reduce from the default (~1.4-1.6) */
    text-align: left;
    padding: 2px 5px; /* Reduce vertical padding */
    margin: 0; /* Remove extra spacing */
}

/* **************************** */
/* Confetti Popper Canvas       */
/* **************************** */

canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000; /* High value to ensure it's above other elements */
    pointer-events: none; /* Allows clicks to pass through the canvas */
    transition: top 0.5s ease-out, left 0.5s ease-out;
}

.shutout-text {
    position: absolute;
    font-size: 26px;
    font-weight: bold;
    color: rgb(29, 114, 230);
    background-color: white;
    border-radius: 10px;
    padding: 6px 14px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 1000001;
    animation: shutoutFallFade 2s ease-out forwards;
}

@keyframes shutoutFallFade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(60px) scale(1.05);
    }

    100% {
        opacity: 0;
        transform: translateY(120px) scale(0.9);
    }
}

/* **************************** */
/* Computerplay Pointer         */
/* **************************** */

#pointer {
    position: absolute;
    width: 75px;
    height: 75px;
    z-index: 1000003;
    visibility: hidden;
    background: radial-gradient(yellow, transparent, transparent);
    transition: top 0.5s ease-out, left 0.5s ease-out;
}

/* **************************** */
/* Dice Rolling Area            */
/* **************************** */

:root {
    --dice-size: 110px;
    --strip-size: 660px; /* must be 6*dice-size */
}

#dicecontainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 5px 20px 20px 20px;
}

.dice-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.dice {
    width: var(--dice-size);
    height: var(--dice-size);
    margin: 0;
    cursor: pointer;
}

.diceroll-outer {
    width: var(--dice-size);
    height: var(--dice-size);
    background-color: rgb(120,120,120);
    overflow: hidden;
    border: 1px solid rgb(120,120,120);
    border-radius: 10px;
}

.diceroll-inner {
    width: var(--dice-size);
    height: var(--dice-size);
    background-size: var(--dice-size) var(--strip-size);
    background-color: rgb(120,120,120);
}

/* **************************** */
/* Dice Score Row               */
/* **************************** */
.dicescorerow {
    display: flex;
    justify-content: center;
    align-items: center; /* Ensures it doesn't stretch */
    padding: 0; /* Remove extra space */
    margin: 0; /* Remove extra space */
    height: auto; /* Prevent unwanted stretching */
}

.dsleft {
    flex: 1;
    text-align: right;
    padding-right: 11px;
    font-size: 22px;
    color: #303030;
    font-weight: bold;
}

.dsright {
    flex: 1;
    text-align: left;
    padding-left: 11px;
    font-size: 22px;
    color: #303030;
    font-weight: bold;
}

.dsmiddle {
    background-color: black;
    white-space: nowrap;
    text-align: center;
    display: inline-flex; /* Ensures it expands naturally */
    align-items: center; /* Vertically centers content inside */
    justify-content: center; /* Horizontally centers content */
    border-radius: 11px;
    gap: 0px; /* Keeps digits contiguous */
    /* Maintain dynamic horizontal padding */
    padding-left: calc(35px / 3);
    padding-right: calc(35px / 3);
    padding-top: calc(35px / 3);
    padding-bottom: calc(35px / 3);
    /* Prevents unwanted stretching inside flex containers */
    align-self: center;
    margin: 0; /* Ensures no external spacing is added */
    width: fit-content;
    max-width: 100%;
}

    .dsmiddle > div {
        display: flex; /* Use flexbox for alignment within child divs */
        align-items: center; /* Center images vertically */
        justify-content: center; /* Center images horizontally */
        margin: 0; /* Remove extra margins */
        padding: 0; /* Remove extra padding */
    }

.dsdigi {
    text-align: center;
    vertical-align: middle;
    width: 35px;
}

/* **************************** */
/* Roll Stay Area               */
/* **************************** */
.buttonrow {
    display: flex;
    width: 80%;
    max-width: 750px;
}

.brcol {
    flex: 1;
    text-align: center;
    box-sizing: border-box;
}

.rollstaybtn {
    width: 180px;
    height: 180px;
    cursor: pointer;
    transform: scale(1.0); /* Default state */
    transition: transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Prevent blue highlight on tap */
    backface-visibility: hidden; /* Smooth animations */
    perspective: 1000px;
}

    /* Pressed state for user interaction */
    .rollstaybtn:active {
        transform: scale(0.98); /* Slightly scale down for pressed effect */
        opacity: 0.9;
    }

    /* Pressed state for programmatic simulation */
    .rollstaybtn.down {
        transform: scale(0.98); /* Slightly scale down for pressed effect */
        opacity: 0.9;
    }



/* **************************** */
/* Message and User Score Area  */
/* **************************** */

/* much of this is in the CCC of playgame.php */

.userscorelabel {
    font-size: 22px;
}

#userscorecontainer {
    margin-bottom: 15px;
}
/*
.adbox {
    width: 100%;
    max-width: 750px;
    aspect-ratio: 8.1 / 1;
    margin: 0 auto; 
    position: relative;
}
*/

.adbox {
    width: 100%;
    max-width: 750px;
    /* Remove or override aspect-ratio if you're enforcing height */
    margin: 0 auto;
    position: relative;
    min-height: 50px; /* Enforce minimum fillable height */
}

.adbox ins.adsbygoogle {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.ad-breakout-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 15px 0;
}


/* **************************** */
/* Contact Page                 */
/* **************************** */
/* General text input styling */
.text-input {
    font-family: 'Open Sans', sans-serif;
    border-style: solid;
    border: 1px solid #303030;
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    border-radius: 16px;
    font-size: 16px;
    color: #303030;
    outline: none;
    margin-bottom: 25px;
    box-sizing: border-box;
}

    /* Placeholder styling for inputs and textareas */
    .text-input::placeholder, .contact-textarea::placeholder {
        color: #7d7d7d;
    }

    /* Hover effect for text inputs and contact textarea */
    .text-input:hover, .contact-textarea:hover {
        box-shadow: 0 0 8px rgba(48, 48, 48, 0.6);
        outline: none;
    }

/* Styling for the password container */
.password-container {
    position: relative;
    width: 100%; /* Match the width of text-input */
    max-width: 500px; /* Restrict maximum width */
    box-sizing: border-box; /* Ensure padding and borders don't affect width */
}

/* Styling for the password visibility toggle icon */
#togglePassword, #togglePasswordSignup, #togglePasswordReset1, #togglePasswordReset2 {
    position: absolute;
    top: 50%; /* Center icon vertically */
    right: 15px; /* Add spacing from the right edge */
    transform: translateY(-100%); /* Fine-tuned vertical alignment */
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.contact-textarea {
    font-family: 'Open Sans', sans-serif;
    border-style: solid;
    border: 1px solid #303030;
    width: 90%;
    max-width: 500px;
    padding: 10px 15px 10px 15px;
    margin-bottom: 10px;
    border-radius: 16px;
    text-shadow: none;
    letter-spacing: 0.05em;
    font-size: 16px;
    color: #303030;
    outline: none;
    margin-bottom: 25px;
}

.submitbutton {
    color: #fff;
    background: rgb(29, 114, 230);
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    padding: 15px 40px;
    position: relative;
    -webkit-border-radius: 8px 8px;
    -moz-border-radius: 8px 8px;
    border-radius: 8px 8px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.1em;
}

.button-label {
    width: 100%;
    max-width: 500px;
    font-size: 16px;
    margin: 10px 0 50px 0;
}

/* **************************** */
/* General                      */
/* **************************** */
.centering-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

hr {
    height: 2px;
    border: none;
    background-color: #656565;
}

.title {
    text-align: center;
    font-size: 22px;
    margin: 20px;
}

    .title h3 {
        margin: 0;
        padding: 0;
    }

.footer {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
}

.link2 a {
    color: #fff;
    text-decoration: underline;
}

.link3 a {
    color: #303030;
    text-decoration: none;
}

    .link3 a:hover {
        text-decoration: underline;
    }

.link4 a {
    color: #303030;
    text-decoration: underline;
}
/* **************************** */
/* User Account Icon            */
/* **************************** */
.user_button {
    top: 0;
    right: 0;
    position: fixed;
    margin: 20px;
}

.user_icon {
    width: 40px;
    cursor: pointer;
}

.user_letter_icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(29, 114, 230);
    color: white;
    display: flex;
    align-items: center; /* Vertically center the letter */
    justify-content: center; /* Horizontally center the letter */
    font-size: 20px; /* Font size of the letter */
    font-weight: bold;
    line-height: 1; /* Prevent extra line spacing issues */
    user-select: none;
    cursor: pointer;
}

/* user account icon in the profile dialog */

.profile_user_icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(29, 114, 230);
    color: white;
    display: flex;
    align-items: center; /* Vertically center the letter */
    justify-content: center; /* Horizontally center the letter */
    font-size: 24px; /* Slightly larger font size for profile modal */
    font-weight: bold;
    line-height: 1; /* Prevent extra line spacing issues */
    user-select: none;
}


/* **************************** */
/* Menu                         */
/* **************************** */
.menu_button {
    top: 0;
    left: 0;
    position: fixed;
    margin: 20px;
}

.menu_icon {
    width: 40px;
    cursor: pointer;
}

.sidepanel {
    width: 0;
    position: fixed;
    z-index: 1000005;
    top: 0;
    left: 0;
    background-color: #656565;
    overflow-x: hidden;
    margin: 20px;
    padding: 30px 0 20px 0;
    border-radius: 10px;
}

    .sidepanel a {
        font-family: \'Open Sans\', sans-serif;
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 18px;
        color: #ffffff;
        display: block;
        display: none;
    }

        .sidepanel a:hover {
            text-decoration: underline;
        }

.closebtn:hover {
    text-decoration: none !important;
}

.sidepanel .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
}

/* **************************** */
/* Wait Animation               */
/* **************************** */

.wait-background {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 1000001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
}

.waitanim {
    width: 80px;
    height: 80px;
    border: 16px solid #f0f0f0;
    border-radius: 50%;
    border-top: 16px solid #245dc8;
    animation: rotating 2s linear infinite;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

/* **************************** */
/* Modal Dialogs                */
/* **************************** */
.modal-background, .menu-background {
    display: none;
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
}

.modal-content {
    background-color: rgba(255,255,255,0.98);
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    max-width: 450px;
    position: absolute;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2); /* Soft glow effect */
}

.modal-close {
    color: #aaaaaa;
    float: right;
    margin-top: -5px;
    font-size: 28px;
    font-weight: bold;
    line-height: 28px;
}

    .modal-close:hover,
    .modal-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

/* General link styling for modals */
.modal-links a {
    text-decoration: none;
    color: rgba(29, 114, 230); /* Matches user profile modal link color */
    font-weight: normal; /* Optional: Make links stand out */
}

    .modal-links a:hover {
        text-decoration: underline; /* Add underline on hover for accessibility */
    }

/* settings dialog toggles */

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
    gap: 10px; /* Space between columns and rows */
    font-size: 18px;
}

.grid-label {
    font-weight: normal;
    text-align: right;
    padding: 5px;
}

.grid-button {
    font-weight: normal;
    color: white;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    cursor: pointer;
}

/* user profile styles */

/* User profile title layout */
.user_profile_title {
    display: flex;
    align-items: center;
    justify-content: center; /* This centers it horizontally */
    gap: 10px; /* Space between icon and username */
    font-size: 20px;
    font-weight: bold;
}

.acount_settings_title {
    display: flex;
    align-items: center;
    justify-content: center; /* This centers it horizontally */
    font-size: 20px;
    font-weight: bold;
    color: rgba(29, 114, 230);
}

/* Checkbox container */
.checkbox-container {
    display: flex;
    align-items: center; /* Align checkbox and label vertically */
    justify-content: center; /* Center both checkbox and label */
    gap: 8px; /* Space between checkbox and label */
    font-size: 16px;
    margin: 10px 0;
}

/* Short description text */
.checkbox-description {
    text-align: center; /* Center the description below the checkbox */
    font-size: 14px; /* Slightly smaller font for the description */
    color: #303030; /* Subtle color for better readability */
    margin-top: 5px; /* Add space above the description */
}

/* Adjust checkbox size for better visibility */
.checkbox-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.profile-grid {
    display: grid;
    grid-template-columns: 50% 50%; /* Each column takes half of the container width */
    gap: 8px 0; /* Space between rows, no extra gap between columns */
    justify-content: center; /* Center the grid itself */
    font-size: 16px;
    width: 100%; /* Ensures the grid spans full width of the container */
    text-align: left;
}

.profile-label {
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}

.account-links {
    display: flex;
    justify-content: space-between; /* Separate links on wide screens */
    align-items: center; /* Align links vertically */
    gap: 22px; /* Space between links when stacked */
    font-size: 18px;
    flex-wrap: wrap; /* Allow wrapping for narrow screens */
    width: 100%; /* Ensure the container takes full width */
    margin-top: 10px;
}

    .account-links a {
        text-decoration: none;
        color: rgba(29, 114, 230); /* Example link color */
    }

        .account-links a:first-child {
            text-align: left; /* Align the first link to the left */
            margin-left: 10px; /* Add space to the left */
        }

        .account-links a:last-child {
            text-align: right; /* Align the last link to the right */
            margin-right: 10px; /* Add space to the right */
        }

        .account-links a:hover {
            text-decoration: underline;
        }

.account-settings-links {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: center; /* Center align links */
    gap: 10px; /* Space between links */
    font-size: 16px;
    width: 100%; /* Ensure the container takes full width */
    margin-top: 10px;
}

    .account-settings-links a {
        text-decoration: none;
        color: rgba(29, 114, 230); /* Example link color */
        text-align: center; /* Ensure text is centered */
        width: 100%; /* Allow links to span full width */
    }

        .account-settings-links a:hover {
            text-decoration: underline;
        }

/* Specifically target the Delete Account link */
.delete-account {
    color: red !important;
}

    .delete-account:hover {
        text-decoration: underline;
    }
/* **************************** */
/* Cookie/Privacy Panel         */
/* **************************** */

.cookiebtn {
    background-color: #aaaaaa;
    color: #000;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
}

#cookiebtndiv {
    z-index: 1000002;
    position: fixed;
    bottom: -4px;
    left: 10px;
    display: none;
}

#policycontainer {
    font-family: "Open Sans";
    font-weight: normal;
    color: #fff;
    font-size: 14px;
    z-index: 1000002;
    background-color: #000;
    position: fixed;
    bottom: -4px;
    left: 0px;
    width: 100%;
    opacity: 0.75;
    margin: 0 auto;
    display: none;
}


/* **************************** */
/* Media Queries                */
/* **************************** */

@media (max-width: 1200px) {
}

/* **************************** */
@media (max-width: 991px) {
}

/* **************************** */
@media (max-width: 880px) {
    /* change the dice size */
    :root {
        --dice-size: 90px;
        --strip-size: 540px; /* must be 6*dice-size */
    }
}

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

    .modal-content {
        width: 75%;
    }

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 20px;
    }

    .dsright {
        font-size: 20px;
    }

    .dsdigi {
        width: 30px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(30px / 3); /* Adjust padding dynamically */
        padding-right: calc(30px / 3);
        padding-top: calc(30px / 3);
        padding-bottom: calc(30px / 3);
    }

    /* change the roll stay button size */
    .rollstaybtn {
        width: 140px;
        height: 140px;
    }
}

/* **************************** */
@media (max-width: 660px) {

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 18px;
    }

    .dsright {
        font-size: 18px;
    }

    .dsdigi {
        width: 25px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(25px / 3); /* Adjust padding dynamically */
        padding-right: calc(25px / 3);
        padding-top: calc(25px / 3);
        padding-bottom: calc(25px / 3);
    }

    /* change the roll stay button size */
    .rollstaybtn {
        width: 125px;
        height: 125px;
    }
}

/* **************************** */
@media (max-width: 630px) {
    /* change the dice size */
    :root {
        --dice-size: 90px;
        --strip-size: 540px; /* must be 6*dice-size */
    }

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 18px;
    }

    .dsright {
        font-size: 18px;
    }

    .dsdigi {
        width: 22px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(22px / 3); /* Adjust padding dynamically */
        padding-right: calc(22px / 3);
        padding-top: calc(22px / 3);
        padding-bottom: calc(22px / 3);
    }

    /* change the roll stay button size */
    .rollstaybtn {
        width: 125px;
        height: 125px;
    }
}

/* **************************** */
@media (max-width: 590px) {
    /* change the dice size */
    :root {
        --dice-size: 80px;
        --strip-size: 480px; /* must be 6*dice-size */
    }

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 16px;
    }

    .dsright {
        font-size: 16px;
    }

    .dsdigi {
        width: 21px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(21px / 3); /* Adjust padding dynamically */
        padding-right: calc(21px / 3);
        padding-top: calc(21px / 3);
        padding-bottom: calc(21px / 3);
    }

    /* change the roll stay button size */
    .rollstaybtn {
        width: 110px;
        height: 110px;
    }

    .userscorelabel {
        font-size: 21px;
    }

    .profile-grid {
        grid-template-columns: 60% 40%; /* Each column takes half of the container width */
    }
}


/* **************************** */
@media (max-width: 550px) {
    /* change the dice size */
    :root {
        --dice-size: 80px;
        --strip-size: 480px; /* must be 6*dice-size */
    }

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 16px;
    }

    .dsright {
        font-size: 16px;
    }

    .dsdigi {
        width: 18px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(18px / 3); /* Adjust padding dynamically */
        padding-right: calc(18px / 3);
        padding-top: calc(18px / 3);
        padding-bottom: calc(18px / 3);
    }

    /* change the roll stay button size */
    .rollstaybtn {
        width: 110px;
        height: 110px;
    }

    .usa-container {
        width: 100% !important;
    }

    .userscorelabel {
        font-size: 18px;
    }
}

/* **************************** */
@media (max-width: 470px) {
    /* change the dice size */
    :root {
        --dice-size: 80px;
        --strip-size: 480px; /* must be 6*dice-size */
    }

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 16px;
    }

    .dsright {
        font-size: 16px;
    }

    .dsdigi {
        width: 16px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(16px / 3); /* Adjust padding dynamically */
        padding-right: calc(16px / 3);
        padding-top: calc(16px / 3);
        padding-bottom: calc(16px / 3);
    }

    .menu_button {
        margin: 10px;
    }

    .menu_icon {
        width: 30px;
    }

    .user_button {
        margin: 10px;
    }

    .user_icon {
        width: 30px;
    }

    .wrapper {
        margin: 0 40px;
    }

    .userscorelabel {
        font-size: 16px;
    }

    .account-links {
        flex-direction: column; /* Stack the links vertically */
        gap: 20px; /* Reduce space between stacked links */
        justify-content: center; /* Center links when stacked */
        text-align: center; /* Center-align text */
    }

        .account-links a {
            text-align: center; /* Ensure links are centered when stacked */
        }

            .account-links a:first-child {
                margin-left: 0; /* Reset margin for centered stacking */
                text-align: center; /* Center the text */
            }

            .account-links a:last-child {
                margin-right: 0; /* Reset margin for centered stacking */
                text-align: center; /* Center the text */
            }

    .profile-grid {
        grid-template-columns: 70% 30%; /* Each column takes half of the container width */
    }
}

/* these fix a couple of iPad cases in landscape mode */

@media (max-height: 850px) and (min-aspect-ratio: 5/4) {
    :root {
        --dice-size: 90px;
        --strip-size: 540px;
    }

    .lcd-container {
        max-width: 50vw; /* Limits total width of LCD digits */
        margin: 0 auto; /* Center it horizontally */
    }

    .rollstaybtn {
        width: 140px;
        height: 140px;
    }

    .dsdigi {
        width: 30px;
    }

    .dsleft, .dsright {
        font-size: 20px;
    }

    .userscorelabel {
        font-size: 20px;
    }
}

@media (max-height: 700px) and (min-aspect-ratio: 5/4) {
    /* change the dice size */
    :root {
        --dice-size: 80px;
        --strip-size: 480px; /* must be 6*dice-size */
    }

    .lcd-container {
        max-width: 40vw; /* Limits total width of LCD digits */
        margin: 0 auto; /* Center it horizontally */
    }

    /* change the score readouts */
    .dsleft, .usa-second-row {
        font-size: 16px;
    }

    .dsright {
        font-size: 16px;
    }

    .dsdigi {
        width: 21px; /* Decrease the width */
    }

    .dsmiddle {
        padding-left: calc(21px / 3); /* Adjust padding dynamically */
        padding-right: calc(21px / 3);
        padding-top: calc(21px / 3);
        padding-bottom: calc(21px / 3);
        max-width: 60vw; /* Prevent the digit strip from expanding too wide */
    }

    /* change the roll stay button size */
    .rollstaybtn {
        width: 110px;
        height: 110px;
    }

    .userscorelabel {
        font-size: 21px;
    }

    .profile-grid {
        grid-template-columns: 60% 40%; /* Each column takes half of the container width */
    }
}

/* Increase font size for larger screens */
@media (min-width: 768px) {
    .flying-text {
        font-size: 48px;
    }

    .flying-text::before {
        width: 140%;
        height: 140%;
        filter: blur(8px);
        border-radius: 40px;
    }
}

@media (min-width: 1200px) {
    .flying-text {
        font-size: 56px;
    }
    .flying-text::before {
        width: 160%;
        height: 160%;
        filter: blur(10px);
        border-radius: 70px;
    }
}