*,
    *::before,
    *::after {
        box-sizing: border-box;
    }
html,
body {
    height: 100%;
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
}

@font-face {
    font-family: 'Game-Bubble';
    src: url('/game/css/fonts/game-bubble.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liquid';
    src: url('/game/css/fonts/liquid.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.online {
    border: 2px solid #28a745;
}
.offline {
    border: 2px solid #ff6f00;
}

html[data-bs-theme="light"] {
    --bs-primary: rgb(13, 110, 253); /* Bootstrap default blue */
    --bs-info: #17a2b8 !important;
    --bs-warning: #ffc107 !important;
    --bs-success: #28a745 !important;
    --bs-danger: #ff4d4f !important;
    --bg-color: #edf2fa;

}

html[data-bs-theme="light"] body {
    background-image: url('/game/images/light-bg.png');
}
html[data-bs-theme="light"] .box, html[data-bs-theme="light"] .modal-body {
    background-color: #FFF;
}
html[data-bs-theme="light"] .card, html[data-bs-theme="light"] .modal-header {
    background-color: #edf2fa;
}

html[data-bs-theme="light"] input, html[data-bs-theme="light"] select, html[data-bs-theme="light"] textarea {
    background-color: #edf2fa;
}

html[data-bs-theme="light"] .score {
    color: #000;
}

html[data-bs-theme="dark"] .accolades, html[data-bs-theme="dark"] .score {
    color: #20c997;
    text-shadow: 0 0 6px rgba(32, 201, 151, 0.5);
    transition: color .15s ease-in-out, text-shadow .15s ease-in-out;
}

.vote-btn:hover {
    text-decoration: underline;
}

html[data-bs-theme="dark"] {
    --bs-primary: rgb(13, 110, 253); /* Bootstrap default blue */
    --bs-info: #5bc0de !important;
    --bs-warning: #f4b400 !important;
    --bs-success: #03dac6 !important;
    --bs-danger: #cf6679 !important;
    --bg-color: #111111 !important;
    --bs-list-group-bg: #111111 !important;
}


html[data-bs-theme="dark"] .list-group-item {
    background-color: #111;
}

html[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--bs-primary);
}

body {
    background-color: var(--bg-color);
}

html[data-bs-theme="dark"] .bi-stopwatch-fill {
    color: #f8f9fa; /* light color for dark background */
}

html[data-bs-theme="light"] .bi-stopwatch-fill {
    color: #212529; /* dark color for light background */
}

html[data-bs-theme="light"] .text-warning {
    color: #e44002 !important;
}
/*
html[data-bs-theme="light"] body {
    background-image: url('/game/images/background-img.png');
    background-size: 200% 100%;
    background-position: left center;
    background-repeat: no-repeat;
    background-color: var(--bg-color);
}

html[data-bs-theme="dark"] body {
    background-image: url('/game/images/background-img.png');
    background-size: 200% 100%;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: var(--bg-color);
}
*/
.inactive-player {
    opacity: 0.5;
    filter: grayscale(80%);
    transition: opacity 0.3s ease;
}

.gif {
    max-width: 150px;
    border-radius: 6px;
}

.big-emoji {
    font-size: 1.4em;
    line-height: 1;
    vertical-align: text-bottom;
}

#gameMessage {
    /* min-height: 200px !important;*/
}

.modal-body {
    background-color: var(--bg-color);
}

div {
   /* background-color: var(--bs-body-bg); */
}

.privatemessage {
    cursor: pointer;
}

.main-content {
}
.bi {
    min-width: 25px !important;
    text-align: center !important;
}
.navbar-brand,.orbitron {
    font-family: "Orbitron", serif !important;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.text-username {
    color: #4183c4;
}

.login {
    width: 90%;
    min-width:310px;
    max-width: 400px;
    margin: 20px auto;
}

.login h1 {
    text-align: center;
    font-size: 24px;
}

.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #0d6efd;
    color: #ffffff;
}


.login form input[type="password"], .login form input[type="email"], .login form input[type="text"] {
    min-width: 210px;
    width: 80%;
    height: 50px;
    margin-bottom: 20px;
    padding: 0 15px;
    border-radius: 0;
}

.login form input[type="submit"] {
    width: 100%;
    padding: 10px 15px;
    margin-top: 5px;
    background-color: #0d6efd;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}

.login form input[type="submit"]:hover {
    background-color: #2868c7;
    transition: background-color 0.2s;
}


.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

#lobbymessages, #roommessages {
    overflow-y: auto;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#lobbymessages > li, #roommessages > li {
    padding: 0.5rem 1rem;
}

.daily-acro-header {
    color: #FFF;
    background: linear-gradient(90deg, #20c9974d, #0d6efd8f);
    border-bottom-color: #20c99766;
}


.daily-acro-font {
    color: #1a8f7d;
}

.daily-acro-btn {
    background-color: #157f6f;
    color: #fff !important;
    border: 1px solid #11685b;
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}


.border-daily-acro {
    border-color: #157f6f;
}

.daily-acro-btn:hover {
    background-color: #1a8f7d; /* brighter teal */
    border-color: #0f5a4f;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.daily-acro-btn:active {
    transform: translateY(0);
    background-color: #11685b;
    border-color: #0c4a3f;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.voted-for {
    border-color: #ffd700 !important;
    background: #2a2a00 !important;
}

.voted-for strong {
    color: #ffd700 !important;
}

.recentwinner-acro-header {
    color: #fff;
    background: linear-gradient(90deg, #7a5a00, #4f3d00);
    border-bottom-color: #7a5a00;
}

.recentwinner-acro-font {
    color:#ffcc33;
}

.recentwinner-acro-btn {
    background-color: #7a5a00; /* rich gold-brown */
    color: #fff !important;
    border: 1px solid #4f3d00;
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.recentwinner-acro-btn:hover {
    background-color: #8c6a00;
    border-color: #5a4500;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.recentwinner-acro-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}



.RecentWinner {
    position: relative;
    font-size: 3.25rem;
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    background: linear-gradient(90deg, rgb(200, 160, 40), #7a5a00);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.15);
}

/* Remove shimmer entirely */
.RecentWinner::after {
    content: none;
}

/* swap */

.yesterday-acro-btn {
    background-color: #5a1e8a;
    color: #fff !important;
    border: 1px solid #3e1461;
    transition: background-color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

    .yesterday-acro-btn:hover {
        background-color: #6d26a8;
        border-color: #4a1a73;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    }

    .yesterday-acro-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }

.yesterday-acro-header {
    color: #fff;
    background: linear-gradient(90deg, #5a1e8a, #8b3dce);
    border-bottom-color: #5a1e8a;
}

.yesterday-acro-font {
    color: #d9b3ff; /* soft lavender highlight */
}

.Yesterday {
    position: relative;
    font-size: 3.25rem;
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    background: linear-gradient(90deg, #b57aff, #5a1e8a);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.15);
}

    .Yesterday::after {
        content: none; /* no shimmer */
    }



.Fever {
    position: relative;
    font-size: 3.25rem;
    letter-spacing: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    background: linear-gradient(90deg, #20c997, #0d6efd);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.15);
}

    /* Remove shimmer entirely */
    .Fever::after {
        content: none;
    }

.Phobia {
    font-size: 3.25rem;
    letter-spacing: 3px;
    font-family: 'Game-Bubble', sans-serif;
    color: #e00101;
    text-shadow: 1px 1px 2px #fff, 1px 1px 2px #ccc;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.Challenge {
    font-size: 3.25rem;
    letter-spacing: 3px;
    font-family: Calibri, sans-serif;
    color: #658ea6;
    text-shadow: 1px 1px 2px #fff, 1px 1px 2px #ccc;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

/* Mobile */
@media (max-width: 600px) {
    .Yesterday,
    .Fever,
    .Phobia,
    .Challenge {
        font-size: 3.25rem;
        letter-spacing: 2px;
    }
}


.acroinput, .acroinput:focus {
    border-radius: 25px;
    font-size: 1.25rem;
    background-color: #FFF;
    color: #000;
    font-style:italic;
}
.acroinput::placeholder {
    font-weight: bold;
    opacity: 0.5;
    color: #000;
}

#lobbyform, #roomform {
    display: flex;
    height: 3rem;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

#lobbyinput, #roominput, #dailyAcroInput {
    padding: 0 1rem;
    flex-grow: 1;
    border-radius: .28571429rem;
    margin: 0.25rem;
    transition: color .1s ease,border-color .1s ease;
}

    #lobbyinput:focus, #roominput:focus, #dailyAcroInput {
        outline: none;
    }

#lobbyform > button, #roomform > button {
    border: none;
    padding: 0 1rem;
    margin: 0.25rem;
    border-radius: .28571429rem;
    outline: none;
}



/* Styles for small mobile devices in portrait */
@media only screen and (max-width: 480px) and (orientation: portrait) {
    #gameMessage {
        /* min-height: 200px !important;*/
    }
}

/* Styles for mobile devices in landscape */
@media only screen and (max-width: 767px) and (orientation: landscape) {
    #gameMessage {
        /* min-height: 200px !important;*/
    }
}

/* Styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #gameMessage {
        /* min-height: 200px !important;*/
    }
}

/* Styles for desktops and large screens */
@media only screen and (min-width: 1025px) {
    #gameMessage {
        /* min-height: 200px !important;*/
    }
}