.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.column, .columns {
    float: left;
    display: inline;
    margin-left: 1%;
    margin-right: 1%
}

.row {
    margin-bottom: 20px
}

.one, .one {
    width: 4%
}
.two {
    width: 10.4%
}

.three {
    width: 16.6%
}

.four {
    width: 22.9%
}

.five {
    width: 29.1%
}

.six {
    width: 35.4%
}

.seven {
    width: 41.6%
}

.eight {
    width: 48%
}

.nine {
    width: 54.16%
}

.ten {
    width: 60.41%
}

.eleven {
    width: 66.6%
}

.twelve {
    width: 72.91%
}

.thirteen {
    width: 79.16%
}

.fourteen {
    width: 85.41%
}

.fifteen {
    width: 91.66%
}

.sixteen {
    width: 98%
}

.one-sixth {
    width: 15.6%
}

.one-third {
    width: 31.33%
}

.two-thirds {
    width: 62.66%
}

@media only screen and (max-width: 767px) {
    .column, .columns {
        margin-left: 2%;
        margin-right: 2%
    }

    .eight, .eleven, .fifteen, .five, .four, .fourteen, .nine, .one-sixth.column, .one-third.column, .one.column, .one, .seven, .six, .sixteen, .ten, .thirteen, .three, .twelve, .two-thirds.column, .two {
        width: 96%
    }

    .offset-by-eight, .offset-by-eleven, .offset-by-fifteen, .offset-by-five, .offset-by-four, .offset-by-fourteen, .offset-by-nine, .offset-by-one, .offset-by-seven, .offset-by-six, .offset-by-ten, .offset-by-thirteen, .offset-by-three, .offset-by-twelve, .offset-by-two {
        padding-left: 0
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .column, .columns {
        margin-left: 2%;
        margin-right: 2%
    }

    .eight, .eleven, .fifteen, .five, .four, .fourteen, .nine, .one-sixth.column, .one-third.column, .one.column, .one, .seven, .six, .sixteen, .ten, .thirteen, .three, .twelve, .two-thirds.column, .two {
        width: 96%
    }
}

.scale-with-grid {
    max-width: 100%;
    height: auto
}

.left {
    float: left !important
}

.right {
    float: right !important
}

.container-narrow {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 0
}

/* #Styles
    ================================================== */
body, html {
    margin: 0;
    padding: 0;
    color: #f2f2f2;
}

html {
    touch-action: manipulation;
    text-size-adjust: none;
}

body {
    background: radial-gradient(circle at center, #121722 0%, #090E1A 100%);
    /*background-color: #090E1A;*/
    font-family: "RobotoCondensed", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    /* Disable text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* Standard */
    /* Disable dragging (for images, links, etc.) */
    -webkit-user-drag: none; /* Safari/Chrome */
    /* Remove iOS blue tap highlight */
    -webkit-tap-highlight-color: transparent;
    cursor: default;
}

* {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent; /* Not standard, but included for completeness */
    -ms-tap-highlight-color: transparent; /* Not standard, included for completeness */
}

.resetFont {
    font-family: "RobotoCondensed", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 100% !important;
    line-height: 1.5 !important;
}

noscript {
    display: block;
    text-align: center;
}

a, a:visited, a:active {
    cursor: pointer;
    text-decoration: none;
    color: #f2f2f2;
    outline: none;
}

a:hover {
    text-decoration: none;
    color: #f2f2f2;
    outline: none;
    user-select: none;
}

a.noline {
    border-bottom: none;
}

.showIf {
    display: none !important;
}

/* Native login buttons */
.AppleSignIn {
    position: relative;
    background: #000 !important;
    color: white !important;
    --pbtnBg: #000 !important;
}

.AppleGameCenter {
    position: relative;
    background: black !important;;
    color: white !important;
}

.GooglePlayGames {
}

.nativeLogo {
    vertical-align: middle;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    padding-right: 4px;
}

.AppleSignIn .nativeLogo {
    background: url('/design/icon/os/applesignin.png');
    padding-right: 2px !important;
    background-position: 0px -2px;
}

.AppleGameCenter .nativeLogo {
    background: url('/design/icon/os/gamecenter-24.png');
}

.GooglePlayGames .nativeLogo {
    background: url('https://www.gstatic.com/images/icons/material/product/1x/play_games_64dp.png');
    background-position: 0px -1px !important;
}

/* #Typography
    ================================================== */
h1 {
    margin: 0;
    padding: 0 0 10px 0;
    font-size: 1.43em;
    color: #fff;
    font-family: "RobotoCondensedBold";
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);
}

h1 a {
    text-decoration: none;
}

h2 {
    margin: 0;
    padding: 10px 0;
    font-size: 1.06em;
    color: #fff;
    font-family: "RobotoCondensedBold";
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);
}

h2 a {
    text-decoration: none;
}

h3 {
    margin: 0;
    padding: 10px 0;
    font-size: 1em;
    font-family: "RobotoCondensedBold";
    font-weight: normal;
}

h3 a {
    text-decoration: none;
}

p {
    margin: 0;
    padding: 10px 0;
}

h1.underline, h2.underline, h3.underline {
    border-bottom: 1px solid #ddd;
}

h1.overline, h2.overline, h3.overline {
    border-top: 1px solid #ddd;
    margin-top: 10px;
    padding-top: 10px;
}

/*************************/
/* Layout                */
/*************************/
#header a {
    border: none;
}

#page-title-text {
    display: none;
}

#menuContainer {
    height: 80px;
    direction: ltr !important;
    position: fixed;
    width: 100%;
    z-index: 5;
    /* Prevent gestures starting on the menu from affecting page scroll */
    touch-action: none;
}

#menu {
    height: 80px;
    width: 100%;
    position: relative; /* Changed from fixed */
    display: flex;
    justify-content: center;
    z-index: 5;
    --active-translate: translateX(0);
    --active-width: 20%;
    /* Apply hardware acceleration to inner menu, NOT container */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#menu div {
    height: 100%;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    cursor: pointer;
    will-change: width;
}

#menu svg {
    width: 60px;
    transition: all 0.5s;
    align-items: center;
    will-change: transform, translateY;
}

#menu .bgActive {
    position: absolute;
    background: linear-gradient(to bottom, #3f6183, #5281a6);
    height: 100%;
    bottom: 0;
    left: 0; /* Set initial position to left edge */
    z-index: -1;
    border: none;
    transition: transform 0.4s, width 0.4s;
    will-change: transform, width;
    transform: var(--active-translate);
    width: var(--active-width);
}

#menu .menuItems {
    display: flex;
    width: 100%;
}

#menu .menuItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    transition: all 0.4s ease;
    will-change: flex-grow, transform;
    position: relative;
}

#menu .menuItem:not(.live):hover {
    transform: translateY(-4px);
}

#menu .menuItem.active {
    flex-grow: 2;
    color: #d8dce4;
}

#menu .menuItem:not(.active) svg {
    color: #989eac;
}

#menu .menuItem svg {
    transition: all 0.4s ease;
    will-change: transform;
}

#menu .menuItem span {
    position: absolute;
    bottom: 0.25rem;
    font-size: 70%;
    text-transform: uppercase;
    font-family: "RobotoCondensedBold";
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    will-change: opacity, transform;
}

#menu .menuItem.active span {
    opacity: 1;
    transform: translateY(0);
}

#mRace.live {
    background: #d66e67;
    color: #fff !important;
}

#mRace.live svg {
    color: #fff !important;
}

#header {
    height: 80px;
    display: flex; /* Use Flexbox to align children */
}

#headerBg {
    position: fixed;
    background: rgba(9, 14, 26, .7);
    backdrop-filter: blur(10px);
    height: 80px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    right: 0;
    z-index: 104;
    transform: translateZ(0);
}

#head-l, #head-r {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 80px;
    width: 50%; /* Each takes 50% of the parent container's width */
    flex-wrap: nowrap; /* Prevent wrapping during animation */
}

#head-l {
    justify-content: flex-start; /* Align content to the start (left) */
}

#head-r {
    justify-content: flex-end; /* Align content to the end (right) */
    text-align: right;
}

#balance, #tokens, #mail {
    display: inline-block;
    text-decoration: none;
    padding: 0 20px;
    font-size: 0.9em;
    line-height: 52px;
    text-align: center;
    box-sizing: border-box;
    background: #3d4252;
    color: #ccc;
    position: relative;
    margin-left: 5px; /* Space between items */
}

#balance:hover, #tokens:hover, #mail:hover {
    background: #333745;
}

#myProfileContainer {
    position: fixed;
    top: 0;
    z-index: 105;
    width: 100%;
    height: 100%;
}

#myProfile {
    position: absolute;
    top: 80px;
    right: calc((100vw - 1200px) / 2);
    z-index: 105;
    display: inline-block;
    text-decoration: none;
    font-size: 0.9em;
    background: rgba(9, 14, 26, .8);
    backdrop-filter: blur(5px);
    border-color: #0d0d0d;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 12px 12px;
    color: #fff;
    width: 240px;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: 10px;
}

#myProfile .vSpaceLinks a {
    padding: 12px 6px;
}

#myProfile .vSpaceLinks a:hover, #myProfile .vSpaceLinks a:active {
    background: rgba(255, 255, 255, 0.1);
}

@supports (padding: max(0px)) {
    #menuContainer, #dialogs-container, #tutorial-container {
        margin-top: 0px;
    }
    #menu {
        /* margin-top is removed from here */
    }

    /* Adjust #page-content margin-top for desktop */
    #page-content {
        margin-top: 95px;
    }

    @media (orientation: portrait) and (max-width: 480px) {
        #header, #headerBg { /* Adjust height of mobile top bar */
            height: 50px;
            /* Consider adjusting line-height or using flexbox for vertical alignment if content within these gets misaligned */
        }
        /* #head-l and #head-r might also need height adjustments if they don't auto-adjust with #header/#headerBg */

        #page-content { /* Adjust page content margin for mobile */
            margin-top: 65px;
        }
    }
}

icon {
    display: inline-block;
    visibility: hidden;
    max-width: 24px;
    max-height: 24px;
    /*                overflow: hidden;*/
    margin: 0;
    padding: 0;
}

#curtain {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background: #000;
    will-change: opacity;
}

.fadeOut {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#page-head {
    position: relative;
    background-color: #242837;
    background-image: url('../app/design/bg-flag-s.png') no-repeat;
    background-position: top right;
    margin: 0 10px 10px 10px;
    padding: 10px;
    border-radius: 8px;
}

#page-head h1 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #f0f0f0;
}

#page-head-img {
    float: left;
    margin: 5px 15px 5px 5px;
    width: 100px;
    height: 100px;
    display: block;
    text-align: center;
}

#page-head img, #page-head svg {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

#page-content {
    margin: 95px auto 15px auto;
    z-index: 2;
}

#page-head > a, #page-head > a:hover, #page-head > a:visited, #page-head > a:active {
    color: #f2f2f2;
}

svg {
    align-self: center; /* Aligns the SVG vertically within the flex container */
    fill: currentColor;
    stroke-width: 0;
    stroke: currentColor;
    vertical-align: middle;
}

a.highlight, a.highlight:visited {
    background: #689954;
    color: #fff;
    border: none;
    padding: 0px 5px;
    border-radius: 2px;
}

a.highlight:hover, a.highlight:hover {
    background: #5f8c4d;
    color: #fff;
    border: none;
}

.specialA1, .specialA2, .specialA3 {
    color: #fff;
    border: none;
    padding: 0px 5px;
    border-radius: 2px;
}

.specialA1 {
    background: #477db3;
}

.specialA2 {
    background: #b34e2d;
}

.specialA3 {
    background: #cc6699;
}

.bgGradient1 {
    background: linear-gradient(160deg, #222b40 0%, #465373 100%) !important;
}

.bgGradient2 {
    background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
}

.bgGradient3 {
    background: linear-gradient(to right, #243949 0%, #517fa4 100%) !important;
}

/* Adjusted flex container with reduced gap */
.tabs, .tabs2 {
    display: flex;
    gap: 3px; /* Set gap between buttons to 3px */
    border: 2px solid #1a2235;
    border-bottom: 4px solid #1a2235;
    background: #1a2235;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
}

.dialog .tabs, .dialog .tabs2 {
    border-radius: 0 !important;
    border-right: none;
    border-left: none;
    margin-bottom: 0;
}

#page-head .tabs, #page-head .tabs2 {
    margin-bottom: 0;
}

.tabs a, .tabs2 a {
    position: relative;
    flex: 1;
    height: 40px;
    line-height: 40px;
    color: #aeb2ba;
    font-family: "RobotoCondensedBold", sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
    border: none !important;
    overflow: hidden;
    clip-path: polygon(19px 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}

.tabs a:hover, .tabs2 a:hover {
    color: #d8dce4;
}

.tabs a.active, .tabs2 a.active {
    color: #d8dce4;
}

.tabs a:after, .tabs2 a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Apply the same clip-path */
    clip-path: polygon(19px 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
    background: none; /* Default background */
    z-index: -2; /* Place behind everything */
    transition: all 0.3s;
}

.tabs a:hover:after, .tabs2 a:hover:after {
    background: rgba(255, 255, 255, 0.1);
}

.tabs a.active:after, .tabs2 a.active:after {
    background: linear-gradient(135deg, #4c6583, #5683a1, #5c5087);
    animation: fadeIn 0.3s ease-out forwards;
}

/* Apply negative margin to overlap buttons */
.tabs a:not(:first-child), .tabs2 a:not(:first-child) {
    margin-left: -16px; /* Negative margin to overlap slant */
}

/* First button adjustments */
.tabs a:first-child, .tabs2 a:first-child {
    clip-path: polygon(0 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}

/* Last button adjustments */
.tabs a:last-child, .tabs2 a:last-child {
    clip-path: polygon(19px 0, 100% 0, 100% 100%, 0 100%);
}

.tabs a:first-child:after, .tabs2 a:first-child:after {
    /* Adjust clip-path for :after */
    clip-path: polygon(0 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}

.tabs a:last-child:after, .tabs2 a:last-child:after {
    /* Adjust clip-path for :after */
    clip-path: polygon(19px 0, 100% 0, 100% 100%, 0 100%);
}

/* Glow effect pseudo-element */
.tabs a.active:before, .tabs2 a.active:before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start outside the button */
    width: 300%; /* Wide enough to cover the animation */
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    /* Apply the same clip-path */
    clip-path: polygon(19px 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
    z-index: -1; /* Between the background and text */
    pointer-events: none;
    animation: glowAcross 1s ease-out forwards;
}

/* Adjusted glow effect for first button */
.tabs a:first-child.active:before, .tabs2 a:first-child.active:before {
    clip-path: polygon(0 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}

/* Adjusted glow effect for last button */
.tabs a:last-child.active:before, .tabs2 a:last-child.active:before {
    clip-path: polygon(19px 0, 100% 0, 100% 100%, 0 100%);
}

/* Glow animation */
@keyframes glowAcross {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }
    10% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Include vendor prefixes for broader browser support */
.tabs a, .tabs2 a,
.tabs a:after, .tabs2 a:after,
.tabs a.active:before, .tabs2 a.active:before,
.tabs a:first-child, .tabs2 a:first-child,
.tabs a:first-child:after, .tabs2 a:first-child:after,
.tabs a:first-child.active:before, .tabs2 a:first-child.active:before,
.tabs a:last-child, .tabs2 a:last-child,
.tabs a:last-child:after, .tabs2 a:last-child:after,
.tabs a:last-child.active:before, .tabs2 a:last-child.active:before {
    -webkit-clip-path: polygon(19px 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}

/* Vendor prefixes for adjusted clip-paths */
.tabs a:first-child, .tabs2 a:first-child,
.tabs a:first-child:after, .tabs2 a:first-child:after,
.tabs a:first-child.active:before, .tabs2 a:first-child.active:before {
    -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
}

.tabs a:last-child, .tabs2 a:last-child,
.tabs a:last-child:after, .tabs2 a:last-child:after,
.tabs a:last-child.active:before, .tabs2 a:last-child.active:before {
    -webkit-clip-path: polygon(19px 0, 100% 0, 100% 100%, 0 100%);
}

.tabs a svg, .tabs2 a svg {
    margin: 5px;
    vertical-align: middle;
}

/*Rounded corners*/
.round-tl, .round-top, .round-left {
    border-top-left-radius: 8px;
}

.round-tr, .round-top, .round-right {
    border-top-right-radius: 8px;
}

.round-bl, .round-bottom, .round-left {
    border-bottom-left-radius: 8px;
}

.round-br, .round-bottom, .round-right {
    border-bottom-right-radius: 8px;
}

.rounded-6 {
    border-radius: 6px;
}

.rounded-3 {
    border-radius: 3px;
}

.rounded-8 {
    border-radius: 8px;
}

#dialogs-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.dialog {
    --dialog-header-height: 85px;
    position: relative;
    top: var(--dialog-header-height);
    background: rgb(22, 44, 78);
    background-image: radial-gradient(circle at center 75%, rgb(28, 52, 86) 0%, rgb(22, 44, 78) 100%);
    width: 100%;
    max-width: calc(100% - 10px);
    margin: 5px;
    border-radius: 8px;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: calc(100dvh - var(--dialog-header-height) - 10px);
}

.dialog-head {
    display: flex;
    align-items: center; /* Vertically aligns all child elements */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 0px 0px;
}

.dialog-head h1 {
    display: inline;
    margin: 0 0 0 10px;
    padding: 0;
    color: #e9e9e9;
    line-height: 2.5;
}

.dialog-head a {
    margin-bottom: 5px;
}

.dialog .dropdown > a {
    min-height: 50px;
}

.dialog-foot {
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 8px 8px;
    box-sizing: border-box;
}

.dialog-foot a {
    line-height: 2;
    font-size: 1.2em;
    margin: 0;
    padding: 0;
    min-height: 44px;
}

.dialog a.close, .dialog a.close:visited {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 45px;
    height: 45px;
    border: 0;
    border-radius: 4px;
    z-index: 999;
    color: #fff;
    background: transparent;
    transition: background 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog a.close:hover {
    color: #fff;
    background: #d66e67;
    border: 0;
}

.dialog-preload {
    display: none;
}

/* Standard Dialog Subhead */
.dialog-subhead {
    background-color: #14143c;
    background-image: url('../app/design/sbg-left.jpg'), url('../app/design/sbg-right.jpg');
    background-position: bottom left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
    color: #eee;
    border-radius: 8px 8px 0 0;
    line-height: 1.2;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
}

.dialog-subhead h2 {
    color: #f2f2f2;
    padding-top: 0;
}

.dialog-subhead-img {
    flex: 0 0 150px;
    max-width: 150px;
    height: auto;
    margin-left: 10px;
}

.dialog-subhead-img img {
    max-width: 100%;
    height: auto;
}

.dialog-subhead-content {
    flex: 1;
    padding: 15px 0 0 20px;
}

.dialog-subhead.sbgred {
    background-color: #340c0c;
    background-image: url('../app/design/sbg-left-red.jpg'), url('../app/design/sbg-right-red.jpg');
}

.sbgred-l {
    background-color: #340c0c;
    background-image: url('../app/design/sbg-left-red.jpg');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
}

.sbgred-r {
    background-color: #340c0c;
    background-image: url('../app/design/sbg-right-red.jpg');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain, contain;
}

.sbgpurp-l {
    background-color: #14143c;
    background-image: url('../app/design/sbg-left.jpg');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
}

.sbgpurp-r {
    background-color: #14143c;
    background-image: url('../app/design/sbg-right.jpg');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
}

.dialog-subhead.sbgorange {
    background-color: #FF8C00;
}

.dialog-subhead.green {
    background-color: #228B22;
}

#modal-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    visibility: hidden;
    margin: 0;
    padding: 0;
}

#dialog-wrap, #tutorial-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    transform: translateZ(0);
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transition: opacity 250ms linear;
    will-change: opacity;
    box-sizing: border-box;
}

#dialog-wrap {
    z-index: 101;
    visibility: hidden;
}

/* Tutorial wrapper and container positioning */
#tutorial-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

#tutorial-container {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 800px;
    padding: 20px;
    z-index: 200;
    visibility: hidden;
    pointer-events: auto;
}

/* New tutorial flex layout */
.tutorial-flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 0 auto;
    padding: 20px;
}

.tutorial-assistant {
    width: 140px; /* Constrain width */
    flex-shrink: 0;
}

.tutorial-assistant .staffImage {
    width: 100%;
    height: 100%;
}

.tutorial-content {
    flex: 1;
    min-width: 0; /* Prevents flex item from overflowing */
}

/* Speech bubble styling */
.tutorial-bubble {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    padding: 15px;
    border-radius: 24px;
    text-align: left;
    color: #333;
    backdrop-filter: blur(5px);
    font-family: 'RobotoCondensedBold';
}

.tutorial-bubble p:first-child {
    padding-top: 0;
}

.tutorial-bubble::before {
    content: '';
    position: absolute;
    left: -8px; /* Adjusted from -10px to make it touch the bubble */
    top: 30px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent; /* Reduced from 10px to make arrow smaller */
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgba(255, 255, 255, 0.7);
}

/* Content styling */
.tutorial-title {
    font-family: RobotoCondensedBold;
    font-size: 18px;
    color: #212552;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.tutorial-text {
    color: #37474f;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 15px;
}

.tutorial-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 5px;
}

.tutorial-buttons a {
    flex: 0 1 auto; /* Allow buttons to size to their content */
    min-width: 100px; /* Optional: ensure minimum button width */
}

.tutorial-overlay {
    background: transparent;
    pointer-events: auto;
}

.tutorial-clickable-target {
    position: relative;
    z-index: 104;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Maintain highlight functionality */
.tutorial-highlight,
.tutorial-highlight:visited,
.tutorial-highlight:hover,
.tutorial-highlight:focus,
.tutorial-highlight:active {
    position: relative !important;
    z-index: 199 !important;
    opacity: 1 !important;
    will-change: box-shadow;
    transition: box-shadow 1s ease;
    pointer-events: auto;
}

@media (max-width: 768px) {
    #tutorial-container {
        padding: 10px;
    }

    .tutorial-flex {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }

    .tutorial-assistant {
        width: 140px;
        position: fixed;
        bottom: 0px;
        left: 20px;
        z-index: 201;
        transition: transform 0.3s ease;
    }

    /* Class for when assistant needs to move up */
    .tutorial-assistant.move-up {
        position: relative;
        bottom: auto;
    }

    .tutorial-assistant::before {
        width: 120px;
        height: 120px;
    }

    /* If assistant would block highlighted element, move to right */
    .tutorial-flex.move-right .tutorial-assistant {
        left: auto;
        right: 20px;
    }

    .tutorial-bubble::before {
        left: 30px;
        bottom: -12px;
        top: auto;
        transform: rotate(-90deg);
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid rgba(255, 255, 255, 0.7);
    }

    .tutorial-flex.move-right .tutorial-bubble::before {
        left: auto;
        right: 30px;
        transform: rotate(90deg);
    }
}

.tutorial-hand {
    position: fixed;
    width: 96px;
    height: 96px;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    will-change: transform, opacity;
    transform-origin: top center;
}

.tutorial-hand.animate {
    animation: handTapSequence 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes handTapSequence {
    0% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
    15% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
    40% {
        opacity: 1;
        /* Move up slightly while scaling to keep fingertip in place */
        transform: translateY(-20px) scale(0.85);
    }
    75% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scale(1);
    }
}

.scroll-h {
    max-width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
}

.scroll-v {
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.scrollLoader {
    will-change: contents;
}

.noScroll {
    overflow: hidden;
    position: fixed;
}

div.clear {
    clear: both;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/*************************/
/* Content               */
/*************************/
.inline-block {
    display: inline-block;
}

.inlineFlexCenter {
    display: inline-flex;
    align-items: center;
}

.inlineFlexCenterGap4 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#loader {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
}

#loader-bg {
    background: rgba(0, 0, 0, 0.15);
    padding: 2px;
    border-radius: 50%;
}

#loader-icon {
    border-radius: 50%;
    width: 64px;
    height: 64px;
}

#loader-icon {
    margin: auto;
    font-size: 0.625em;
    position: relative;
    text-indent: -9999em;
    border-top: 6px solid rgba(0, 0, 0, 0.2);
    border-right: 6px solid rgba(0, 0, 0, 0.2);
    border-bottom: 6px solid rgba(0, 0, 0, 0.2);
    border-left: 6px solid rgba(255, 255, 255, 0.8);
    will-change: transform, opacity;
    animation: load8 1.1s infinite linear;
}

#loader-text {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 2px 10px;
    font-size: 0.8em;
    margin-top: 15px;
    position: absolute;
    width: 200px;
    margin-left: -75px;
    text-align: center;
}

@keyframes load8 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loadingBarBg, .loadingBarBg-5, .loadingBarBg-10 {
    background: linear-gradient(to right, #a3bfba 50%, #d0d9d8 50%);
    background-size: 200% auto;
    background-position: left bottom;
}

.loadingBarBg-5 {
    animation: loadingBarBg 5s ease;
}

.loadingBarBg-10 {
    animation: loadingBarBg 10s ease;
}

@keyframes loadingBarBg {
    0% {
        background-position: right bottom;
    }
    100% {
        background-position: left bottom;
    }
}

.spinner {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.spinner > span {
    width: 10px;
    height: 10px;
    background-color: #fff;
    margin: 0px 1px;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    animation-delay: -0.16s;
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.25);
    }
    40% {
        transform: scale(1.0);
    }
}

@keyframes outline-pulsate {
    0% {
        outline-color: rgba(255, 153, 0, 1);
    }
    50% {
        outline-color: rgba(255, 153, 0, 0);
    }
    100% {
        outline-color: rgba(255, 153, 0, 1);
    }
}

.pulsate {
    animation: pulsate 3s ease-out infinite;
    opacity: 0.5;
}

@keyframes pulsate {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 1.0;
    }
}

q, i, var {
    display: none;
}

.bgWhite {
    background: #fff !important;
}

.bgWhite20 {
    background: rgba(255, 255, 255, 0.2);
}

.bgWhite40 {
    background: rgba(255, 255, 255, 0.4);
}

.bgBlack20 {
    background: rgba(0, 0, 0, 0.2);
}

.bgBlack40 {
    background: rgba(0, 0, 0, 0.2);
}

.bgGrey {
    background: #e3e4e5 !important;
}

.bgDarkGreen, .bgLightGreen {
    background: rgba(62, 110, 60, 0.5) !important;
}

.bgDarkRed, .bgLightRed {
    background: rgba(159, 73, 73, 0.5) !important;
}

.bgShop {
    background: #aaacb3;
    color: #333 !important;
}

.bgShop svg {
    color: #333 !important;
}

.bgNone {
    background: none !important;
}

.bgFastest {
    background-color: rgba(82, 6, 183, 0.3);
}

.bgFlagRight {
    background-image: url(https://static.igpmanager.com/igp/design/image/bg-checker-r.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

.purple {
    color: #d27aff !important;
}

.darkgreen {
    color: #427128 !important;
}

.green {
    color: #5a9e35 !important;
}

.lightgreen {
    color: #8cb37d !important;
}

.grey {
    color: #999 !important;
}

.medgrey {
    color: #888 !important;
}

.darkgrey, .darkgrey svg {
    color: #bbb !important;
}

.black {
    color: #000 !important;
}

.vvdarkgrey {
    color: #222 !important;
}

.vdarkgrey {
    color: #444 !important;
}

.white {
    color: #fff !important;
}

.offwhite {
    color: #f2f2f2 !important;
}

.blue {
    color: #6699cc !important;
}

.teal {
    color: #669999 !important;
}

.red {
    color: #f05353 !important;
}

.orange {
    color: #d68a3d !important;
}

.lightred {
    color: #ffb2b2 !important;
}

.darkred {
    color: #993333 !important;
}

.pink {
    color: #ff99ff !important;
}

.gold {
    color: #e5ac00 !important;
}

.silver {
    color: #a6a6a6 !important;
}

.bronze {
    color: #b38659 !important;
}

.block-bronze {
    background: linear-gradient(
            -30deg,
            #b38659 30%,
            #d0a97a,
            #e0c4a3,
            #b38659 70%
    ) !important;
    color: #222 !important;
}

.block-silver {
    background: linear-gradient(
            -30deg,
            #b0b0b0 30%,
            #d0d0d0,
            #e0e0e0,
            #b0b0b0 70%
    ) !important;
    color: #222 !important;
}

.block-gold {
    background: linear-gradient(
            -30deg,
            #d9a941 30%,
            #f7c863,
            #f1d28f,
            #d9a941 70%
    ) !important;
    color: #222 !important;
}

.block-green {
    background: #7ca66c !important;
}

.block-grey {
    background: #9fa2a6 !important;
}

.block-blue, .bgBlue {
    background: #5e95b7 !important;
}

.block-red, .bgRed {
    background: #bf7373 !important;
}

.bgError {
    color: #994c4c;
    background: #dbb4b4 !important;
}

.block-orange {
    background: #cc9966 !important;
}

.block-green, .block-grey, .block-blue, .block-red, .block-orange, .block-bronze, .block-silver, .block-gold {
    border-radius: 8px;
    color: #fff;
    display: inline-flex; /* Updated from inline-block to flex */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    text-align: center;
    min-width: 40px;
    width: auto;
    padding: 3px;
    box-sizing: border-box; /* Include padding and borders in the width */
}

.block-blue svg, .block-green svg, .block-grey svg, .block-orange svg, .block-red svg {
    margin-right: 5px;
}

.border-green {
    border-color: #7ca66c !important;
}

.border-red {
    border-color: #bf7373 !important;
}

.border-green, .border-red {
    border: 1px solid;
    border-radius: 3px;
}

.xsmall {
    font-size: 0.625em !important;
}

.small {
    font-size: 0.75em !important;
}

.reduced {
    font-size: 0.85em !important;
}

.normal {
    font-size: 1em !important;
}

.enlargedNormal {
    font-size: 1.25em !important;
}

.medium {
    font-size: 1.5em !important;
}

.large {
    font-size: 2em !important;
}

.xlarge {
    font-size: 3em !important;
}

.xxlarge {
    font-size: 4em !important;
}

.verticalAlignWrapper {
    display: flex;
    align-items: center;
}

.icon-16, .icon-20, .icon-24, .icon-32, .icon-48, .icon-tokens {
    display: inline-block;
    pointer-events: none;
    vertical-align: middle; /* Align the icon with the middle of the text line */
}

.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.icon-tokens {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}

.icon-24 {
    width: 26px;
    height: 26px;
}

h2 svg {
    margin-top: -1px; /* Adjust the icon position */
}

.icon-32 {
    width: 32px;
    height: 32px;
}

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

.nopad {
    padding: 0;
}

.pad {
    padding: 6px 8px;
}

.pad5 {
    padding: 5px;
}

.pad10 {
    padding: 10px;
}

.padBig {
    padding: 8px 16px;
}

.padSmall {
    padding: 2px 4px;
}

.padSides {
    padding: 0px 5px;
}

.round2 {
    border-radius: 2px;
}

.round5 {
    border-radius: 5px;
}

.round8 {
    border-radius: 5px;
}

.iconline-24 {
    line-height: 28px;
}

.align {
    vertical-align: middle;
}

.align-top {
    vertical-align: top;
}

.align-bottom {
    vertical-align: bottom;
}

.vSpace {
    margin-bottom: 10px;
}

/* Apply the below overflow:hidden but only for nth column of table*/
.col1 td:nth-child(1),
.col2 td:nth-child(2),
.col3 td:nth-child(3),
.col4 td:nth-child(4),
.col5 td:nth-child(5),
.col6 td:nth-child(6),
.col7 td:nth-child(7),
.col8 td:nth-child(8),
.col9 td:nth-child(9),
.col10 td:nth-child(10) {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: none;
    white-space: nowrap;
}

.text-leftCol2 td:nth-child(2) {
    text-align: left;
}

/* Concatenate text */
.nowrap, .statWrap div, .btn, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8, .btnGold, .btnDiamond, #action, .notice, .dialog-subhead-content, .notify, #menu a, .dialog-head, .pic-name, #balance, #tokens {
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    white-space: nowrap;
}

.wrap {
    word-wrap: break-word;
    overflow: hidden;
}

#page-content .notify {
    z-index: 2;
}

#dialogs-container .notify {
    z-index: 101;
}

.friendTooltip {
    text-align: center;
    color: #ccc;
    background: #292d33;
    position: absolute;
    z-index: 201;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9em;
    box-sizing: border-box;
    min-width: 150px;
}

.friendTooltip .tTipArrow {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #292d33;
    top: 15%;
    left: 0;
    margin-left: -20px;
}

#dailyRewardsWrap {
    transform: translate(0);
    backface-visibility: hidden;
    will-change: transform;
    transition: all 1.2s ease-in-out;
}

#dailyRewards {
    font-family: "RobotoCondensedBold", sans-serif;
    overflow: visible;
    white-space: nowrap;
    padding: 50px 50px 100px;
    transition: all 0.3s ease-in-out;
}

#dailyRewards .singleReward {
    display: inline-block;
    width: 155px;
    text-align: center;
    margin: 0 5px;
    vertical-align: top;
    transition: all 0.3s ease-in-out;
}

.singleReward .rewardContent {
    width: 100%;
    background: #ddd;
    border: 1px solid #666;
    border-radius: 8px;
}

.rewardContent .topRow {
    background: #f2f2f2;
    padding: 10px 0;
    font-size: 1.25em;
    border-radius: 8px 8px 0 0;
}

.todayCard, .singleReward.todayOpened {
    padding: 0 20px;
    transform: scale(1.2);
}

.drSubImage {
    width: 50px;
    vertical-align: middle;
    margin: auto;
}

.todayCard .rewardContent {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    color: #444;
}

.todayCard .bottomRow {
    position: relative;
    top: 1px;
    margin: 0;
    border-radius: 0 0 8px 8px;
}

.pendingCard .bottomRow {
    background: #9c9c9c;
    padding: 9px 0;
    border-radius: 3px;
    color: #fff;
}

.pendingCard img {
    filter: grayscale(100%);
}

.dayHeading, #optionHeader, #todayRewardHeader {
    color: #fff;
    padding: 0;
}

#todayRewardHeader {
    font-family: "RobotoCondensed", sans-serif;
    font-size: 0.8em;
}

#todayRewardHeader span {
    color: #88cc7e;
}

.todayCard.expandCard {
    padding: 0 100px;
    z-index: 9999999;
    margin: 0 !important;
    animation: bounceDailyReward 0.3s ease-out forwards;
}

@keyframes bounceDailyReward {
    0% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(1.85);
    }
    100% {
        transform: scale(1.8);
    }
}

.shrinkCard {
    transform: scale(0.8);
}

.shrinkCard .singleReward:not(.todayCard) {
    opacity: 0.3;
}

.todayCard .dayHeading {
    color: #88cc7e;
}

.expandCard .dayHeading {
    opacity: 0;
}

.expandCard .bottomRow, #rewardOptions, .todayCard .optionResult,
.todayCard.opened .optionResult, .opened .bottomRow {
    display: none;
}

.expandCard #optionHeader {
    color: #88cc7e;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.opened h4 {
    color: #444;
}

.todayCard.solved.opened .optionResult {
    display: inline-block !important;
}

.notify {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute !important;
    top: 6px;
    right: 6px;
    padding: 0 !important;
    background: #d66e67 !important;
    border-radius: 50%;
    text-align: center;
    font-size: 0.875em !important;
    color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.notify, .notify svg {
    width: 8px !important;
    height: 8px !important;
}

.notched .notify,
.notchedSharp .notify {
    top: 12px;
    right: 12px;
}

/* Base table styles */
table.acp {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

table.acp th, table.acp td {
    margin: 0;
    padding: 5px 6px;
}

table.acp th {
    padding: 9px 4px;
    color: #e8e8e8;
    font-weight: normal;
    font-family: "RobotoCondensedBold";
    font-size: 80%;
    background: rgba(0, 0, 0, 0.1);
}

/* Table header styles */
table.acp thead th:first-child {
    border-radius: 6px 0 0 0;
}

table.acp thead th:last-child {
    border-radius: 0 6px 0 0;
}

/* Row styles */
table.rowBorders {
    border-collapse: separate;
    border-spacing: 0 2px;
}

table.rowBorders td,
table.dRows td {
    background: rgba(126, 137, 165, 0.15);
}

table.aRows tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.1);
}

table.aRows.hover tr:nth-child(even):hover,
table.hover tbody tr:hover,
div.hover:hover,
.hoverWrap .hover:hover,
td.hover:hover,
th.hover:hover {
    transition: background 150ms linear;
    background: rgba(0, 0, 0, 0.5);
}

td.key-pos {
    border-right: 5px solid #d5d5d5;
    text-align: center;
    width: 40px;
}

/* Text alignment */
.text-center, table.text-center td {
    text-align: center;
    justify-content: center;
}

.text-right, table.text-right td {
    text-align: right;
}

.text-left, table.text-left td {
    text-align: left;
}

/* Hover effects */
table.hover tbody tr,
.hoverWrap,
.minus,
.plus,
.hover {
    transition: background 0.08s linear;
}

/* Special row styles */
table.acp tr.myTeam {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
}

table.acp .teamName {
    color: #999;
}

/* Additional table styles */
table.linkFill a {
    width: 100%;
}

table.acp.pad td {
    padding: 8px 6px;
}

/* Tyre styles */
tr.tyre td {
    font-family: "RobotoCondensedBold";
    height: 55px;
    font-size: 1.4em;
    font-stretch: 80%;
    font-weight: bold;
    cursor: pointer;
    animation: zoomIn 0.4s ease-out;
    border-radius: 9px;
    will-change: opacity, background-color;
    transition: opacity 0.15s ease-in, background-color 0.15s ease-out;
}

tr.tyre td:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

#ts-SS, .ts-SS, #ts-S, .ts-S, #ts-M, .ts-M, #ts-H, .ts-H, #ts-I, .ts-I, #ts-W, .ts-W {
    text-indent: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 75%;
    color: #b6bcbf;
    font-weight: bold;
    text-align: center;
}

/* Adjust offset for two-row layout */
.tyreSelectInput[data-rows="2"] td.ts-SS,
.tyreSelectInput[data-rows="2"] td.ts-S,
.tyreSelectInput[data-rows="2"] td.ts-M,
.tyreSelectInput[data-rows="2"] td.ts-H,
.tyreSelectInput[data-rows="2"] td.ts-I,
.tyreSelectInput[data-rows="2"] td.ts-W {
    text-indent: 2px;
}

#ts-SS, .ts-SS {
    background-image: url(https://static.igpmanager.com/igp/design/image/tyre-ss.webp);
}

#ts-S, .ts-S {
    background-image: url(https://static.igpmanager.com/igp/design/image/tyre-s.webp);
}

#ts-M, .ts-M {
    background-image: url(https://static.igpmanager.com/igp/design/image/tyre-m.webp);
}

#ts-H, .ts-H {
    background-image: url(https://static.igpmanager.com/igp/design/image/tyre-h.webp);
}

#ts-I, .ts-I {
    background-image: url(https://static.igpmanager.com/igp/design/image/tyre-i.webp);
}

#ts-W, .ts-W {
    background-image: url(https://static.igpmanager.com/igp/design/image/tyre-w.webp);
}

tr.tyre td.inactive,
.tyreSelectInput table td.inactive {
    opacity: 0.3;
}

tr.tyre td.inactive:hover,
.tyreSelectInput table td.inactive:hover {
    opacity: 0.6;
}

/* Strategy table styles */
table.strategy {
    margin: 10px auto;
    width: 100%;
    table-layout: fixed;
    text-align: center;
    border-spacing: 2px;
    border-collapse: separate;
}

table.strategy td {
    padding: 4px 6px;
}

table.strategy th {
    width: 10%;
    font-size: 0.8em;
    font-weight: normal;
}

table.strategy a.btn,
table.strategy a.btn2 {
    width: 100%;
}

/* Tyre select input styles */
.tyreSelectInput {
    margin: auto;
    margin-bottom: 10px;
}

.tyreSelectInput table {
    table-layout: fixed;
    width: 100%;
}

.tyreSelectInput tr {
    height: 48px;
}

.tyreSelectInput td {
    font-size: 0.95em;
    cursor: pointer;
    border-radius: 6px;
    will-change: opacity;
    transition: opacity 0.15s ease-in;
}

.tyreSelectInput span {
    display: inline-block; /* Ensures transform applies properly */
    transform: scaleX(0.85); /* Shrinks text width to 80% */
}

.number {
    display: none;
}

.igpNum {
    background: rgba(2, 12, 25, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 100px;
    text-align: center;
    border-radius: 2rem;
    font-family: "RobotoCondensedBold";
    border: 1px solid #6c7880;
    user-select: none;
}

.igpNum .minus,
.igpNum .plus {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #6c7880, #5c6a70);
    color: #f2f2f2;
    transition: background 0.15s ease-in-out;
    cursor: pointer;
}

/* Button shapes */
.igpNum .minus {
    border-radius: 50% 0 0 50%;
}

.igpNum .plus {
    border-radius: 0 50% 50% 0;
}

/* Icon positioning */
.igpNum .minus svg {
    margin-left: 3px;
}

.igpNum .plus svg {
    margin-right: 3px;
}

/* Hover state */
.igpNum .minus:not(.disabled):hover,
.igpNum .plus:not(.disabled):hover {
    background: linear-gradient(180deg, #566067, #404b50);
}

/* Pressed state - new class */
.igpNum .minus.pressed:not(.disabled),
.igpNum .plus.pressed:not(.disabled) {
    background: linear-gradient(0deg, #6c7880, #5c6a70);
    transform: translateY(1px);
}

/* Disabled state */
.igpNum .minus.disabled,
.igpNum .plus.disabled {
    background: linear-gradient(180deg, #404b50, #363e42);
    opacity: 0.5;
    cursor: not-allowed;
}

.igpNum.s .plus, .igpNum.s .minus {
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
}

.igpNum.m .plus, .igpNum.m .minus {
    width: 3rem;
    font-size: 1.5rem;
    height: 3rem;
}

.igpNum.m .num {
    font-size: 1.4rem;
}

span.prepend, span.append {
    color: #7a828a !important;
}

.igpNum.m .prepend, .igpNum.m .append {
    font-size: 1em;
}

#tyre-info h1 {
    color: #477337;
    margin: 0;
    padding: 0;
}

#tyre-info {
    text-align: center;
}

.staffImage {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    aspect-ratio: 1/1;
}

/* Set initial states */
.staffImage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateY(20%);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

/* SVGs should always be visible by default */
.staffImage > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

/* Base loading animations */
.liveryImage img,
.fadeInOnLoad img,
.fadeInOnLoad svg,
img.fadeInOnLoad,
svg.fadeInOnLoad {
    opacity: 0;
    transition: opacity 500ms ease-in, transform 500ms ease-in;
}

.liveryImage.loaded img,
.fadeInOnLoad.loaded img,
.fadeInOnLoad.loaded svg,
img.fadeInOnLoad.loaded,
svg.fadeInOnLoad.loaded,
.staffImage.loaded img {
    opacity: 1;
    transform: translateY(0);
}

/* Half image specific styles (img only, not svg) */
.halfImage img {
    transform: translateY(20%) scale(2);
    transform-origin: center 10%;
}

.halfImage.loaded img {
    transform: translateY(0) scale(2);
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

/* Pointer interactions - base transitions */
.staffImage.pointer img,
.pointer .staffImage img {
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

/* Regular image and ALL svg hovers */
.staffImage.pointer:hover > svg {
    transform: scale(1.06);
}

.staffImage.pointer:not(.halfImage):hover img,
.pointer:hover .staffImage:not(.halfImage) img {
    transform: scale(1.06);
}

/* Half image hover (img only) */
.staffImage.halfImage.pointer:hover img,
.pointer:hover .staffImage.halfImage img {
    transform: scale(2.12);
}

.driverName {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 10px;
    line-height: 1.2;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.driverEdit {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px;
    box-sizing: border-box;
    background: #000;
    border-radius: 4px;
    z-index: 2;
}

.driverEdit:hover {
    background: #333;
}

.sPic {
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    vertical-align: top;
    padding: 5px;
    box-sizing: border-box;
}

.sInfo {
    display: inline-block;
    width: 69%;
    vertical-align: top;
    box-sizing: border-box;
}

.btn, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8, .btnGold, .btnDiamond, .btnSpecial, #action {
    font-family: RobotoCondensedBold;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    vertical-align: middle;
}

.btn7 {
    padding: 3px 9px;
    border-radius: 2px;
}

.smallBtn {
    height: auto;
    font-size: 0.8em;
    padding: 3px;
}

.bigBtn {
    font-size: 1.2em;
    min-height: 44px;
    padding: 10px 18px;
}

.hugeBtn {
    font-size: 1.4em;
    min-height: 64px;
    padding: 15px 23px;
}

.btn, .btn:hover, .btn:active {
    --pbtnBg: #4f7540;
    background: #689954;
    background: linear-gradient(0deg, #689954, #5d874c);
    color: #d8f7cb !important;
}

.btn2, .btn2:hover, .btn2:active {
    --pbtnBg: #acacac;
    background: linear-gradient(0deg, #d0d0d0, #b4b4b4);
    /*background: #f7f7f7;*/
    color: #555659 !important;
}

/* Gold-styled button for premium throttle */
.btnGold, .btnGold:hover, .btnGold:active {
    --pbtnBg: #c7ae49;
    background: linear-gradient(0deg, #f0d98a, #d4b247);
    color: #1a1a1a !important;
    border: 1px solid #b8972b;
}
.btnGold:hover { filter: brightness(1.06); }
.btnGold:active { filter: brightness(0.98); box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); }
.btnGold.disabled, .btnGold.disabled:hover, .btnGold.disabled:active { opacity: 0.85; }

/* Diamond-styled button matching gold structure (no hover color change) */
.btnDiamond, .btnDiamond:hover, .btnDiamond:active {
    --pbtnBg: #8bc9ec;
    background: linear-gradient(0deg, #cfefff, #7cc7eb);
    color: #1a1a1a !important;
    border: 1px solid #5ab3d9;
}
.btnDiamond:active { box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); }
.btnDiamond.disabled, .btnDiamond.disabled:hover, .btnDiamond.disabled:active { opacity: 0.85; }

.btn3, .btn3:hover, .btn3:active {
    --pbtnBg: #a3544e;
    background: #d66e67 !important;
    color: #ffcfcc;
}

#action {
    position: relative;
    max-width: 0;
    transform-origin: right center;
    transform: scaleX(0);
    transition: all 0.3s ease-out;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    padding: 0;
}

#action.show {
    max-width: 200px; /* Adjust based on your needs */
    transform: scaleX(1);
    opacity: 1;
    pointer-events: auto;
    padding: 0.5em 1em; /* Restore original padding */
}

#action.show.disabled {
    opacity: 0.5;
    pointer-events: none;
}

#action, #action:hover, #action:active {
    --pbtnBg: #a3544e;
    background: #d66e67 !important;
    color: #ffcfcc;
    width: 200px;
    height: 50px;
    margin-left: 5px;
}

.btn4, .btn4:hover, .btn4:active {
    --pbtnBg: #406080;
    background: #5986b3;
    color: #fff;
}

.btn5, .btn5:hover, .btn5:active {
    --pbtnBg: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.4);
    color: #f2f2f2 !important;
}

.btn6, .btn6:hover, .btn6:active {
    --pbtnBg: #b37924;
    background: #e59c2e;
    color: #222 !important;
}

.btn7, .btn7:hover, .btn7:active {
    --pbtnBg: #303033;
    background: #616166;
    color: #f2f2f2 !important;
}

/* Reusable special button variant (standalone, like btnGold) */
.btnSpecial, .btnSpecial:hover, .btnSpecial:active {
    --pbtnBg: #6a6ea0;
    background: linear-gradient(0deg, #767bb3, #6a6ea0);
    color: #fff !important;
}

/* Smaller sizing for special badge */
.btnSpecial {
    font-size: 0.8em;
    padding: 4px 10px;
    min-height: 28px;
    line-height: 1.2;
}

/* Hover/active micro-motion like push buttons */
.btnSpecial:hover { filter: brightness(1.06); }
.btnSpecial:active { filter: brightness(0.98); box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); }

/* Gradient utilities for ability tiers (override base btn backgrounds) */
.bgTier0 {
    background: linear-gradient(90deg, #4a148c 0%, #6a1b9a 25%, #8e24aa 50%, #ab47bc 75%, #ce93d8 100%) !important;
    color: #fff !important;
    border: 1px solid #ce93d8;
}

.bgTier1 {
    background: linear-gradient(90deg, #2d5a8b 0%, #477db3 25%, #5a8cc4 50%, #7ba3d8 75%, #9cb9ec 100%) !important;
    color: #fff !important;
    border: 1px solid #9cb9ec;
}

.bgTier2 {
    background: linear-gradient(90deg, #8b3d1a 0%, #a54a22 25%, #c45a3a 50%, #e67254 75%, #ff8a6b 100%) !important;
    color: #fff !important;
    border: 1px solid #ff8a6b;
}

.bgTier3 {
    background: linear-gradient(90deg, #993366 0%, #b34d7a 25%, #cc6699 50%, #e07eb1 75%, #ff99cc 100%) !important;
    color: #fff !important;
    border: 1px solid #ff99cc;
}

/* Glowing/sweep effects (camelCase) */
.transitionButton {
    position: relative;
    overflow: hidden;
}

.transitionButton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    z-index: 1;
    pointer-events: none;
    animation: buttonSweep 4s ease-in-out infinite;
}

@keyframes buttonSweep {
    0%, 40% { left: -100%; }
    45%, 55% { left: 100%; }
    60%, 100% { left: -100%; }
}

.legendaryButton {
    position: relative;
    overflow: hidden;
}

.legendaryButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
    animation: premiumShine 2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes premiumShine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

/* Toggling texts inside transitionButton */
.transitionButton { position: relative; }
.transitionButton .rarityText {
    position: relative;
    opacity: 1;
    animation: rarityTextFade 4s ease-in-out infinite;
}
.transitionButton .upgradeText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    animation: upgradeTextFade 4s ease-in-out infinite;
}

@keyframes rarityTextFade {
    0%, 40% { opacity: 1; }
    50%, 90% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes upgradeTextFade {
    0%, 40% { opacity: 0; }
    50%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

.btn8, .btn8:active {
    --pbtnBg: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.2);
    color: #adb3c1 !important;
    transition: background 150ms linear;
}

.btn8:hover {
    background: rgba(0, 0, 0, 0.4);
}

.pushBtn {
    transition: transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5), box-shadow 0ms;
    transform: translateY(0);
    border-bottom: 1px solid var(--pbtnBg) !important;
    box-shadow: var(--pbtnBg) 0px 3px 0px 0px;
    margin-bottom: 4px;
}

.pushBtn:hover {
    transition: transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5), box-shadow 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
    transform: translateY(-2px);
}

.pushBtn:active {
    transform: translateY(2px);
    box-shadow: var(--pbtnBg) 0px 0px 0px 0px;
    transition: transform 34ms, box-shadow 34ms;
}

.glossy:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    border-radius: 8px;
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
    pointer-events: none; /* So the pseudo-element doesn't interfere with button functionality */
}

.disabled {
    opacity: 0.35 !important;
}

.disabled, .disabled:hover, .disabled:active {
    cursor: default;
}

.tutorial-highlight.disabled {
    opacity: 1 !important;
}

.btnGlow {
    color: #fff;
    text-shadow: 0 0 10px #ccffff, 0 0 20px #ccffff, 0 0 30px #ccffff, 0 0 40px #ccffff, 0 0 50px #ccffff, 0 0 60px #ccffff, 0 0 70px #ccffff;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px #ccffff, 0 0 20px #ccffff, 0 0 30px #ccffff, 0 0 40px #ccffff, 0 0 50px #ccffff, 0 0 60px #ccffff, 0 0 70px #ccffff;
    }
    100% {
        text-shadow: 0 0 20px #999, 0 0 30px #999, 0 0 40px #999, 0 0 50px #999, 0 0 60px #999, 0 0 70px #999, 0 0 80px #999;
    }
}

span.tooltip, div.tooltip, td.tooltip, th.tooltip, tr.tooltip, #achievements img.tooltip, .hoverData, .disabled.tooltip {
    cursor: help;
}

span.tooltip {
    display: inline-block;
}

.tTip {
    text-align: center;
    color: #444c59;
    font-family: RobotoCondensedBold;
    background: linear-gradient(0deg, #c3c7ca, #eceff3, #c3c7ca);
    /*background: radial-gradient(circle at center, #eceff3, #c3c7ca);*/
    box-shadow: 0px 3px 0px 0px #979797, 0px 2px 10px rgba(0, 0, 0, 0.4);
    position: absolute;
    z-index: 201;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9em;
    box-sizing: border-box;
    min-width: 150px;
}

.tTip a {
    border-bottom: none;
}

.tTipArrow {
    /* triangle decoration */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #c3c7ca;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -11px;
    margin-left: -8px;
    z-index: 202;
}

.tTipArrow.topArrow {
    border-top-color: transparent;
    border-bottom: 12px solid #c3c7ca;
    top: -20px;
    bottom: auto;
}

.tTip .one-btn, .tTip .two-btn, .tTip .three-btn {
    margin-top: 10px;
}

/* IGP Alert (tooltip-styled modal without arrow) */
.igpAlertOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200; /* just under .tTip which is 201, alert dialog will be higher */
}

.igpAlert {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    text-align: center;
    color: #444c59;
    font-family: RobotoCondensedBold;
    background: linear-gradient(0deg, #c3c7ca, #eceff3, #c3c7ca);
    box-shadow: 0px 3px 0px 0px #979797, 0px 2px 10px rgba(0, 0, 0, 0.4);
    padding: 24px;
    border-radius: 16px;
    box-sizing: border-box;
    min-width: 240px;
    max-width: 420px;
    z-index: 202;
}

.igpAlertTitle {
    font-size: 1.2em;
    margin-bottom: 6px;
}

.igpAlertMessage {
    font-size: 1.2em;
    margin: 6px 0 10px 0;
}

.igpAlert .one-btn, .igpAlert .two-btn, .igpAlert .three-btn {
    margin-top: 10px;
}

.choiceDiv:not(.active) {
    opacity: 0.3 !important;
    cursor: pointer;
}

.choiceDiv:hover {
    opacity: 0.5 !important;
}

.choiceDiv.active {
    opacity: 1.0 !important;
}

.three-btn {
    display: flex;
    justify-content: space-between; /* Distribute space between the divs */
    gap: 1%; /* Equivalent to margin between items */
}

.three-btn > a,
.three-btn > div,
.three-btn > input[type="submit"] {
    flex: 1 1 33.33%; /* Grow and shrink as needed, with a base width of 30% */
}

.two-btn {
    display: flex;
    justify-content: space-between; /* This will place space between the buttons */
    gap: 1%;
    width: 100%;
}

.two-btn > a,
.two-btn > input[type="submit"],
.two-btn > div {
    flex: 1 1 49%; /* Flex grow, flex shrink, and flex basis */
}

.one-btn {
    display: flex;
    justify-content: space-between; /* This will place space between the buttons */
    align-items: center; /* This will align the buttons vertically */
    width: 100%;
}

.one-btn > a,
.one-btn > input[type="submit"],
.one-btn > div {
    flex: 100%; /* Flex grow, flex shrink, and flex basis */
}

.fill-w {
    width: 100%;
}

a.fill, a.fill-w {
    margin: 0px;
}

.fill {
    width: 100%;
    height: 100%;
}

.vSpaceLinks a {
    width: 100%;
    justify-content: left;
    text-align: left !important;
}

.vSpaceLinks svg {
    margin-right: 20px;
}

.vSpaceLinks a:not(:last-child), .vSpaceLinks a:not(:last-child):visited, .vSpaceLinks a:not(:last-child):hover, .vSpaceLinks a:not(:last-child):active {
    margin-bottom: 5px !important;
}

div.c-wrap {
    background: linear-gradient(180deg, rgb(28, 52, 86) 0%, rgb(22, 44, 78) 100%);
    border-radius: 8px;
    margin-bottom: 10px;
}

div.c-wrap.dark {
    background: rgba(14, 16, 21, 0.8);
}

div.c-wrap.light {
    background: rgba(86, 92, 108, 0.8);
}

/* Universal card background */
.bg-card {
    background: linear-gradient(180deg, rgb(28, 52, 86) 0%, rgb(22, 44, 78) 100%) !important;
}

div.c-head, div.c-foot {
    display: flex;
    box-sizing: border-box;
    align-items: center; /* Vertically aligns all child elements */
}

.dull {
    color: #adb3c1 !important;
}

.vDull {
    color: #9da2af !important;
}

div.c-wrap > div.c-head, div.c-wrap > div.c-headBg {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px 8px 0px 0px;
}

div.c-wrap > div.c-foot, div.c-wrap > div.c-footBg {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0px 0px 8px 8px;
}

.mRight {
    margin-right: 5px !important;
}

.mRight10 {
    margin-right: 10px !important;
}

.mLeft {
    margin-left: 5px !important;
}

.mLeft10 {
    margin-left: 10px !important;
}

.mTop {
    margin-top: 5px !important;
}

.mTop10 {
    margin-top: 10px !important;
}

.mTop15 {
    margin-top: 15px !important;
}

.mBottom {
    margin-bottom: 5px !important;
}

.mBottom10 {
    margin-bottom: 10px !important;
}

.mBottom15 {
    margin-bottom: 15px !important;
}

.mRight0 {
    margin-right: 0 !important;
}

.mLeft0 {
    margin-left: 0 !important;
}

.mTop0 {
    margin-top: 0 !important;
}

.mBottom0 {
    margin-bottom: 0 !important;
}

div.c-head > .left, div.c-foot > .left, a > .left {
    margin-right: auto; /* Pushes the element to the left */
}

div.c-head > .right, div.c-foot > .right, a > .right {
    margin-left: auto; /* Pushes the element to the right */
}

.notched, .notchedSharp {
    position: relative;
    background-color: #2b3b52;
    border-radius: 6px;
}

.notched::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    background: linear-gradient(45deg, transparent 50%, #5a9e35 50%);
    border-top-right-radius: 6px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.notchedSharp::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background: linear-gradient(45deg, transparent 50%, #5a9e35 50%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

div.greyWrap {
    background: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.pic, .pic-s {
    background: #e3e4e5;
}

.pic-xt, .pic-xxs, .pic-xs, .pic-t, .pic-s, .pic-m, .pic-l, .mailPic, .pic-t svg, .pic-xxs svg, .pic-xt svg, .pic-xs svg, .pic-s svg, .pic-m svg, .pic-l svg, .mailPic svg, .pic-t img, .pic-xxs img, .pic-xt img, .pic-xs img, .pic-s img, .pic-m img, .pic-l img, .mailPic img {
    border-radius: 5px;
    object-fit: cover;
}

.pic-xt {
    width: 36px;
    height: 36px;
}

.pic-xxs {
    width: 44px;
    height: 44px;
}

.pic-xs, .pic-t, .picWrap-t {
    width: 50px;
}

.pic-xs, .pic-t {
    height: 50px;
}

.pic-s {
    width: 80px;
    height: 80px;
}

.pic-m {
    width: 100px;
    height: 100px;
    aspect-ratio: 1/1;
}

.pic-xt, .pic-xxs, .pic-xs, .pic-t {
    margin-right: 5px;
}

.skillTipTable td {
    padding: 2px;
}

.hoverThis {
    transition: opacity 100ms ease-in-out;
}

.hoverThis:not(.disabled):hover {
    opacity: 0.85;
}

.hoverThis:not(.disabled):active {
    opacity: 0.5;
}

.hoverUp {
    transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5), box-shadow 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
    transform: translateY(0);
}

.hoverUp:hover {
    transform: translateY(-2px);
}

.hoverUp:active {
    transform: translateY(2px);
    transition: transform 34ms;
}

.weatherTemp {
    vertical-align: super;
    font-size: smaller;
}

.waterLevel {
    position: relative;
    background: url('design/water-level.png') top left;
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 25.4px;
    margin-right: 5px;
    border: 0;
    padding: 0;
}

.waterLevel img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
}

.waterLevelText {
    color: #66b2cc;
    margin-right: 5px;
}

.weatherIcon {
    position: relative;
    top: -4px;
    display: inline-block;
}

.com-wrap {
    margin-bottom: 5px;
    word-wrap: break-word;
    /*                overflow: hidden;*/
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

.com-author, .showReplyBox, .viewReply, .hideReply {
    font-family: "RobotoCondensedBold";
}

.com-info {
    color: #999;
}

.com-content {
    padding-left: 60px;
}

.replyContents {
    padding: 10px 0px 0px 60px;
}

.com-text {
}

.com-text pre {
    font-family: inherit;
    margin: 0;
    display: inline-block;
    white-space: inherit;
}

textarea#commentContent, .FormContainer > div.replyComment {
    overflow: auto;
    display: block;
    min-height: 38px;
    max-height: 215px;
}

#comment input[type="submit"] {
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: -4px;
}

.showReplyBox, .viewReply, .hideReply, .unreadComment {
    display: inline-block;
    margin-top: 10px;
}

.viewReply, .hideReply {
    min-width: 120px;
    text-align: right;
    margin-left: 10px;
}

.replyComments {
    margin-top: 10px;
}

.replyComments > .com-wrap:last-child {
    border: none;
}

.FormContainer > div.replyComment {
    display: block;
    width: 100%;
    margin: 0 0 5px;
}

.replytagName {
    display: inline-block;
}

.reply-edit, .com-delete {
    display: none;
}

.pc-main-div {
    position: relative;
    width: 100%;
    aspect-ratio: 2.78 / 1;
    border-radius: 6px;
    padding: 0;
    box-sizing: border-box;
    transition: background 0.08s linear;
}

.pc-lr, .pc-lf, .pc-rr, .pc-rf, .pc-m {
    width: 90px;
    color: #adb3c1;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
    border-radius: 4px;
    font-family: RobotoCondensedBold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 5px;
    text-align: center;
    transition: background 0.08s linear;
    position: absolute;
}

.pc-lr, .pc-lf {
    right: 5px;
}

.pc-rr, .pc-rf {
    left: 5px;
}

.pc-lr, .pc-rr {
    top: 5px;
}

.pc-lf, .pc-rf {
    bottom: 5px;
}

.pc-m {
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Styles for when inside #trainingPitcrew or .dialog */
/* pc-lr: top left (already default, but good to be explicit for this context) */
#trainingPitcrew .pc-lr,
.dialog .pc-lr {
    top: 5px;
    left: 5px;
    right: auto;
    bottom: auto;
}

/* pc-lf: top right */
#trainingPitcrew .pc-lf,
.dialog .pc-lf {
    top: 5px;
    right: 5px;
    left: auto;
    bottom: auto;
}

/* pc-rf: bottom right (already default, but good to be explicit) */
#trainingPitcrew .pc-rf,
.dialog .pc-rf {
    bottom: 5px;
    right: 5px;
    top: auto;
    left: auto;
}

/* pc-rr: bottom left */
#trainingPitcrew .pc-rr,
.dialog .pc-rr {
    bottom: 5px;
    left: 5px;
    top: auto;
    right: auto;
}

.bidWindow {
    height: 200px;
    overflow-y: hidden;
}

.bidWindow .bid {
    margin-top: 5px;
    padding: 5px;
}

.bidWindow .bid:first-child {
    background: rgba(255, 255, 255, 0.2);
    border-right: 10px solid #d9bb62;
}

.bidWindow .bid:nth-child(2) {
    border-right: 10px solid #ccc;
}

.bidWindow .bid:nth-child(3) {
    border-right: 10px solid #bf9673;
}

.bidWindow .pic {
    float: left;
    max-height: 50px;
    margin-right: 5px;
}

.winningBid {
    background: rgba(206, 224, 200, 0.2) !important;
}

.losingBid {
    background: rgba(224, 200, 200, 0.2) !important;
}

#achievements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 8px;
    justify-items: center;
}

#achievements img {
    display: block;
    width: 48px;
    height: 48px;
}

/*************************/
/* Miscellaneous         */
/*************************/
#rpmFrame {
    width: 100%;
    aspect-ratio: 4/3;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
    Droid Sans, Helvetica Neue, sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

.fs80 {
    font-size: 80%;
}

.robotoBold {
    font-family: "RobotoCondensedBold";
}

.robotoCondensed {
    font-family: "RobotoCondensed";
}

.uppercase {
    text-transform: uppercase;
}

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #171e2c;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

.errorList {
    color: #fff;
    background: #1a1a24;
    padding: 8px;
    list-style-position: inside;
    margin: 15px 0;
    border-bottom: 5px solid #c52d2d;
    border-radius: 8px;
}

.errorList ul {
    list-style-type: circle;
    padding: 0;
    margin: 0;
}

.error {
    color: #c52d2d;
    border: 1px solid #c52d2d;
}

.success {
    color: #6C0;
}

.counter {
    color: #666;
}

.limit {
    color: #f00;
}

.notice {
    display: block;
    text-align: center;
    padding: 10px;
    background: url(https://static.igpmanager.com/igp/design/image/bg-checker-white.png) no-repeat top left,
    url(https://static.igpmanager.com/igp/design/image/bg-checker-r-white.png) no-repeat top right,
    rgba(0, 0, 0, 0.6);
    background-size: contain;
    color: #f2f2f2;
    font-size: 0.9em;
    margin: 10px 0;
    border-radius: 5px;
    line-height: 1.5; /* Adjust as needed */
    position: relative; /* For alignment purposes */
    vertical-align: middle;
}

/* Inner elements use inline-block and vertical-align */
.notice div.left,
.notice div.right {
    display: inline-block;
    vertical-align: middle;
}

.lap-msg {
    font-family: "RobotoCondensedBold";
    text-transform: uppercase;
    font-size: 0.9em;
    color: #505958;
    text-align: center;
    margin: 5px 0px;
    border-radius: 12px;
    padding: 0px 0px;
    width: 100%;
    box-sizing: border-box;
}

#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    opacity: 0;
    transition: opacity 1s ease;
}

#bgDarken {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust darkness here */
    z-index: 99; /* Ensures the overlay is above background images */
    opacity: 1; /* Ensure the darken layer is visible */
    pointer-events: none; /* Prevents interference with user interactions */
    transition: opacity 1s ease;
}

.background.active {
    opacity: 1;
}

#bgDarken {
    background: rgba(14, 14, 20, 0.5); /* Adjust darkness here */
    z-index: 1; /* Ensures the overlay is above the background image */
    pointer-events: none; /* Prevents interference with user interactions */
}

.background#bgImage {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-default.webp');
}

.background#bgImageGym {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-gym.webp');
}

.background#bgImageHq {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-hq.webp');
}

.background#bgImageCar {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-car.webp');
}

.background#bgImageShop {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-race.webp');
}

.background#bgImageHome {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-home.webp');
}

.background#bgImageFans {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-fans.webp');
}

.background#bgImageCommunity {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-community.webp');
}

.background#bgImageVip {
    background-image: url('https://static.igpmanager.com/igp/design/image/bg-vip.webp');
}

.pointer, .pointerHover {
    cursor: pointer;
}

.hide, .svgEdit, .linkParent, .rotateThis .inactive {
    display: none !important;
}

#svgPlaceholder {
    width: 0;
    height: 0;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    visibility: collapse;
}

.rotateThis .btn2 {
    justify-content: space-between;
}

#headerProfile {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52px;
    font-size: 0.9em;
    margin-left: 10px;
}

#headerProfile.active {
    border-radius: 4px 4px 0 0;
}

.headerProfilePic, #myProfilePic img {
    max-width: 50px;
    max-height: 50px;
    border-radius: 3px;
}

#myProfilePic img {
    margin: 5px 10px;
}

#myProfileStats {
    background: #aaacb3;
    border-radius: 3px;
    padding: 5px;
    margin: 5px;
}

#mManager {
    background: #3d4252;
}

.balance-positive {
    color: #88cc7e !important;
}

.balance-negative {
    color: #ff4d4d !important;
}

@keyframes flash-up {
    0% {
        background: #689954;
        color: #fff;
    }
    100% {
        color: inherit; /* This will allow the .balance-negative color to show */
    }
}

@keyframes flash-down {
    0% {
        background: #d66e67;
        color: #fff;
    }
    100% {
        color: inherit; /* This will allow the .balance-negative color to show */
    }
}

.flash-up, .flash-down {
    animation-fill-mode: forwards; /* Ensure the final state is kept */
}

.flash-up {
    animation: flash-up 1s ease-out;
}

.flash-down {
    animation: flash-down 1s ease-out;
}

.trPlus {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute !important;
    top: 4px;
    right: 4px;
    padding: 0 !important;
    background: #689954 !important;
    border-radius: 3px;
    text-align: center;
    font-size: 0.875em !important;
    color: #fff !important;
    width: 14px !important;
    height: 14px !important;
}

.trPlus svg {
    width: 14px !important;
    height: 14px !important;
    color: #fff !important;
    top: 0 !important;
}

.ratingBar, .ratingBar div, .ratingBar-s, .ratingBar-s div {
    position: relative;
    height: 4px;
}

.ratingBar, .ratingBar-s {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.ratingBar-s {
    width: 50%;
    max-width: 100px;
    min-width: 33px;
}

.ratingBar {
    width: 100%;
}

.ratingBar div, .ratingBar-s div {
    border-radius: 4px;
    transform-origin: left center;
    animation: zoomIn3 0.5s ease-out;
    transition: width 250ms ease-out; /* Add transition for width */
    background: #f2f2f2;
}

.ratingBar .dull, .ratingBar-s .dull {
    background: #989eac !important;
}

.ratingVal.dull {
    color: #989eac !important;
}

.ratingBar .red, .ratingBar-s .red, .ratingVal.red, .segmented-bar-container.red .segment.filled {
    background: #f05353 !important;
}

.ratingBar .orange, .ratingBar-s .orange, .ratingVal.orange, .segmented-bar-container.orange .segment.filled {
    background: #d68a3d !important;
}

.ratingBar .purple, .ratingBar-s .purple, .ratingVal.purple, .segmented-bar-container.purple .segment.filled {
    background: #d88fff !important;
}

.ratingBar .green, .ratingBar-s .green, .ratingVal.green, .segmented-bar-container.green .segment.filled {
    background: #5a9e35 !important;
}

.ratingBar .teal, .ratingBar-s .teal, .ratingVal.teal, .segmented-bar-container.teal .segment.filled {
    background: #669999 !important;
}

/* Text colors still needed for ratingVal */
.ratingVal.red, .ratingVal.orange, .ratingVal.purple, .ratingVal.green, .ratingVal.teal {
    background: none !important;
}

.ratingVal.red {
    color: #f05353 !important;
}

.ratingVal.orange {
    color: #d68a3d !important;
}

.ratingVal.purple {
    color: #d88fff !important;
}

.ratingVal.green {
    color: #5a9e35 !important;
}

.ratingVal.teal {
    color: #669999 !important;
}

.ratingBar .orangeGradient div, .ratingBar-s .orangeGradient div {
    background: #e38b2d linear-gradient(to right, #e38b2d 45%, #f7cf4a 90%) !important;
}

.ratingVal.orangeGradient {
    color: #d68a3d !important;
}

.ratingBar .striped, .ratingBar-s .striped {
    background: #4a5459 repeating-linear-gradient(
            -45deg,
            currentColor,
            currentColor 4px,
            transparent 4px,
            transparent 8px
    ) !important;
}

.ratingVal.striped {
    color: #e9e9e9 !important;
}

.ratingVal {
    font-family: "RobotoCondensedBold";
}

.segmented-bar-container {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

@media (max-width: 800px) {
    .segmented-bar-container {
        width: 80px;
    }
}

.segmented-bar {
    display: flex;
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 2px;
}

.segment {
    flex: 1;
    background: transparent;
    border-right: 2px solid rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: scale(0.5);
    animation: segmentPopUp 0.6s ease-out forwards; /* doubled from 0.3s to 0.6s */
}

.segmented-bar .segment:first-child {
    border-radius: 8px 0 0 8px;
}

.segmented-bar .segment:last-child {
    border-radius: 0 8px 8px 0;
    border-right: none !important;
}

/* Setup Slider */
.setupSliderWrap { width: 100%; margin: 15px 0; }
.setupSlider-header { display: flex; align-items: center; gap: 10px; }
.setupSlider-label { font-size: 14px; color: #e9e9e9; min-width: 100px; flex-shrink: 0; position: relative; text-align: center; z-index: 0; }
.setupSlider-label.increase::before { content: ''; position: absolute; right: -5px; top: 0; bottom: 0; left: 0; background: url('https://static.igpmanager.com/igp/design/image/bg-chevron.png') right center no-repeat; background-size: auto 100%; z-index: -1; }
.setupSlider-label.decrease::before { content: ''; position: absolute; left: -5px; top: 0; bottom: 0; right: 0; background: url('https://static.igpmanager.com/igp/design/image/bg-chevron.png') right center no-repeat; background-size: auto 100%; transform: scaleX(-1); z-index: -1; }
.setupSlider-value { font-size: 20px; color: #fff; min-width: 40px; text-align: center; margin: 0 5px; }
.setupSlider-container { position: relative; flex-grow: 1; }
.setupSlider-track { position: relative; width: 100%; height: 12px; background: rgba(0,0,0,0.3); border-radius: 2px; }
.setupSlider-idealRange { position: absolute; top: 2px; height: calc(100% - 4px); background: #20859e; border-radius: 2px; opacity: 0.7; transition: left 0.5s ease-in-out, width 0.5s ease-in-out; }
.setupSlider-indicator { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 6px; height: 18px; background: #fff; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); transition: left 0.08s; pointer-events: none; z-index: 3; }
.setupSlider-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.setupSlider-input::-webkit-slider-thumb, .setupSlider-input::-moz-range-thumb { width: 6px; height: 18px; cursor: pointer; }
.setupSlider-s .setupSlider-track { height: 10px; }
.setupSlider-s .setupSlider-indicator { width: 5px; height: 16px; }
.setupSlider-s .setupSlider-value { font-size: 18px; min-width: 35px; }
@media (max-width: 767px) { .setupSlider-value { font-size: 18px; min-width: 35px; } .setupSlider-label { min-width: 80px; font-size: 13px; } }

@keyframes segmentPopUp {
    0% {
        opacity: 0;
        transform: scaleX(0.5);
    }
    70% {
        opacity: 1;
        transform: scaleX(1.1);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Animation delays for each segment (up to 10 segments) */
.segment:nth-child(1) {
    animation-delay: 0s;
}

.segment:nth-child(2) {
    animation-delay: 0.07s;
}

.segment:nth-child(3) {
    animation-delay: 0.14s;
}

.segment:nth-child(4) {
    animation-delay: 0.21s;
}

.segment:nth-child(5) {
    animation-delay: 0.28s;
}

.segment:nth-child(6) {
    animation-delay: 0.35s;
}

.segment:nth-child(7) {
    animation-delay: 0.42s;
}

.segment:nth-child(8) {
    animation-delay: 0.49s;
}

.segment:nth-child(9) {
    animation-delay: 0.56s;
}

.segment:nth-child(10) {
    animation-delay: 0.7s;
}

/* Only animate filled segments */
.segment:not(.filled) {
    animation: none;
    opacity: 1;
    transform: scale(1);
}

.attribute-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.attribute-icon {
    flex: 0 0 45px; /* Set a fixed width for icons */
    display: flex;
    justify-content: center;
    align-items: center;
}

.attribute-info {
    display: flex;
    flex-direction: column;
    width: 20%;
    text-indent: 10px;
}

.attribute-rating {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.attribute-rating-header {
    display: flex;
    justify-content: space-between; /* Pushes text to the left and rating to the right */
    align-items: center; /* Vertically center both the text and the rating */
    width: 100%; /* Ensures that the container spans the entire available width */
}

.attribute-rating-header .ratingVal {
    font-size: 1.2em !important;
}

.triangle-marker {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 10px;
    margin: 0 2px;
    overflow: visible;
}

.triangle-marker polygon {
    stroke: #3a3e45; /* Border color */
    stroke-width: 1px;
}

.ratingStar svg {
    margin: 0px -2.5px;
    max-width: 24px;
    opacity: 0;
    transform: scale(0.5);
    animation: popUp 0.3s ease-out forwards;
}

@keyframes popUp {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Delay for each star */
.ratingStar svg:nth-child(1) {
    animation-delay: 0s;
}

.ratingStar svg:nth-child(2) {
    animation-delay: 0.1s;
}

.ratingStar svg:nth-child(3) {
    animation-delay: 0.2s;
}

.ratingStar svg:nth-child(4) {
    animation-delay: 0.3s;
}

.ratingStar svg:nth-child(5) {
    animation-delay: 0.4s;
}

.ratingStar svg:nth-child(6) {
    animation-delay: 0.5s;
}

.ratingStar.in {
    color: #e5ac00;
}

.ratingStar.out {
    color: #e54100;
}

.rbar, .rbar-c {
    position: relative;
    background: #8a9399 url(https://static.igpmanager.com/igp/design/image/bg-rbar.gif);
    width: 130px;
    height: 16px;
}

.rbar-c {
    margin: auto;
}

.rbar span, .rbar-c span {
    float: right;
    width: 25px;
    text-align: center;
    color: #fff;
    line-height: 16px;
    font-size: 0.6875em;
    text-shadow: -1px 0 #5c6266, 0 0, 0 0, 0 -1px #5c6266;
}

.rbar-cont {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 14px;
    width: 100px;
}

.rbar-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 14px;
    border-right: 1px solid #669933;
}

.rbar-bar-xp {
    position: absolute;
    top: 0;
    left: 0;
    background: #99CC33;
    height: 10px;
    border-right: 1px solid #669933;
    border-bottom: 1px solid #669933;
}

.rbar-xp {
    position: absolute;
    top: 11px;
    left: 0;
    background: #66CCFF;
    height: 3px;
}

.ratingCircle {
    position: relative;
    width: 100%;
    padding-top: 100%;
    height: 0;
}

.ratingCircle-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ratingCircle-bg {
    fill: rgba(0, 0, 0, 0.3);
}

.ratingCircle-track,
.ratingCircle-progress {
    fill: none;
    stroke-width: 15;
}

.ratingCircle-track {
    stroke: #323947;
}

.ratingCircle-progress {
    stroke-dasharray: var(--circumference);
    stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress)));
    stroke-linecap: round;
    animation: ratingCircleProgress 1s ease-out;
    transition: stroke-dashoffset 1s ease-out;
}

@keyframes ratingCircleProgress {
    from {
        stroke-dashoffset: var(--circumference);
    }
    to {
        stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress)));
    }
}

.ratingCircle-content,
.ratingCircle-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
}

.gelatine {
    animation: gelatine 0.5s infinite;
}

@keyframes gelatine {
    from, to {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}

.flash {
    animation: flash 500ms ease infinite alternate;
}

@keyframes flash {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.flagwave {
    animation: flagwave 3s ease infinite;
    transform-origin: bottom center;
}

@keyframes flagwave {
    30%, 50%, 70% {
        transform: rotate(-20deg) scale(1);
    }
    40% {
        transform: rotate(20deg);
    }
    60% {
        transform: rotate(20deg);
    }
    80% {
        transform: rotate(0deg);
    }
}

.hithere {
    animation: hithere 1s ease infinite;
}

@keyframes hithere {
    30% {
        transform: scale(1.2);
    }
    40%, 60% {
        transform: rotate(-20deg) scale(1.2);
    }
    50% {
        transform: rotate(20deg) scale(1.2);
    }
    70% {
        transform: rotate(0deg) scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.glowPulse {
    position: relative;
}

.glowPulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%); /* Center the element */
    border-radius: inherit;
    box-shadow: 0 0 15px rgba(var(--pulse-color, 255, 255, 255), .7);
    animation: glowPulse 1.5s infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes glowPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

.pulse {
    position: relative;
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(var(--pulse-color, 255, 255, 255), 0.5);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 50px rgba(var(--pulse-color, 255, 255, 255), 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(var(--pulse-color, 255, 255, 255), 0);
    }
}

.bounce {
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    70% {
        transform: translateY(0%);
    }
    80% {
        transform: translateY(-15%);
    }
    90% {
        transform: translateY(0%);
    }
    95% {
        transform: translateY(-7%);
    }
    97% {
        transform: translateY(0%);
    }
    99% {
        transform: translateY(-3%);
    }
    100% {
        transform: translateY(0);
    }
}

.bounce2 {
    animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.raceDayOff, .raceDayOn {
    background: #bbb;
    color: #666;
    padding: 1px 3px;
    font-size: 0.75em;
    margin-right: 1px;
}

.raceDayOn {
    background: #689954;
    color: #d8f7cb;
}

input[type="checkbox"], input[type="radio"] {
    display: none;
}

input[type="checkbox"] + label, input[type="radio"] + label, div.squareBtn {
    display: inline-block;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
    font-family: "RobotoCondensedBold";
    line-height: 32px;
}

input[type="checkbox"] + label > span, input[type="radio"] + label > span {
    /* iOS checkbox fix */
    pointer-events: none;
}

input[type="checkbox"] + label > span, input[type="radio"] + label > span, div.squareBtn {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    background-color: #bdc3c7; /* Light gray background for unchecked state */
    border-radius: 3px;
    position: relative;
    transition: background-color 0.3s ease;
    border: 0;
}

input[type="checkbox"] + label > span svg, input[type="radio"] + label > span svg, div.squareBtn svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #666; /* Darker color for unchecked state */
    width: 20px;
    height: 20px;
    transition: fill 0.3s ease;
}

input[type="checkbox"]:checked + label > span, input[type="radio"]:checked + label > span, div.squareBtn.green {
    background-color: #5a9e35;
}

input[type="checkbox"]:checked + label > span svg, input[type="radio"]:checked + label > span svg {
    fill: #d8f7cb; /* Lighter green for the checkmark */
}

/* Color variations */
input[type="checkbox"].red:checked + label > span, input[type="radio"].red:checked + label > span, div.squareBtn.red {
    background-color: #993333;
}

input[type="checkbox"].red:checked + label > span svg, input[type="radio"].red:checked + label > span svg, div.squareBtn.red svg {
    fill: #632222; /* Darker red for the checkmark */
}

input[type="checkbox"].green:checked + label > span, input[type="radio"].green:checked + label > span, div.squareBtn.green {
    background-color: #5a9e35;
}

input[type="checkbox"].green:checked + label > span svg, input[type="radio"].green:checked + label > span svg, div.squareBtn.green svg {
    fill: #d8f7cb; /* Lighter green for the checkmark */
}

input[type="color"] {
    padding: 0px !important;
    margin: 0;
    border: none;
}

.threeCol {
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

.threeCol > div {
    flex: 1 1 33.33%;
}

.twoCol {
    display: flex;
    justify-content: space-between;
    gap: 2%;
}

.twoCol > div {
    flex: 1 1 50%;
}

.twoColVertInvert {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.twoColVertInvert > div:first-child {
    width: 50%;
    order: 1;
}

.twoColVertInvert > div:last-child {
    width: 50%;
    order: 2;
}

.grid31to22 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

/* One full-width column on the second row */
.grid31to22 > :nth-child(4) {
    grid-column: 1 / -1;
}

.noselect {
    user-select: none;
}

label {
    vertical-align: top;
    user-select: none;
}

/* Base styles for inputs, selects, and textarea */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea,
.replyComment {
    font-family: "RobotoCondensedBold", sans-serif; /* Ensure font family is set */
    font-size: 1em;
    border: 1px solid transparent; /* Invisible border by default */
    border-radius: 12px;
    padding: 10px;
    color: #aab0bc;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 5px;
    box-sizing: border-box; /* Prevents border from changing element size */
    transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease; /* Smooth transition for changes */
    -webkit-appearance: none; /* Removes default Safari/Chrome styling */
    -moz-appearance: none; /* Removes default Firefox styling */
    appearance: none; /* Standard syntax */
    outline: none; /* Removes default browser outline */
}

/* Specific select styling */
select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23aab0bc' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Adjusted for better positioning */
    padding-right: 40px; /* Increased to make room for the arrow */
    background-color: rgba(255, 255, 255, 0.2);
}

/* Hover states for inputs, selects, and textarea */
input:not([type]):hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover,
.replyComment:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    /* No border on hover */
}

/* Focus states for inputs, selects, and textarea */
input:not([type]):focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.replyComment:focus {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    border: 1px solid #d9d9d9; /* Border added only on focus */
    outline: none; /* Removes default browser focus outline */
}

/* Additional focus styles specifically for select */
select:focus {
    background-color: rgba(255, 255, 255, 0.5); /* Slightly different background on focus */
}

/* Keep the arrow consistent on hover and focus */
select:hover,
select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23aab0bc' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Ensure it's the same as default */
}

/* Remove dropdown arrow in IE */
select::-ms-expand {
    display: none;
}

/* Remove focus ring in Firefox for select elements */
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #aab0bc;
}

/* Autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px inherit inset !important;
    -webkit-text-fill-color: inherit !important;
    background-color: inherit !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Submit button styles */
input[type="submit"],
input[type="submit"]:hover,
input[type="submit"]:active {
    font-family: "RobotoCondensedBold", sans-serif; /* Preserved font family */
    border: 0 !important;
    appearance: none;
    text-decoration: none;
    cursor: pointer;
    /* Add additional styles as needed */
}

/* Optional: Custom Dropdown List Styling */
/* Note: Styling native <option> elements is limited. For more advanced styling, consider a custom dropdown solution. */
select option {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
}

select:hover option {
    background-color: rgba(255, 255, 255, 1);
}

.toggleSwitch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
    left: -10px;
    top: 4px;
    float: right
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    background-color: #bbb;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: -1px;
    bottom: -1px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: rgb(119, 194, 187);
}

input:checked + .slider:before {
    transform: translateX(30px);
    background-color: rgb(0, 150, 136);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
    box-shadow: 0px 2px 10px #888;
}

.guiSelect {
    width: 100% !important;
    max-width: 100% !important;
}

.simpleSelect-wrapper {
    position: relative;
    width: 100%;
    color: #aab0bc;
    font-family: "Roboto Condensed", sans-serif;
}

.simpleSelect-selected {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: normal;
    font-size: 1em;
    font-family: "RobotoCondensedBold", sans-serif;
    margin: 5px;
    box-sizing: border-box;
}

.simpleSelect-selected:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    border-color: #d9d9d9;
}

.simpleSelect-dropdown {
    display: none;
    position: fixed; /* Fixed positioning for cross-browser consistency */
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    max-height: 360px;
    min-width: 100%;
    max-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    margin-top: 4px;

    /* Universal mobile scrolling improvements */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;

    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.simpleSelect-option {
    padding: 10px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s ease;
    text-align: left;
    white-space: nowrap;
    /* Better touch targets */
    min-height: 20px;
}

.simpleSelect-option:hover,
.simpleSelect-option.selected {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Icon handling for both img and svg */
.simpleSelect-selected img,
.simpleSelect-selected svg,
.simpleSelect-option img,
.simpleSelect-option svg {
    vertical-align: middle;
    margin-right: 8px;
    height: 16px;
    display: inline-block;
    position: relative;
    top: -2px;
}

/* Ensure SVG icons use correct color */
.simpleSelect-selected svg,
.simpleSelect-option svg {
    fill: currentColor;
}

/* Specific styling for color input select boxes */
.colorInput-selectBox-dropdown-menu .selectBox-options li.selectBox-selected a {
    border: 3px solid #689954;
}

.hiddenInput {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.dropdown, .clickdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    color: #ccc;
    background: #b4bbbf;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.8);
    width: 160px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    padding: 10px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content:before {
    /* triangle decoration */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e3e4e5;
    content: '';
    position: absolute;
    left: 30px;
    top: -10px;
    margin-left: -10px;
}

.igpmore {
    position: fixed;
    top: 90px;
    left: calc(50% - 655px);
    z-index: 105;
    width: 48px;
    height: 48px;
    line-height: 1.5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.igpmore-content {
    display: none;
    position: absolute;
    background-color: rgba(204, 204, 204, 0.8);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    z-index: 201;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    top: 40px;
    margin-top: -8px;
    transform-origin: top;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0;
    transform: scaleY(0);
}

.igpmore:hover .igpmore-content,
.igpmore-content:hover {
    display: block;
    opacity: 1;
    transform: scaleY(1);
}

.igpmore-left .igpmore-content {
    left: -4px;
}

.igpmore-right .igpmore-content {
    right: -4px;
}

/* Tablet positioning */
@media screen and (min-width: 480px) and (max-width: 1310px) {
    .igpmore {
        top: 8px;
        left: 8px;
        width: 64px;
        height: 64px;
        z-index: 200;
    }

    .igpmore-content {
        position: fixed;
        top: 88px;
        left: 0;
        border-radius: 0 0 16px 16px;
        z-index: 201;
    }
}

/* Mobile*/
@media screen and (max-width: 480px) {
    .igpmore {
        top: 7px;
        left: 7px;
        width: 36px;
        height: 36px;
        z-index: 200;
    }

    .igpmore-content {
        position: fixed;
        top: 50px;
        left: 0;
        border-radius: 0 0 16px 16px;
        z-index: 201;
    }
}

.mScroll {
    max-height: 500px;
    overflow-y: scroll;
}

.pager-wrap a {
    border: none;
    position: relative;
}

a.pager {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px 16px;
}

a.pager:hover, a.pager:active {
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

a.pager-selected, a.pager-selected:visited, a.pager-selected:active {
    background: none repeat scroll 0 0 #ddd;
    border-color: #ccc;
    color: #000000;
    cursor: default;
    font-weight: bold;
}

a.pager-selected:hover {
    -moz-box-shadow: 0 0 0;
    background: none repeat scroll 0 0 #ddd;
    border-color: #ccc;
    color: #000;
}

a.pager-prev, a.pager-next {
    margin: 0 5px;
}

.pager-wrap {
    text-align: center;
    line-height: 50px;
}

tr.pit td.key {
    word-wrap: break-word;
    background-color: #333;
    color: #f7f7f7;
}

tr.rPoint td {
    border-bottom: 2px solid #993333;
}

tr.pPoint td {
    border-bottom: 2px solid #689954;
}

table.fixHead {
    table-layout: fixed;
    margin: auto;
}

.fixHead thead, .fixHead tfoot {
    display: table;
    width: 100%;
}

.fixHead tbody {
    overflow: auto;
    overflow-x: hidden;
    display: block;
    width: 100%;
}

.fixHead tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#hofTable td {
    line-height: 1.75;
}

.posCol {
    width: 45px;
}

th.scoreCol, td.scoreCol {
    width: 25%;
}

td.scoreCol {
    text-align: center;
    font-family: "RobotoCondensedBold";
    font-size: 1.25em !important;
}

.statWrap, .tabs, .tabs2, .ltr, .text-center, #header {
    direction: ltr;
    unicode-bidi: bidi-override;
}

.igpInlineRow {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.statWrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 0.9em;
    margin: 0px 0px 10px 0px;
}

.statWrap div {
    background: rgba(0, 0, 0, 0.2);
    width: 16%;
    margin: 0 0.3%;
    margin-bottom: 10px;
    border-radius: 4px;
}

.statWrap div span {
    font-size: 1.5em !important;
    font-family: "RobotoCondensedBold";
}

.mail {
    margin-bottom: 10px;
}

.mailPic {
    width: 100px;
    max-width: 25%;
    margin-right: 8px;
    float: left;
    max-height: 150px;
}

.mailPic2 {
    width: 50px;
    max-width: 25%;
    float: left;
}

.mailPic img {
    width: 100%;
}

.mailPic.bgSupplyLogo svg {
    width: 70% !important;
    margin: 15%;
}

.mailWrap {
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: auto;
    padding: 5px;
}

.mailHead, .mailContent, .mailSender, .com-wrap, .selectable {
    user-select: text;
    cursor: auto;
}

.byMe {
    background: rgba(0, 0, 0, 0.2);
    width: 84% !important;
    position: relative;
    left: 15%;
}

.mailTitle {
    width: 100%;
    color: #477337;
}

.mailSender {
    margin: 10px 0px;
    color: #b3b3b3;
    font-size: 0.8em;
    width: 100%;
}

.mail div {
    vertical-align: top;
}

.mailHead {
    color: #444;
    margin-bottom: 5px;
}

.mailContent {
    font-size: 0.9em;
}

.text-select {
    user-select: text;
    cursor: auto;
}

#notes .note {
    background: rgba(32, 45, 71);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

#splash {
    position: relative;
    background: #41444d;
}

#splashRace, #splashPrep, #splashWeather {
    position: absolute;
    background: rgba(65, 68, 77, 0.75);
    color: #f2f2f2;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

#splashPrep a {
    vertical-align: middle;
}

#splashRace {
    top: 0px;
    z-index: 3;
}

#splashPrep {
    bottom: 0px;
    overflow: hidden;
    z-index: 2;
}

#splashPrep a {
    margin-right: 0 !important;
}

#splashLobbyParticipants {
    position: absolute;
    color: #f2f2f2;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    bottom: 110px;
    top: 0px;
}

#splashLobbyParticipants a, #splashLobbyParticipants a:visited, #splashLobbyParticipants a:hover, #splashLobbyParticipants a:active {
    text-decoration: none;
    border: none;
}

#splashWeather {
    background: rgba(65, 68, 77, 0.6);
    color: #ddd;
    padding: 4px 8px;
    height: 34px;
    top: 45px;
    left: 5px;
    width: auto;
    z-index: 2;
}

#raceObjective {
    border-bottom: 1px solid #777;
    text-align: center;
    padding: 0;
    padding-bottom: 5px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#lobbyChatContainer .managerName {
    margin-right: 5px;
}

#chatInput {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    margin: 0px 0px 10px 0px;
    padding-right: 70px;
}

#lobbyChat {
    position: absolute;
    top: -2px;
    right: 0;
}

#lobbyHostCrown {
    color: #e5ac00 !important;
    position: absolute;
    bottom: 2px;
    left: -2px;
    background: #000;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}

.textOutlineDark {
    text-shadow: -1px -1px 0 #666,
    1px -1px 0 #666,
    -1px 1px 0 #666,
    1px 1px 0 #666;
}

.news {
    margin-bottom: 10px;
    background: linear-gradient(180deg, rgb(28, 52, 86) 0%, rgb(22, 44, 78) 100%);
    width: auto;
    padding: 10px 10px 5px;
    border-radius: 6px;
    content-visibility: auto;
    font-size: 0.85em !important;
}

.news h2 {
    padding: 0;
}

.news .newsimg {
    float: left;
    object-fit: cover;
    width: 60px;
    height: 60px;
    margin-right: 15px;
    text-align: center;
    border-radius: 50%;
}

.news .newsimg svg, .news .newsimg img {
    float: left;
    object-fit: cover;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.news span.date {
    font-size: 0.9em;
    color: #bbb !important;
}

.newsFooter {
    padding: 3px 15px 3px 70px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
}

.news .newsFooter div {
    font-family: "RobotoCondensedBold";
    box-sizing: border-box;
    display: inline-block;
    margin: 0 2px;
    vertical-align: middle;
    cursor: pointer;
}

.news .newsFooter a {
    border: none;
}

.newsLike {
    cursor: pointer;
}

.news a, .news a:hover, .news a:active, .news a:visited {
    border-bottom: 1px dashed #f2f2f2;
}

.igpNewsActions {
    transition: transform 0.5s;
}

.igpNewsActions:hover {
    transform: scale(1.3);
}

.newsVotingExpand {
    padding: 0 !important;
}

.nrr span {
    display: inline-block;
    width: 20px;
}

#friends img.pic-t, #friends img.pic-s, #friends img.pic-m {
    max-width: 25%;
    border-right: 5px solid #d5d5d5;
    padding-right: 3px;
    margin-right: 5px;
    float: left;
    border-radius: 5px 0px 0px 5px;
}

.fReq {
    background: rgba(62, 110, 60, 0.5) !important;
}

#friends > div, .fReq {
    margin-top: 5px;
    padding: 5px;
    overflow: auto;
    content-visibility: auto;
    cursor: pointer;
    border-radius: 8px;
}

#friends > div {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
}

#friends .fRep {
    float: right;
    background: rgba(0, 0, 0, 0.2);
    width: 80px;
    line-height: 50px;
    text-align: center;
    border-radius: 0px 8px 8px 0px;
}

#friends .fRep svg {
    color: #bfbfbf;
}

#friends .fShortcuts {
    float: right;
    height: 100%;
}

#friends .online {
    color: #7ab023;
}

#friends .away {
    color: #e5ac5c;
}

#friends .offline {
    color: #e5e5e5;
}

#friends .fName {
    display: inline-block;
    vertical-align: top;
    max-width: 45%;
}

.lobbyMgrPic {
    animation: zoomIn 250ms 1 linear;
}

/* Item fly animations (moved from app/page/shop.html for global use) */
.item-flying {
    position: fixed;
    width: 20px;
    height: 20px;
    z-index: 100000;
    pointer-events: none;
    will-change: transform, opacity;
}

.item-flying-anim {
    width: 20px;
    height: 20px;
    transform-origin: 50% 50%;
}

.item-flying-img {
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
}

.items-shake { animation: itemsShake 300ms ease-in-out; }
.items-impact { animation: itemsImpact 320ms ease-out; box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
.items-impact.items-shake { animation: itemsImpact 320ms ease-out, itemsShake 300ms ease-in-out; }

@keyframes itemsShake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

@keyframes itemsImpact {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50% { transform: scale(1.15); box-shadow: 0 0 26px rgba(255, 215, 0, 0.75); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
}

@keyframes itemsScalePulse { 0% { transform: scale(0.9); } 50% { transform: scale(2.0); } 100% { transform: scale(1.0); } }
@keyframes itemsFadeIn { 0% { opacity: 0.6; } 100% { opacity: 1; } }
@keyframes itemsFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

.item-burst-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 100001;
    pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(255, 240, 170, 1), rgba(255, 200, 0, 0.9) 60%, rgba(255, 200, 0, 0.0) 70%);
    opacity: 0.9;
    transform: translate3d(0,0,0) scale(0.8);
    will-change: transform, opacity;
}

.item-ripple {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.7);
    pointer-events: none;
    z-index: 100000;
    opacity: 0.7;
    transform: translate3d(-50%, -50%, 0) scale(1);
    will-change: transform, opacity;
}

@keyframes itemsNumberBounce { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-2px) scale(1.25); } 100% { transform: translateY(0) scale(1); } }

/* Fly controls styling (inputs on shop page) */
.fly-controls { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; position: relative; z-index: 5; }
.fly-input { width: 150px; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.9); color: #111; font-size: 14px; }
.fly-input-wide { width: 180px; }

.lobbyMgrPic[data-managerReady="0"] {
    border-color: #000000;
}

.lobbyMgrPic[data-managerReady="1"] {
    border-color: #cc9933;
}

.lobbyMgrPic[data-managerReady="2"] {
    border-color: #669900;
}

.lobbyMgrPic {
    border: 3px solid #333;
}

#lobbyParticipants {
    text-align: left !important;
}

.statusSpan {
    display: inline-block;
}

.alternatives {
    text-align: center;
}

@keyframes itemsScalePulse {
	0% { transform: scale(0.9); }
	50% { transform: scale(2.0); }
	100% { transform: scale(1.0); }
}

@keyframes itemsFadeIn {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

@keyframes itemsFadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

.item-burst-dot {
	position: fixed;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	z-index: 100001;
	pointer-events: none;
	background: radial-gradient(circle at 30% 30%, rgba(255, 240, 170, 1), rgba(255, 200, 0, 0.9) 60%, rgba(255, 200, 0, 0.0) 70%);
	opacity: 0.9;
	transform: translate3d(0,0,0) scale(0.8);
	will-change: transform, opacity;
}

.item-ripple {
	position: fixed;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(255, 215, 0, 0.7);
	pointer-events: none;
	z-index: 100000;
	opacity: 0.7;
	transform: translate3d(-50%, -50%, 0) scale(1);
	will-change: transform, opacity;
}

@keyframes itemsNumberBounce {
	0% { transform: translateY(0) scale(1); }
	35% { transform: translateY(-2px) scale(1.25); }
	100% { transform: translateY(0) scale(1); }
}

/* Optional controls styling retained for shop page */
.fly-controls {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	z-index: 5;
}

.fly-input {
	width: 150px;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.9);
	color: #111;
	font-size: 14px;
}

.fly-input-wide {
	width: 180px;
}

.itemWrap {
    text-align: center;
}

.itemWrapBgGold > div, .bgGradientGold {
    background: #8c897e !important; /* fallback for old browsers */
    background: radial-gradient(#e5e3da, #b3b1a8) !important;
}

.itemWrapBgGrey > div, .bgGradientGrey {
    background: #7e8c8c !important;
    background: radial-gradient(#dfe5e5, #adb3b3) !important;
}

.itemWrapBgBlue > div, .bgGradientBlue {
    background: #77828c !important;
    background: radial-gradient(#b8cfe5, #8fa1b3) !important;
}

.itemWrap > div {
    position: relative;
    display: inline-block;
    width: 31%;
    margin: 0 0.6% 20px 0.6%;
    padding: 0;
    position: relative;
    border-radius: 6px;
    box-sizing: border-box;
}

.itemWrap div span {
    font-size: 1.125em;
    font-family: "RobotoCondensedBold";
    color: #f0f0f0;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 6px;
    border-radius: 6px 0px 6px 0px;
}

.itemWrap .btn {
    width: 100%;
    margin-bottom: 0px;
    border-radius: 0px 0px 6px 6px;
}

.itemWrap a, .itemWrap a:visited, .itemWrap a:active, .itemWrap a:hover {
    text-decoration: none;
    border: 0;
}

.itemWrap .bgPic {
    max-width: 100px;
    margin: auto;
}

.coverArea {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.shopSpecial {
    background-image: linear-gradient(to bottom right, #7b4397, #dc2430);
    width: 100%;
    border-radius: 8px;
    aspect-ratio: 4/3;
}

#shortHandStandings td:nth-child(3) {
    width: 100px !important;
}

#shortHandStandings td:first-child, #shortHandStandings td:last-child {
    width: 40px !important;
}

/* Existing Tile Styles */
.tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 400px auto; /* Taller first row, shorter second row */
    gap: 2%;
    margin-bottom: 20px;
}

#tiles-home {
    grid-template-rows: 600px auto; /* Taller first row, shorter second row */
}

.tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 100%;
    border-radius: 8px;
    transition: transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.overflow {
    overflow: visible !important;
}

.tile-img {
    position: relative;
    overflow: hidden; /* This container clips the scaling background */
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.tile-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit; /* inherit from inline style or re-apply here */
    background-size: cover;
    background-position: center;
    transition: transform 150ms ease-out;
    z-index: 0;
    pointer-events: none;
}

/* On hover of the tile, scale the background inside tile-img */
.tile:hover .tile-img::after {
    transform: scale(1.1);
}

.tile:hover {
    transition: transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5)
}

/* Handle both linkParent and direct anchor links */
.tile .linkParent,
.tile-link,
.tile .shopSpecial a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Make the shopSpecial container relative to contain its contents */
.tile .shopSpecial, .tile .shopDailyOffer {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Keep content above background but below link */
.tile .special-header,
.tile-title,
.notification-badge {
    position: relative;
    z-index: 1;
    font-size: inherit;
}

.tile .special-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: right;
}

/* Add specific styling for the discount badge */
.tile .shinyOrange {
    position: absolute;
    bottom: 40px !important;
    right: 4px;
    z-index: 2; /* Higher than footer but still below link */
}

/* Background zoom effect */
.tile::after, .tile .shopSpecial::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-image: inherit;
    transition: transform 150ms ease-out;
    z-index: 0;
    pointer-events: none;
}

.tile:not(.disabled):hover::after, .tile .shopSpecial:not(.disabled):hover::after {
    transform: scale(1.1);
}

.tile:not(.disabled):active, .tile .shopSpecial:not(.disabled):active {
    transition: transform 34ms;
    transform: scale(0.95);
}

/* Gradient overlay */
.tileGradient::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
    border-radius: 8px;
}

/* Title */
.tile-title {
    position: absolute;
    bottom: 5%;
    left: 5%;
    color: #fff;
    z-index: 2;
}

.tile7030 {
    display: grid;
    grid-template-rows: 70% 30%; /* Larger top tile, smaller bottom tile */
    gap: 10px;
}

.tile3070 {
    display: grid;
    grid-template-rows: 30% 70%; /* Larger top tile, smaller bottom tile */
    gap: 10px;
}

.tile5050 {
    display: grid;
    grid-template-rows: 50% 50%; /* Equal sized tiles */
    gap: 10px;
}

.notification-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff4444;
    --pulse-color: 255, 68, 68;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 2;
    overflow: visible;
}

.tile .shopSpecial {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.tile .iapWrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.button-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.tile-button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    height: 150px;
    border-radius: 8px;
    transition: transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
    /* Make it behave like a button in a flex container */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Background image handling */
    background-size: cover;
    background-position: center;
}

.tile-button:hover {
    transition: transform 300ms cubic-bezier(0.3, 0.7, 0.4, 1.5)
}

.tile-button:hover::after {
    transform: scale(1.1);
}

.tile-button:active {
    transition: transform 34ms;
    transform: scale(0.95);
}

.tile-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit; /* Inherit from parent */
    transition: transform 150ms ease-out;
    z-index: 0;
    pointer-events: none;
}

.tile-button a {
    text-decoration: none;
}

/* Style for tile-title inside tile-button */
.tile-button .tile-title {
    position: absolute;
    bottom: 5%;
    left: 5%;
    color: #fff;
    z-index: 2;
    background-color: transparent; /* Remove the background */
    transform: none;
    font-size: inherit; /* Inherit font size from parent */
    padding: 0; /* Remove any padding */
}

.tile-button.tileGradient::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
}

.tile-button-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Apply button-container styles to .tile-grid when it has tile-buttons */
.tile-grid:has(> .tile-button) {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

/* Apply tile-button styles to .tile when it's inside .tile-grid:has(> .tile-button) */
.tile-grid:has(> .tile-button) > .tile {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glowing Border Animation */
/* Glowing Border Animation */
.glow-border {
    position: relative;
    z-index: 1;
    border-radius: 8px;
}

.glow-border-glow,
.glow-border-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    z-index: 8;
    pointer-events: none;
    clip-path: polygon(
            0 0, /* Outer top-left */ 100% 0, /* Outer top-right */ 100% 100%, /* Outer bottom-right */ 0 100%, /* Outer bottom-left */ 0 0, /* Return to start to create hole */ 3px 0, /* Inner top-left */ 3px 100%, /* Inner bottom-left */ calc(100% - 3px) 100%, /* Inner bottom-right */ calc(100% - 3px) 0, /* Inner top-right */ 3px 0 /* Close the inner shape */
    );
}

.glow-border-glow {
    filter: blur(20px);
    opacity: 0.7;
}

.glow-border-inner::before,
.glow-border-glow::before {
    content: '';
    position: absolute;
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    width: 99999px;
    height: 99999px;
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: rotateBorder 4s linear infinite;
}

/* Color variants with transparent base */
.glow-border-blue .glow-border-inner::before,
.glow-border-blue .glow-border-glow::before {
    background-image: conic-gradient(
            transparent,
            rgb(25, 118, 237) 45deg,
            transparent 90deg
    );
}

.glow-border-green .glow-border-inner::before,
.glow-border-green .glow-border-glow::before {
    background-image: conic-gradient(
            transparent,
            rgb(90, 158, 53) 45deg,
            transparent 90deg
    );
}

.glow-border-red .glow-border-inner::before,
.glow-border-red .glow-border-glow::before {
    background-image: conic-gradient(
            transparent,
            rgb(214, 110, 103) 45deg,
            transparent 90deg
    );
}

.glow-border-white .glow-border-inner::before,
.glow-border-white .glow-border-glow::before {
    background-image: conic-gradient(
            transparent,
            rgba(255, 255, 255, 0.6) 60deg,
            transparent 62deg
    );
}

@keyframes rotateBorder {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}

/* Pause state */
.glow-border.paused .glow-border-inner::before,
.glow-border.paused .glow-border-glow::before {
    animation-play-state: paused;
}

.pulse2 {
    animation: scale 1.5s ease-in-out infinite;
}

@keyframes scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.chest-container,
.particles,
.glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.chest-container {
    display: flex;
    justify-content: center;
    align-items: start;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.chest {
    position: relative;
    z-index: 2;
    width: 70%;
    height: 70%;
    max-width: 250px;
    /* Remove auto margins to avoid shifting */
}

.chest.animated {
    animation: levitate 2s ease-in-out infinite;
}

.chest img {
    width: 100%;
    height: auto;
}

.glow-effect {
    background: radial-gradient(circle, rgb(241, 212, 255) 0%, rgba(208, 241, 255, 0) 70%);
    animation: glow 2s ease-in-out infinite;
    z-index: 1;
    /* Avoid extra repaints */
    pointer-events: none;
}

.particles {
    z-index: 3;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    /* Initially hide particles until animation starts */
    opacity: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* Smaller particles for mobile; remove any unused filters */
@media (max-width: 768px) {
    .particle {
        width: 3px;
        height: 3px;
    }
}

/* Use hardware accelerated transforms */
@keyframes levitate {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@keyframes glow {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes particleFloat {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--x-offset), -50px, 0);
        opacity: 0;
    }
}

.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Hardware acceleration trigger */
    will-change: transform;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 3px;
    opacity: 0; /* Start invisible */
    animation: confettiFall linear infinite both;
    /* Let GPU accelerate opacity and transform */
    will-change: transform, opacity;
}

/* Randomize colors */
.confetti:nth-child(3n) {
    background-color: #d13447;
}

.confetti:nth-child(3n+1) {
    background-color: #ffbf00;
}

.confetti:nth-child(3n+2) {
    background-color: #263672;
}

/* Use translate3d for smoother GPU animations */
@keyframes confettiFall {
    0% {
        top: -10%;
        opacity: 0; /* Hidden */
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    5% {
        opacity: 1; /* Fade in quickly after start */
    }
    100% {
        top: 110%;
        transform: translate3d(0, 0, 0) rotate(720deg);
        opacity: 1;
    }
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent
    );
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

.shopDailyOffer {
    display: inline-block;
    position: relative;
    height: 200px;
    vertical-align: top;
    background: #ccc;
    width: 31.33%;
    margin: 0% 1% 8px 1%;
    background-image: linear-gradient(to bottom right, #2b5876, #4e4376);
    border-radius: 6px;
}

.textShadow3 {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7);
}

.special-header {
    text-align: center;
    font-size: 1.5em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    border-radius: 8px 8px 0px 0px;
    font-family: 'RobotoCondensedBold';
    border-bottom: rgba(0, 0, 0, 0.5) 1px solid;
    padding: 5px;
}

.special-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 5px;
    border-radius: 0px 0px 8px 8px;
    backdrop-filter: blur(10px);
    border-top: rgba(0, 0, 0, 0.5) 1px solid;
    color: #f2f2f2;
}

.special-description {
    text-align: center;
    z-index: 1;
}

.shopItemHead {
    text-align: center;
    padding: 10px 5px;
    border-radius: 6px 6px 0px 0px;
    background: rgba(0, 0, 0, 0.4);
    color: #f2f2f2;
    font-family: 'RobotoCondensedBold';
}

.shopItemFoot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 5px;
    border-radius: 0px 0px 6px 6px;
    color: #f2f2f2;
}

#splash-get {
    margin-top: 10px;
}

#splash-get img {
    max-width: 48%;
    margin: 0 1%;
}

.dOpt {
    display: none;
}

/*  Animations  */
.shiny1Dark {
    background: linear-gradient(
            -30deg,
            #4285a6 30%,
            #52ccc5,
            #52ccc5,
            #4285a6 70%
    );
    color: #f2f2f2;
}

.shiny1Light {
    background: linear-gradient(
            -30deg,
            #5c8699 30%,
            #59b3ae,
            #59b3ae,
            #5c8699 70%
    );
    color: #f2f2f2;
}

.shinySpecial {
    background: linear-gradient(
            -30deg,
            #4d5466 30%,
            #6e5579,
            #897694,
            #4d5466 70%
    );
    color: #f2f2f2;
}

.shinyOrange {
    background: linear-gradient(
            -30deg,
            #d9a941 30%,
            #f7c863,
            #f1d28f,
            #d9a941 70%
    );
    color: #222;
}

.shinyEvent {
    background: linear-gradient(
            -30deg,
            #5c869900 40%,
            #59b3ae44,
            #59b3ae88,
            #59b3ae44,
            #5c869900 60%
    );
    color: #f2f2f2;
}

.slideIn {
    visibility: visible;
    transform: translateX(0%) translateY(0%);
}

.slideOutLeft {
    transform: translateX(-100%) translateY(0%);
    backface-visibility: hidden;
}

.slideOutRight {
    transform: translateX(100%) translateY(0%);
    backface-visibility: hidden;
}

.slideOutY {
    transform: translateX(0%) translateY(-100%);
    backface-visibility: hidden;
}

.slideOutY2 {
    transform: translateX(0%) translateY(-1000px);
    backface-visibility: hidden;
}

.slideOutY3 {
    transform: translateX(0%) translateY(100%);
    backface-visibility: hidden;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0, 0);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes zoomIn2 {
    0% {
        transform: scale(1, 0);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes zoomIn3 {
    0% {
        transform: scale(0, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

#prompt {
    position: fixed;
    background: #689954;
    color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 103;
    padding: 0 5px 20px;
    text-align: center;
    transition: transform 0.6s;
    will-change: transform, opacity;
    border-top: 5px solid #568046;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

#promptContent {
    margin: auto;
    max-width: 400px;
}

/* Change colours for dialogs */
table.acp th, .mini-subhead {
    /*background: #f4f4f5;*/
}

/* Flags - The flag image must be exported as 768x52.
    Each flag is measured from 0x0 on the grid so "24px -80px" would be the 2nd column and 6th row down as columns are 24px wide and rows are 16px wide */
.flag {
    width: 23px;
    height: 15px;
    background: transparent url(https://static.igpmanager.com/igp/design/icon/flags12.png) left top/384px 256px no-repeat;
    vertical-align: middle;
    border-radius: 4px;
}

.f-ad {
    background-position: -24.5px 0
}

.f-ae {
    background-position: -48.5px 0
}

.f-af {
    background-position: -72.5px 0
}

.f-ag {
    background-position: -96.5px 0
}

.f-ai {
    background-position: -120.5px 0
}

.f-al {
    background-position: -144.5px 0
}

.f-am {
    background-position: -168.5px 0
}

.f-an {
    background-position: -192.5px 0
}

.f-ao {
    background-position: -216.5px 0
}

.f-ar {
    background-position: -240.5px 0
}

.f-as {
    background-position: -264.5px 0
}

.f-at {
    background-position: -288.5px 0
}

.f-au {
    background-position: -312.5px 0
}

.f-aw {
    background-position: -336.5px 0
}

.f-az {
    background-position: -360.5px 0
}

.f-ba {
    background-position: 0 -16.5px
}

.f-bb {
    background-position: -24.5px -16.5px
}

.f-bd {
    background-position: -48.5px -16.5px
}

.f-be {
    background-position: -72.5px -16.5px
}

.f-bf {
    background-position: -96.5px -16.5px
}

.f-bg {
    background-position: -120.5px -16.5px
}

.f-bh {
    background-position: -144.5px -16.5px
}

.f-bi {
    background-position: -168.5px -16.5px
}

.f-bj {
    background-position: -192.5px -16.5px
}

.f-bm {
    background-position: -216.5px -16.5px
}

.f-bn {
    background-position: -240.5px -16.5px
}

.f-bo {
    background-position: -264.5px -16.5px
}

.f-br {
    background-position: -288.5px -16.5px
}

.f-bs {
    background-position: -312.5px -16.5px
}

.f-bt {
    background-position: -336.5px -16.5px
}

.f-bw {
    background-position: 0 -32.5px
}

.f-by {
    background-position: -24.5px -32.5px
}

.f-bz {
    background-position: -48.5px -32.5px
}

.f-ca {
    background-position: -72.5px -32.5px
}

.f-catalonia {
    background-position: -96.5px -32.5px
}

.f-cd {
    background-position: -120.5px -32.5px
}

.f-cf {
    background-position: -144.5px -32.5px
}

.f-cg {
    background-position: -168.5px -32.5px
}

.f-ch {
    background-position: -192px -32.5px;
    width: 16px;
    margin: 0px 3.5px;
}

.f-ci {
    background-position: -216.5px -32.5px
}

.f-ck {
    background-position: -240.5px -32.5px
}

.f-cl {
    background-position: -264.5px -32.5px
}

.f-cm {
    background-position: -288.5px -32.5px
}

.f-cn {
    background-position: -312.5px -32.5px
}

.f-zh {
    background-position: -312.5px -32.5px
}

.f-co {
    background-position: -336.5px -32.5px
}

.f-cr {
    background-position: -360.5px -32.5px
}

.f-cu {
    background-position: 0 -48.5px
}

.f-cv {
    background-position: -24.5px -48.5px
}

.f-cw {
    background-position: -48.5px -48.5px
}

.f-cy {
    background-position: -72.5px -48.5px
}

.f-cz {
    background-position: -96.5px -48.5px
}

.f-de {
    background-position: -120.5px -48.5px
}

.f-dj {
    background-position: -144.5px -48.5px
}

.f-dk {
    background-position: -168.5px -48.5px
}

.f-dm {
    background-position: -192.5px -48.5px
}

.f-do {
    background-position: -216.5px -48.5px
}

.f-dz {
    background-position: -240.5px -48.5px
}

.f-ec {
    background-position: -264.5px -48.5px
}

.f-ee {
    background-position: -288.5px -48.5px
}

.f-eg {
    background-position: -312.5px -48.5px
}

.f-eh {
    background-position: -336.5px -48.5px
}

.f-england {
    background-position: -360.5px -48.5px
}

.f-er {
    background-position: 0 -64.5px
}

.f-es {
    background-position: -24.5px -64.5px
}

.f-et {
    background-position: -48.5px -64.5px
}

.f-eu {
    background-position: -72.5px -64.5px
}

.f-fi {
    background-position: -96.5px -64.5px
}

.f-fj {
    background-position: -120.5px -64.5px
}

.f-fk {
    background-position: -144.5px -64.5px
}

.f-fm {
    background-position: -168.5px -64.5px
}

.f-fo {
    background-position: -192.5px -64.5px
}

.f-fr, .f-mf, .f-bl {
    background-position: -216.5px -64.5px
}

.f-ga {
    background-position: -240.5px -64.5px
}

.f-gb {
    background-position: -264.5px -64.5px
}

.f-gd {
    background-position: -288.5px -64.5px
}

.f-ge {
    background-position: -312.5px -64.5px
}

.f-gf {
    background-position: -336.5px -64.5px
}

.f-gg {
    background-position: -360.5px -64.5px
}

.f-gh {
    background-position: 0 -80.5px
}

.f-gi {
    background-position: -24.5px -80.5px
}

.f-gl {
    background-position: -48.5px -80.5px
}

.f-gm {
    background-position: -72.5px -80.5px
}

.f-gn {
    background-position: -96.5px -80.5px
}

.f-gp {
    background-position: -120.5px -80.5px
}

.f-gq {
    background-position: -144.5px -80.5px
}

.f-gr {
    background-position: -168.5px -80.5px
}

.f-gs {
    background-position: -192.5px -80.5px
}

.f-gt {
    background-position: -216.5px -80.5px
}

.f-gu {
    background-position: -240.5px -80.5px
}

.f-gw {
    background-position: -264.5px -80.5px
}

.f-gy {
    background-position: -288.5px -80.5px
}

.f-hk {
    background-position: -312.5px -80.5px
}

.f-hm {
    background-position: -336.5px -80.5px
}

.f-hn {
    background-position: -360.5px -80.5px
}

.f-hr {
    background-position: 0 -96.5px
}

.f-ht {
    background-position: -24.5px -96.5px
}

.f-hu {
    background-position: -48.5px -96.5px
}

.f-ic {
    background-position: -72.5px -96.5px
}

.f-id {
    background-position: -96.5px -96.5px
}

.f-ie {
    background-position: -120.5px -96.5px
}

.f-il {
    background-position: -144.5px -96.5px
}

.f-im {
    background-position: -168.5px -96.5px
}

.f-in {
    background-position: -192.5px -96.5px
}

.f-io {
    background-position: -216.5px -96.5px
}

.f-iq {
    background-position: -240.5px -96.5px
}

.f-ir {
    background-position: -264.5px -96.5px
}

.f-is {
    background-position: -288.5px -96.5px
}

.f-it {
    background-position: -312.5px -96.5px
}

.f-je {
    background-position: -336.5px -96.5px
}

.f-jm {
    background-position: -360.5px -96.5px
}

.f-jo {
    background-position: 0 -112.5px
}

.f-jp {
    background-position: -24.5px -112.5px
}

.f-ke {
    background-position: -48.5px -112.5px
}

.f-kg {
    background-position: -72.5px -112.5px
}

.f-kh {
    background-position: -96.5px -112.5px
}

.f-ki {
    background-position: -120.5px -112.5px
}

.f-km {
    background-position: -144.5px -112.5px
}

.f-kn {
    background-position: -168.5px -112.5px
}

.f-kp {
    background-position: -192.5px -112.5px
}

.f-kr {
    background-position: -216.5px -112.5px
}

.f-kurdistan {
    background-position: -240.5px -112.5px
}

.f-kw {
    background-position: -264.5px -112.5px
}

.f-ky {
    background-position: -288.5px -112.5px
}

.f-kz {
    background-position: -312.5px -112.5px
}

.f-la {
    background-position: -336.5px -112.5px
}

.f-lb {
    background-position: -360.5px -112.5px
}

.f-lc {
    background-position: 0 -128.5px
}

.f-li {
    background-position: -24.5px -128.5px
}

.f-lk {
    background-position: -48.5px -128.5px
}

.f-lr {
    background-position: -72.5px -128.5px
}

.f-ls {
    background-position: -96.5px -128.5px
}

.f-lt {
    background-position: -120.5px -128.5px
}

.f-lu {
    background-position: -144.5px -128.5px
}

.f-lv {
    background-position: -168.5px -128.5px
}

.f-ly {
    background-position: -192.5px -128.5px
}

.f-ma {
    background-position: -216.5px -128.5px
}

.f-mc {
    background-position: -240.5px -128.5px
}

.f-md {
    background-position: -264.5px -128.5px
}

.f-me {
    background-position: -288.5px -128.5px
}

.f-mg {
    background-position: -312.5px -128.5px
}

.f-mh {
    background-position: -336.5px -128.5px
}

.f-mk {
    background-position: -360.5px -128.5px
}

.f-ml {
    background-position: 0 -144.5px
}

.f-mm {
    background-position: -24.5px -144.5px
}

.f-mn {
    background-position: -48.5px -144.5px
}

.f-mo {
    background-position: -72.5px -144.5px
}

.f-mp {
    background-position: -96.5px -144.5px
}

.f-mq {
    background-position: -120.5px -144.5px
}

.f-mr {
    background-position: -144.5px -144.5px
}

.f-ms {
    background-position: -168.5px -144.5px
}

.f-mt {
    background-position: -192.5px -144.5px
}

.f-mu {
    background-position: -216.5px -144.5px
}

.f-mv {
    background-position: -240.5px -144.5px
}

.f-mw {
    background-position: -264.5px -144.5px
}

.f-mx {
    background-position: -288.5px -144.5px
}

.f-my {
    background-position: -312.5px -144.5px
}

.f-mz {
    background-position: -336.5px -144.5px
}

.f-na {
    background-position: -360.5px -144.5px
}

.f-nc {
    background-position: 0 -160.5px
}

.f-ne {
    background-position: -24.5px -160.5px
}

.f-nf {
    background-position: -48.5px -160.5px
}

.f-ng {
    background-position: -72.5px -160.5px
}

.f-ni {
    background-position: -96.5px -160.5px
}

.f-nl {
    background-position: -120.5px -160.5px
}

.f-no, .f-sj, .f-bv {
    background-position: -144.5px -160.5px
}

.f-np {
    background-position: -168.5px -160.5px
}

.f-nr {
    background-position: -192.5px -160.5px
}

.f-nu {
    background-position: -216.5px -160.5px
}

.f-nz {
    background-position: -240.5px -160.5px
}

.f-om {
    background-position: -264.5px -160.5px
}

.f-pa {
    background-position: -288.5px -160.5px
}

.f-pe {
    background-position: -312.5px -160.5px
}

.f-pf {
    background-position: -336.5px -160.5px
}

.f-pg {
    background-position: -360.5px -160.5px
}

.f-ph {
    background-position: 0 -176.5px
}

.f-pk {
    background-position: -24.5px -176.5px
}

.f-pl {
    background-position: -48.5px -176.5px
}

.f-pm {
    background-position: -72.5px -176.5px
}

.f-pn {
    background-position: -96.5px -176.5px
}

.f-pr {
    background-position: -120.5px -176.5px
}

.f-ps {
    background-position: -144.5px -176.5px
}

.f-pt {
    background-position: -168.5px -176.5px
}

.f-pw {
    background-position: -192.5px -176.5px
}

.f-py {
    background-position: -216.5px -176.5px
}

.f-qa {
    background-position: -240.5px -176.5px
}

.f-re {
    background-position: -264.5px -176.5px
}

.f-ro {
    background-position: -288.5px -176.5px
}

.f-rs {
    background-position: -312.5px -176.5px
}

.f-ru {
    background-position: -336.5px -176.5px
}

.f-rw {
    background-position: -360.5px -176.5px
}

.f-sa {
    background-position: 0 -192.5px
}

.f-sb {
    background-position: -24.5px -192.5px
}

.f-sc {
    background-position: -48.5px -192.5px
}

.f-scotland {
    background-position: -72.5px -192.5px
}

.f-sd {
    background-position: -96.5px -192.5px
}

.f-se {
    background-position: -120.5px -192.5px
}

.f-sg {
    background-position: -144.5px -192.5px
}

.f-sh {
    background-position: -168.5px -192.5px
}

.f-si {
    background-position: -192.5px -192.5px
}

.f-sk {
    background-position: -216.5px -192.5px
}

.f-sl {
    background-position: -240.5px -192.5px
}

.f-sm {
    background-position: -264.5px -192.5px
}

.f-sn {
    background-position: -288.5px -192.5px
}

.f-so {
    background-position: -312.5px -192.5px
}

.f-somaliland {
    background-position: -336.5px -192.5px
}

.f-sr {
    background-position: -360.5px -192.5px
}

.f-ss {
    background-position: 0 -208.5px
}

.f-st {
    background-position: -24.5px -208.5px
}

.f-sv {
    background-position: -48.5px -208.5px
}

.f-sx {
    background-position: -72.5px -208.5px
}

.f-sy {
    background-position: -96.5px -208.5px
}

.f-sz {
    background-position: -120.5px -208.5px
}

.f-tc {
    background-position: -144.5px -208.5px
}

.f-td {
    background-position: -168.5px -208.5px
}

.f-tf {
    background-position: -192.5px -208.5px
}

.f-tg {
    background-position: -216.5px -208.5px
}

.f-th {
    background-position: -240.5px -208.5px
}

.f-cc {
    background-position: -264.5px -208.5px
}

.f-tj {
    background-position: -288.5px -208.5px
}

.f-tk {
    background-position: -312.5px -208.5px
}

.f-tl {
    background-position: -336.5px -208.5px
}

.f-tm {
    background-position: -360.5px -208.5px
}

.f-tn {
    background-position: 0 -224.5px
}

.f-to {
    background-position: -24.5px -224.5px
}

.f-tr {
    background-position: -48.5px -224.5px
}

.f-tt {
    background-position: -72.5px -224.5px
}

.f-tv {
    background-position: -96.5px -224.5px
}

.f-tw {
    background-position: -120.5px -224.5px
}

.f-tz {
    background-position: -144.5px -224.5px
}

.f-ua {
    background-position: -168.5px -224.5px
}

.f-ug {
    background-position: -192.5px -224.5px
}

.f-us, .f-um {
    background-position: -216.5px -224.5px
}

.f-cx {
    background-position: -240.5px -224.5px
}

.f-uy {
    background-position: -264.5px -224.5px
}

.f-uz {
    background-position: -288.5px -224.5px
}

.f-va {
    background-position: -312.5px -224.5px
}

.f-vc {
    background-position: -336.5px -224.5px
}

.f-ve {
    background-position: -360.5px -224.5px
}

.f-vg {
    background-position: 0 -240.5px
}

.f-vi {
    background-position: -24.5px -240.5px
}

.f-vn {
    background-position: -48.5px -240.5px
}

.f-vu {
    background-position: -72.5px -240.5px
}

.f-wales {
    background-position: -96.5px -240.5px
}

.f-wf {
    background-position: -120.5px -240.5px
}

.f-ws {
    background-position: -144.5px -240.5px
}

.f-xk {
    background-position: -168.5px -240.5px
}

.f-ye {
    background-position: -192.5px -240.5px
}

.f-yt {
    background-position: -216.5px -240.5px
}

.f-za {
    background-position: -240.5px -240.5px
}

.f-zm {
    background-position: -288.5px -240.5px
}

.f-zw {
    background-position: -312.5px -240.5px
}

.f-ax {
    background-position: -336.5px -240.5px
}

.f-bq {
    background-position: -264.5px -240.5px
}

.f-none {
    background-position: -360.5px -240.5px
}

/* Scaling
    ================================================== */
#pcTrainTable td:nth-child(3), #pcTrainTable th:nth-child(3) {
    display: none;
}

#dialogs-container.moveUp .dialog {
    top: 0px !important;
    max-height: 100%;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    margin: 0;
}

/* Mobile - Portrait */
@media (orientation: portrait) and (max-width: 480px) {
    #page-head {
        margin: 0 5px 7px 5px;
    }

    tr.tyre td {
        height: 48px;
        font-size: 1.2em;
    }

    .spectateFilterTrack, .spectateFilterTier {
        width: 48%;
        margin: 0 1% 5px;
    }

    .spectateFilter {
        width: 98%;
        margin: 0 1% 10px;
    }

    .spectateFilter > span {
        display: inline-block !important;
    }

    #action, #action:hover, #action:active {
        height: 36px;
    }
}

/* Mobile - All */
@media (orientation: portrait) and (max-width: 480px) {
    body {
        margin-bottom: 0;
    }

    h1 {
        font-size: 1.3125em;
    }

    #tiles-home {
        grid-template-rows: 400px auto; /* Taller first row, shorter second row */
    }

    .twoColVertInvert > div:first-child {
        width: 100%;
        order: 2;
    }

    .twoColVertInvert > div:last-child {
        width: 100%;
        order: 1;
    }

    .background#bgImage {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-default-mobile.webp');
    }

    .background#bgImageGym {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-gym-mobile.webp');
    }

    .background#bgImageHq {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-hq-mobile.webp');
    }

    .background#bgImageCar {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-car-mobile.webp');
    }

    .background#bgImageShop {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-race-mobile.webp');
    }

    .background#bgImageHome {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-home-mobile.webp');
    }

    .background#bgImageFans {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-fans-mobile.webp');
    }

    .background#bgImageCommunity {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-community-mobile.webp');
    }

    .background#bgImageVip {
        background-image: url('https://static.igpmanager.com/igp/design/image/bg-vip-mobile.webp');
    }

    .menuItem:hover {
        transform: none !important;
    }

    .mOpt {
        display: none !important;
    }

    .dOpt {
        display: inline-block;
    }

    .btn.dOpt, .btn2.dOpt, .btn3.dOpt, .btn4.dOpt, .btn5.dOpt, .btn6.dOpt, .btn7.dOpt, .btnInsta.dOpt, .btnTwitter.dOpt, .btnFb.dOpt {
        display: inline-flex;
    }

    .mScroll {
        max-height: 350px;
        overflow-y: scroll;
    }

    .shrinkText {
        font-size: 0.8em;
    }

    .shrinkText .block-green, .shrinkText .block-grey, .shrinkText .block-blue, .shrinkText .block-red, .shrinkText .block-orange {
        min-width: 32px;
    }

    #page-head {
        background-image: none;
    }

    #page-content {
        margin-top: 65px;
    }

    .statWrap {
        flex-wrap: wrap;
        line-height: 1.2;
    }

    .statWrap div {
        width: 31%;
        margin: 0.5% 1%;
        padding: 3px 0;
    }

    .statWrap div span {
        font-size: 1.25em;
    }

    #header, #headerBg, #head-l, #head-r {
        height: 50px;
        line-height: 50px;
    }

    @supports (padding: max(0px)) {
        #header {
            height: 50px;
        }
    }

    #menu {
        width: 100%;
    }

    #headerProfile {
        height: 40px;
        padding: 2px;
        margin-left: 3px;
    }

    .headerProfilePic {
        max-width: 38px;
        max-height: 38px;
    }

    #myProfile {
        top: 50px !important;
    }

    .trPlus {
        top: 2px;
        right: 2px;
    }

    .trPlus, .trPlus svg {
        width: 12px !important;
        height: 12px !important;
        line-height: 13px !important;
    }

    #balance, #tokens {
        line-height: 40px;
        margin-left: 3px;
        width: 27%;
        padding: 0 5px;
    }

    #mail {
        line-height: 40px;
        margin-left: 3px;
        width: 12%;
        padding: 0 5px;
    }

    #tokens {
        width: 23%;
    }

    .dialog {
        --dialog-header-height: 50px;
    }

    #tutorial {
        top: 0;
    }

    #page-title {
        line-height: 50px;
        text-indent: 5px;
        font-size: 1.1875em;
    }

    #page-head .btn, #page-head .btn2, #page-head .btn3 {
        padding: 6px 9px;
        margin-bottom: 3px;
    }

    #page-head-img {
        width: 80px;
        height: 80px;
    }

    #historyBtns {
        margin-left: 10px;
    }

    .tabs a, .tabs a:visited {
        font-size: 0.9375em;
    }

    #dTrainTable td:nth-child(3), #dTrainTable td:nth-child(4), #dTrainTable th:nth-child(3), #dTrainTable th:nth-child(4) {
        display: none;
    }

    .block-green, .block-grey, .block-blue, .block-red, .block-orange {
        width: auto;
    }
}

/* Responsive layout for mobile (2x2) */
@media (max-width: 768px) {
    .grid31to22 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset the full-width column on mobile */
    .grid31to22 > :nth-child(4) {
        grid-column: auto;
    }
}

/* Mobile styles (default) */
@media screen and (max-width: 1048px) {
    #head-l {
        display: none;
    }

    #head-l,
    #head-r {
        width: 100%;
    }

    #menuContainer {
        height: 67px;
        bottom: 0 !important;
        left: 0;
        right: 0;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
        border-top: 1px solid #636f81;
        /* Ensure menu stays below dialogs but above page content */
        z-index: 5;
        /* iOS positioning - CRITICAL: fixed must be set without transforms on same element */
        position: fixed;
        /* Prevent gestures starting on the menu from affecting page scroll */
        touch-action: none;
        /* Safe area support for iOS devices with notches/home indicators */
        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 fallback */
        /* Additional iOS stability fixes */
        -webkit-perspective: 1000;
        perspective: 1000;
        /* Force position to be respected even during rapid DOM changes */
        position: fixed !important;
    }
    
    /* Apply transforms to inner menu element, NOT the container */
    #menuContainer #menu {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    #menu {
        height: 67px;
        background: linear-gradient(to bottom, #3b4759, #1c222b);
    }

    menu div {
        height: 67px;
    }

    /* Add padding to page content to prevent menu overlap */
    #page-wrap {
        margin-bottom: 90px !important; /* Increased from 80px to 90px for more safety margin */
    }
}

/* Desktop styles */
@media screen and (min-width: 1049px) {
    #menuContainer {
        top: 0px;
        left: 50%;
        transform: translateX(-100%);
        width: 600px;
        z-index: 105;
    }

    #menu {
        background: none;
    }
}

/* Menu positioning for in-between window sizes */
@media screen and (min-width: 1049px) and (max-width: 1310px) {
    #menuContainer {
        top: 0px;
        left: 51%;
        transform: translateX(-100%); /* Center it instead of fixed offset */
        width: 480px;
        z-index: 105;
    }

    #menu {
        background: none;
    }
}

@media screen and (max-width: 1310px) {
    #myProfile {
        position: absolute;
        top: 80px;
        right: 0;
    }
}

/* roboto-condensed-300 - latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext */
@font-face {
    font-family: 'RobotoCondensedLight';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
    url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300.woff') format('woff'), /* Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext */
@font-face {
    font-family: 'RobotoCondensedLightItalic';
    font-display: swap;
    font-style: italic;
    font-weight: 300;
    src: url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
    url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300italic.woff') format('woff'), /* Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext */
@font-face {
    font-family: 'RobotoCondensed';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
    url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-regular.woff') format('woff'), /* Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext */
@font-face {
    font-family: 'RobotoCondensedItalic';
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    src: url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
    url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-italic.woff') format('woff'), /* Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext */
@font-face {
    font-family: 'RobotoCondensedBold';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
    url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700.woff') format('woff'), /* Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700italic - latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext */
@font-face {
    font-family: 'RobotoCondensedBoldItalic';
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    src: url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'),
    url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700italic.woff') format('woff'), /* Modern Browsers */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/app/design/fonts/roboto-condensed-v16-latin-ext_greek-ext_vietnamese_cyrillic_greek_latin_cyrillic-ext-700italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

.preload * {
    transition: none !important;
}

/* Prevent image loading from causing jumping page content */
.i5625, .i62, .i75, .i169, .i6053, .i100, .i6561, .i2423, .i250 {
    position: relative;
    height: 0;
    overflow: hidden;
}

.i5625 img, .i62 img, .i75 img, .i169 img, .i6053 img, .i100 img, .i6561 img, .i2423 img, .i250 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ensure the image covers the container */
    object-fit: contain; /* Adjust based on how you want the image to scale */
}

/* image height/width*100 determines padding to prevent jumping */
.i5625 {
    padding-bottom: 56.25%;
}

.i62 {
    padding-bottom: 62%;
}

.i75 {
    padding-bottom: 75%;
}

.i169 {
    /* 16:9 ratio */
    padding-bottom: 56.25%;
}

.i6053 {
    /* 16:9 ratio */
    padding-bottom: 60.53%;
}

.i100 {
    padding-bottom: 100%;
}

.i6561 {
    padding-bottom: 65.61%;
}

.i2423 {
    padding-bottom: 24.23%;
}

.i250 {
    padding-bottom: 250%;
}

.iLogo1 {
    margin: 0 auto 40px auto; /* center on wide screens */
}

.iLogo1 img {
    width: 100%;
    max-width: 512px; /* cap at 512px */
}

::selection {
    background: #7bb51f;
    color: #fff; /* Safari and Opera */
}

::-moz-selection {
    background: #7bb51f;
    color: #fff; /* Firefox */
}

.colorPicker {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

.color-picker, .color-picker *, .color-picker :after, .color-picker :before, .color-picker:after, .color-picker:before {
    box-sizing: border-box
}

.color-picker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999
}

.color-picker-control {
    border: 1px solid #000;
    box-shadow: 1px 5px 10px rgba(0, 0, 0, .5)
}

.color-picker-control *, .color-picker-control :after, .color-picker-control :before {
    border-color: inherit
}

.color-picker-control:after {
    content: " ";
    display: table;
    clear: both
}

.color-picker i {
    font: inherit
}

.color-picker-h {
    position: relative;
    width: 32px;
    height: 150px;
    float: right;
    border-left: 1px solid;
    border-left-color: inherit;
    cursor: ns-resize;
    background: url(color-picker-h.png) 50% 50% no-repeat;
    background-image: linear-gradient(to top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
    background-size: 100% 100%;
    overflow: hidden
}

.color-picker-h i, .color-picker-h i:before {
    left: 0;
    display: block;
    position: absolute;
    right: 0
}

.color-picker-h i {
    top: -3px;
    z-index: 3;
    height: 6px
}

.color-picker-h i:before {
    content: "";
    top: 0;
    bottom: 0;
    border: 3px solid;
    border-color: inherit;
    border-top-color: transparent;
    border-bottom-color: transparent
}

.color-picker-sv {
    position: relative;
    width: 150px;
    height: 150px;
    float: left;
    background: url(color-picker-sv.png) 50% 50% no-repeat;
    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    background-size: 100% 100%;
    cursor: crosshair
}

.color-picker-sv i {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
    display: block;
    width: 8px;
    height: 8px
}

.color-picker-sv i:after, .color-picker-sv i:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border: 1px solid;
    border-color: inherit;
    border-radius: 100%
}

.color-picker-sv i:before {
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-color: #fff
}

.color-picker-h, .color-picker-sv {
    user-select: none;
}

[aria-hidden="true"] {
    display: none;
}

#quitApplication {
    position: fixed;
    top: 11px;
    left: 11px;
    z-index: 120;
}

#myProfile a {
    display: block;
    width: 100%;
}
/* Level Up animation */
.levelUpOverlay { position: fixed; left:0; top:0; right:0; bottom:0; z-index: 99999; pointer-events: auto; }
.levelUpScrim { position:absolute; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity:0; animation: levelUpScrimIn 220ms cubic-bezier(0.20, 0.80, 0.20, 1.00) forwards; will-change: opacity; }
.levelUpOverlay.exitingAll .levelUpScrim, .levelUpOverlay.exitingAll .levelUpSlabWrap { animation: levelUpFadeOut 200ms cubic-bezier(0.40, 0.00, 1.00, 1.00) forwards; }
.levelUpSlabWrap { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) rotate(-18deg) translateX(-10%); width:170vw; height:170vh; animation: levelUpSlabIn 220ms cubic-bezier(0.20, 0.80, 0.20, 1.00) forwards; will-change: transform; }
.levelUpSlab { position:absolute; left:0; top:0; right:0; bottom:0; background: rgba(42,142,255,0.15); overflow:hidden; }
.levelUpSlab:before { display:none; }
.levelUpStripe { position:absolute; left:-25%; top:-25%; width:150%; height:150%; will-change: transform; }
.levelUpStripeA { background: repeating-linear-gradient(-18deg, rgba(42,142,255,0.18) 0px, rgba(42,142,255,0.18) 120px, rgba(42,142,255,0.05) 120px, rgba(42,142,255,0.05) 260px); animation: levelUpStripeA 7.2s ease-in-out infinite; }
.levelUpStripeB { opacity:.75; background: repeating-linear-gradient(-18deg, rgba(42,142,255,0.12) 0px, rgba(42,142,255,0.12) 120px, rgba(42,142,255,0.03) 120px, rgba(42,142,255,0.03) 260px); animation: levelUpStripeB 8.6s ease-in-out infinite reverse; }
.levelUpText { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); text-align:center; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,0.35); pointer-events:none; }
.levelUpTitle { font-family:"RobotoCondensedBold"; font-size:40px; line-height:1.05; opacity:0; transform: translateY(10px) scale(0.90); animation: levelUpTextPop 800ms cubic-bezier(0.21, 1.00, 0.21, 1.00) 60ms forwards; will-change: transform, opacity; }
.levelUpNumber { font-family:"RobotoCondensedBold"; font-size:96px; line-height:1.05; opacity:0; transform: translateY(10px) scale(0.90); animation: levelUpTextPop 800ms cubic-bezier(0.21, 1.00, 0.21, 1.00) 180ms forwards; will-change: transform, opacity; }
.levelUpOverlay.exitingText .levelUpTitle, .levelUpOverlay.exitingText .levelUpNumber, .levelUpOverlay.exitingAll .levelUpTitle, .levelUpOverlay.exitingAll .levelUpNumber { animation: levelUpTextFade 120ms linear forwards; }
@media (max-width:768px){ .levelUpTitle{font-size:24px;} .levelUpNumber{font-size:48px;} }
@keyframes levelUpScrimIn { from{opacity:0;} to{opacity:1;} }
@keyframes levelUpSlabIn { from{ transform: translate(-50%, -50%) rotate(-18deg) translateX(-10%);} to{ transform: translate(-50%, -50%) rotate(-18deg) translateX(0%);} }
@keyframes levelUpFadeOut { from{opacity:1;} to{opacity:0;} }
@keyframes levelUpStripeA { 0%{transform:translate(-15%,-15%);} 50%{transform:translate(0,0);} 100%{transform:translate(15%,15%);} }
@keyframes levelUpStripeB { 0%{transform:translate(15%,15%);} 50%{transform:translate(0,0);} 100%{transform:translate(-15%,-15%);} }
@keyframes levelUpTextPop { 0%{opacity:0; transform: translateY(12px) scale(0.88);} 100%{opacity:1; transform: translateY(0) scale(1);} }
@keyframes levelUpTextFade { from{opacity:1;} to{opacity:0;} }