body {
    background: #F2F7FC;
    margin: 0px;
    padding: 0px;
    font-family: 'Rubik', sans-serif;
    overflow-x: hidden;
}
a {
    transition: 0.3s all !important;
    text-decoration: none !important;
    color: #FFD076;
}
a:hover {
    color: #ffc048;
}


.container {
    padding: 0px;
}
.container::before , .container::after {
    display: none !important;
}
@media (min-width: 1200px) {
.container {
    width: 1170px;
}
}

.dropdown-menu {display: block;visibility: hidden;opacity:0;transform: translateY(25px);transition:.3s ease all;}
.open .dropdown-menu {display: block;visibility: visible;opacity:1;transform: translateY(0px);transition:.3s ease all;}








button, .btn {
    transition: 0.3s all !important;
}
.btn-info {
    color: #ffffff;
    background-color: #2997FF;
    border-color: #2997FF;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
    color: #ffffff;
    background-color: #0083ff;
    border-color: #0083ff;
    letter-spacing: 2px;
}






.panel.panel-default {
    border: none;
}
.panel-heading {
    background: transparent !important;
    border: none;
    padding: 20px 15px;
    font-size: 16px;
    font-weight: 700 !important;
}
.PatronPage .panel-heading {
    padding: 20px 15px 0px;
}



#loader {
    border: 12px solid #dee5f8;
    border-radius: 50%;
    border-top: 12px solid #1486e7;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 30px auto;
}
 
        @keyframes spin {
            100% {
                transform: rotate(360deg);
            }
        }




.header {
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/a8656b4dd567389112ac9bc79fba5ffcf0056779.png);
    background-size: cover !important;
    margin: 0px;
    padding-bottom: 170px;
}
.header .logo {
    float: left;
    width: 100%;
    text-align: center;
}
.header .logo img {
    height: 220px;
}




.Clouds {
    display: flex;
    position: absolute;
    justify-content: space-between;
    width: 100%;
}
.Clouds img:nth-child(1) {
    filter: drop-shadow(-5px 7px 0px rgba(255, 255, 255, 0.1));
    opacity: 0.5;
    height: 200px;
    animation: MoveCloud ease-in-out 2s infinite alternate-reverse;
}
.Clouds img:nth-child(2) {
    filter: drop-shadow(-5px 7px 0px rgba(255, 255, 255, 0.1));
    opacity: 0.8;
    height: 275px;
    margin-top: 100px;
    animation: MoveCloudOne ease-in-out 2s infinite alternate-reverse;
}

.CloudsBar img {
    pointer-events: none;
    width: 888px;
}
.CloudsBar img:nth-child(4) {
    margin-top: 60px;
}
.CloudsBar img:nth-child(6) {
    margin-top: 20px;
}
.CloudsBar img:nth-child(5) {
    margin-top: 80px;
}
.CloudsBar img:nth-child(2) {
    margin-top: 50px;
}
.CloudsBar img:nth-child(1) {
    margin-top: -50px;
}
.CloudsBar img {
    margin-left: -500px;
}
.CloudsBar {
    margin-top: -275px;
    display: inline-flex;
}
/* The cloud strip is wider than the screen; keep it (and the floating clouds)
   from making the page scroll sideways at any width */
#content,
.Clouds {
    overflow-x: clip;
}




@keyframes MoveCloudOne {
    
0% {
    transform: translateX(-10px);
}
100% {
    transform: translateX(10px);
}
    
}
@keyframes MoveCloud {
    
0% {
    transform: translateX(10px);
}
100% {
    transform: translateX(-10px);
}
    
}






div#maincontent {
    margin-top: -269px;
    z-index: 100;
    position: relative;
    margin-bottom: 50px;
}
/* The content area is pulled up over the header; its empty top edge sat on top of the logo, so
   taps on the logo did nothing on phones. Let taps pass through the empty area, not the content. */
div#maincontent {
    pointer-events: none;
}
div#maincontent > * {
    pointer-events: auto;
}


.UserBar.panel {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    justify-content: space-between;
}





.CurrentPage {
    display: grid;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    font-weight: 800;
    font-size: 26px;
    text-shadow: 1px 3px 1px rgba(0, 0, 0, 0.25);
    margin: 0px auto;
    z-index: 0;
}
.CurrentPage span {
    text-transform: uppercase;
    font-size: 18px;
    color: #b2bbc8;
    text-shadow: none;
}


.UserBarLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 10;
}
.UserBarLeft a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.BackBTN {
    background: rgb(253 203 91);
    padding: 15px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: #333333;
}
.BackBTN:hover {
    color: #000;
}
.BasketBTN {
    display: grid;
    text-align: center;
    background: rgba(0,0,0,0.02);
    padding: 15px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: #b2bbc7;
    gap: 6px;
    line-height: 13px;
    cursor: pointer;
}
.CartActions {
    display: flex;
    gap: 10px;
}
.BasketDropDown .dropdown-menu {
    width: 350px;
}
.package-options {
    display: inline-flex;
    gap: 5px;
}
.BasketFooter p {
    margin: 0px;
}
.BasketFooter {
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    padding: 12px 20px;
    justify-content: space-between;
}
.BasketDropDown table {
    margin: 0px;
}
.currency.open {
    position: relative;
}
button.btn-currency {
    background: rgba(0,0,0,0.02);
    padding: 15px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: #b2bbc7;
    gap: 6px;
    line-height: 13px;
    cursor: pointer;
    border: none;
}


.BasketDropDown.open .dropdown-menu {
    margin-right: 0px !important;
}
.BasketDropDown .dropdown-menu {
    width: 350px;
    height: 100%;
    right: 0;
    top: 0;
    margin-right: -350px !important;
    left: unset;
    position: fixed;
    margin: 0px;
    border: none;
}
.BasketDropDown th.name, .BasketDropDown td.name {
    padding: 15px !important;
}
.BasketPackageInfo img {
    width: 64px;
    border: none;
    background: transparent;
}
.BasketPackageInfo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.BasketDropDown table tr {
    position: relative;
}
.BasketDropDown .CartActions {
    position: absolute;
    top: 10px;
    left: -10px;
}





.UserMenu {
    height: 150px;
    overflow: hidden;
    margin-bottom: -30px;
    margin-top: -40px;
    position: relative;
    z-index: 10;
}
.UserMenu a {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: right;
    color: #B2BBC6;
}

.UserMenu img {
    transform: scaleX(-1);
}









.CategoryNav {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;
    margin: 24px 0px 80px;
}


.CategoryNav a {
    border-radius: 10px;
    position: relative;
    color: #fff;
    display: block;
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
    padding: 50px;
    transition: 0.3s all !important;
}
.CategoryCloud {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}
.CategoryCloud:after , .CategoryCloud:before {
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/ea9c8903dd2595aabb36c52b73c4eb7ac8eddca4.png);
    background-size: cover !important;
    filter: drop-shadow(6px 4px 0px rgba(0, 0, 0, 0.05));
    content: '';
    display: block;
    position: absolute; 
    transition: 0.5s all !important;
    opacity: 0.15;
    width: 371px;
    height: 149px;
}










.CategoryNav a:nth-child(1):before, .CategoryNav a:nth-child(1):after , .CategoryNav a:nth-child(2):before, .CategoryNav a:nth-child(3):before {
    position: absolute;
    background-size: cover !important;
    content: '';
    display: block;
    width: 212px;
    height: 212px;
}







.CategoryNav a:nth-child(1) {
    /* Tile colours: one matching family, deep enough for the white labels (about 3:1) */
    background: radial-gradient(50% 50% at 50% 50%, #F07A5F 0%, #E25A44 100%);
    grid-row-start: 1;
    grid-row-end: 3;
}
.CategoryNav a:nth-child(1) .CategoryCloud:after {
    top: 20%;
    left: -10%;
}
.CategoryNav a:nth-child(1):hover .CategoryCloud:after {
    left: -5%;
}
.CategoryNav a:nth-child(1) .CategoryCloud:before {
    bottom: 10%;
    right: -30%;
}
.CategoryNav a:nth-child(1):hover .CategoryCloud:before {
    right: -20%;
}



.CategoryNav a:nth-child(1):before {
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/10a952564f426dec92838f1301c683100fd7db31.png);
    top: -30%;
    right: 0;
}
.CategoryNav a:nth-child(1):after {
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/5382925deaa32781798a6827f2d270a0dceb5e8d.png);
    left: -2%;
    bottom: -10%;
}



.CategoryNav a:nth-child(2) .CategoryCloud:after , .CategoryNav a:nth-child(2) .CategoryCloud:before {
    top: 5%;
    left: -15%;
}
.CategoryNav a:nth-child(2):hover .CategoryCloud:after , .CategoryNav a:nth-child(2):hover .CategoryCloud:before {
    left: -25%;
}


.CategoryNav a:nth-child(3) .CategoryCloud:after , .CategoryNav a:nth-child(3) .CategoryCloud:before {
    top: 10%;
    left: 20%;
}
.CategoryNav a:nth-child(3):hover .CategoryCloud:after , .CategoryNav a:nth-child(3):hover .CategoryCloud:before  {
    left: 25%;
}












.CategoryNav a:nth-child(2) {
    background: linear-gradient(265.84deg, #FFC64F 1.08%, #FFA92B 96.61%);
}
.CategoryNav a:nth-child(2):before {
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/079cb5c9f6241081a9ffaaedef18e6ea2e3238d4.png);
    left: -5%;
    bottom: -10%;
    width: 111px;
    height: 111px;
    z-index: 100;
}

.CategoryNav a:nth-child(3) {
    background: linear-gradient(100.94deg, #38A84E 1.22%, #55C266 102.04%);
}
.CategoryNav a:nth-child(3):before {
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/2a6906f8500fba65596be2e9470f3e4a055d9f6e.png);
    right: -2%;
    bottom: -10%;
    z-index: 100;
}













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


.Package {
    transition: 0.3s all !important;
    text-align: center;
    padding: 20px;
    border-radius: 4px;
    background: #f2f7fb;
}
.Package:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 9px rgba(0,0,0,0.15);
}
.Package .name , .RanksTable .name {
    font-weight: 600;
    font-size: 18px;
    margin-top: 20px;
}
/* Prices: solid green (was #39C05E at 60% opacity, only 1.6:1 on the cards); the currency is
   small and grey so the amount reads first */
.price {
    font-size: 16px;
    font-weight: 700;
    color: #24883F;
}
.price small {
    margin-left: 2px;
    font-size: 0.7em;
    font-weight: 600;
    color: #8a96a3;
}
/* Product cards: a bit larger */
.Package .price,
.RankCardTop .price,
.UpgradeBuy .price,
.CheckoutPackage .price {
    font-size: 20px;
}
.Package .button a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 20px;
    margin: 10px auto;
}
.btn {
    font-weight: 600;
    text-shadow: 1px 2px 1px rgba(0,0,0,0.15);
    border-radius: 10px;
}
















.loading {
    display: none;
}
.is-animating .loading , .is-changing .loading , .is-leaving .loading {
  color: #121212;
  font: 300 4em/150% Impact;
  text-align: center;
  display: block;
}
.loading:after {
  content: " .";
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%,
  20% {
    color: white;
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 white;
  }
  40% {
    color: #666;
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 0.25em 0 0 #666, 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  80%,
  100% {
    text-shadow: 0.25em 0 0 #666, 0.5em 0 0 #666;
  }
}








table.RanksTable {
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
tbody.RanksGrid tr:nth-child(3) {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
tbody.RanksGrid tr:nth-child(1), tbody.RanksGrid tr:nth-child(2), tbody.RanksGrid tr:nth-child(3) {
    background: rgba(0,0,0,0.025);
}
tbody.RanksGrid td {
    text-align: center;
    padding: 15px;
}
tbody.RanksGrid .image img {
    width: 150px;
}
.Feature {
    font-weight: 600;
    text-align: left !important;
    position: relative;
}
.Feature span {
    font-size: 18px;
    opacity: 0.4;
    position: absolute;
    top: -10px;
    margin-left: 5px;
}

.Mobs img {
    width: 25px;
    border-radius: 5px;
}
.Mobs > div {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px;
}
.FeatureCross {
    color: red;
    opacity: 0.5;
}
.FeatureCheck {
    color: #3a8b12;
}
tr#HeartsRow span {
    color: #FF6961;
}




.FooterTop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.FooterSocials {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}
.FooterSocials svg {
    width: 20px;
    height: 20px;
}
/* Social buttons: one size, same height as the IP boxes next to them, in brand colours */
.FooterSocials a,
.FooterSocials a#PatronBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 44px;
    padding: 0;
    border-radius: 6px;
    background: #39434E;
    color: #fff;
}
.FooterSocials a:hover {
    transform: translateY(-3px);
    color: #fff;
}
.FooterSocials a.SocialDiscord {
    background: #5865F2;
}
.FooterSocials a.SocialDiscord:hover {
    background: #4752C4;
}
.FooterSocials a.SocialTikTok {
    background: #000;
}
.FooterSocials a.SocialTikTok:hover {
    background: #1a1a1a;
}
.FooterSocials a.SocialYouTube {
    background: #FF0000;
    cursor: default;
}
.FooterSocials a.SocialYouTube:hover {
    transform: none;
}
.FooterSocials a#PatronBTN {
    background: #fdcb5b;
}
.FooterSocials a#PatronBTN:hover {
    background: #f6bf3f;
}
/* TikTok's cyan and pink edges are drawn in the icon itself (footer.twig) so it stays sharp */
.FooterSocials a.SocialTikTok svg {
    overflow: visible;
}

.IP span {
    background: #39434E;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 500;
}
.IP {
    cursor: copy;
}
.IP .count::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #39C05E;
    vertical-align: middle;
}
.IP .count::after {
    content: ' online';
}






footer .container {
    /*background: #39434E;*/
    /* --footer-bg is set in footer.twig so it can use the theme's own image asset */
    background: linear-gradient(45deg, rgb(57 68 80 / 90%), rgb(17 59 73 / 99%)) , var(--footer-bg, none);
    background-size: Cover !important;
    background-position: left;
    color: #fff;
    padding: 30px 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
footer .container:after , footer .container:before {
    display: none !important;
}

.FooterLinks:first-child {
    grid-column-start: 3;
}

.FooterLinks h3 {
    font-weight: 700;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    margin-bottom: 15px;
}
.FooterLinks ul {
    list-style: none;
    padding: 10px 20px;
    display: grid;
    gap: 20px;
    font-weight: 500;
}
.FooterLinks a {
    color: #B2BBC6;
}
.FooterLinks a:hover {
    color: #FFD076;
}
.FooterCopyrights {
    grid-column-start: 1;
    grid-column-end: 3;
    width: 80%;
    display: flex;
    align-items: end;
    padding-left: 30px;
}


















.modal-header {
    border: none;
    padding: 25px;
    text-align: center;
}
.modal-footer {
    padding: 20px;
    background: rgba(0,0,0,0.02);
}








.CheckoutPackages {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 30px;
    margin-bottom: 30px;
}
.CheckoutPackage.panel {
    padding: 25px 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin: 0px auto;
    position: relative;
    max-width: 525px;
    width: 100%;
}

.CheckoutPackage.panel .buttons {
    position: absolute;
    top: -15px;
    right: -15px;
}
.CheckoutPackageInfo {
    display: flex;
    align-items: center;
    gap: 30px;
}
.CheckoutPackageInfo img {
    width: 150px;
    border: none !important;
}
.PackageInfo {
    display: grid;
}
.PackageInfo h3 {
    font-weight: 700;
    font-size: 18px;
}
.GiftedPackage i {
    font-size: 32px;
    opacity: 0.3;
}
.quantity {
    display: flex;
    gap: 10px;
    margin: 20px 0px 10px;
}
.GiftedPackage {
    position: absolute;
}
span.options.hidden-xs {
    display: grid;
}





.CheckoutUser.panel {
    display: grid;
    align-items: center;
    justify-content: space-around;
    width: fit-content;
    gap: 30px;
    margin: 0px auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    
}
.UserCheckout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin: -1px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0px 20px;
    overflow: hidden;
}
.UserCheckout img {
    transform: scaleX(-1);
    margin: 0px 0px -50px;
}
.UserCheckout a span {
    display: inline-flex;
    color: #333;
}
.CheckoutLink {
    display: grid;
    text-align: right;
    padding: 25px;
}
form.gateway {
    text-align: center;
}
form.gateway .form-group {
    margin-bottom: 15px;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 600;
}
form.gateway small {
    font-size: 69%;
    opacity: 0.5;
}
.CheckoutLink button {
    border-radius: 6px;
    margin-top: 5px;
    padding: 14px;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity input {
    border: 2px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    width: 32px;
    padding-left: 10px;
}
.quantity button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 10px;
}

















a#PatronBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 44px;
    padding: 0;
    border-radius: 6px;
    background: #39434E;
    color: #fff;
}
.FooterSocials a:hover {
    transform: translateY(-3px);
    color: #fff;
}
.FooterSocials a.SocialDiscord {
    background: #5865F2;
}
.FooterSocials a.SocialDiscord:hover {
    background: #4752C4;
}
.FooterSocials a.SocialTikTok {
    background: #000;
}
.FooterSocials a.SocialTikTok:hover {
    background: #1a1a1a;
}
.FooterSocials a.SocialYouTube {
    background: #FF0000;
    cursor: default;
}
.FooterSocials a.SocialYouTube:hover {
    transform: none;
}
.FooterSocials a#PatronBTN {
    background: #fdcb5b;
}
.FooterSocials a#PatronBTN:hover {
    background: #f6bf3f;
}
/* TikTok's cyan and pink edges are drawn in the icon itself (footer.twig) so it stays sharp */
.FooterSocials a.SocialTikTok svg {
    overflow: visible;
}

.IP span {
    background: #39434E;
    color: #fff;
    padding: 12px 20px;
    border-radius: 4px;
    font-weight: 500;
}
.IP {
    cursor: copy;
}
.IP .count::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #39C05E;
    vertical-align: middle;
}
.IP .count::after {
    content: ' online';
}






footer .container {
    /*background: #39434E;*/
    /* --footer-bg is set in footer.twig so it can use the theme's own image asset */
    background: linear-gradient(45deg, rgb(57 68 80 / 90%), rgb(17 59 73 / 99%)) , var(--footer-bg, none);
    background-size: Cover !important;
    background-position: left;
    color: #fff;
    padding: 30px 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
footer .container:after , footer .container:before {
    display: none !important;
}

.FooterLinks:first-child {
    grid-column-start: 3;
}

.FooterLinks h3 {
    font-weight: 700;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    margin-bottom: 15px;
}
.FooterLinks ul {
    list-style: none;
    padding: 10px 20px;
    display: grid;
    gap: 20px;
    font-weight: 500;
}
.FooterLinks a {
    color: #B2BBC6;
}
.FooterLinks a:hover {
    color: #FFD076;
}
.FooterCopyrights {
    grid-column-start: 1;
    grid-column-end: 3;
    width: 80%;
    display: flex;
    align-items: end;
    padding-left: 30px;
}


















.modal-header {
    border: none;
    padding: 25px;
    text-align: center;
}
.modal-footer {
    padding: 20px;
    background: rgba(0,0,0,0.02);
}








.CheckoutPackages {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 30px;
    margin-bottom: 30px;
}
.CheckoutPackage.panel {
    padding: 25px 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin: 0px auto;
    position: relative;
    max-width: 525px;
    width: 100%;
}

.CheckoutPackage.panel .buttons {
    position: absolute;
    top: -15px;
    right: -15px;
}
.CheckoutPackageInfo {
    display: flex;
    align-items: center;
    gap: 30px;
}
.CheckoutPackageInfo img {
    width: 150px;
    border: none !important;
}
.PackageInfo {
    display: grid;
}
.PackageInfo h3 {
    font-weight: 700;
    font-size: 18px;
}
.GiftedPackage i {
    font-size: 32px;
    opacity: 0.3;
}
.quantity {
    display: flex;
    gap: 10px;
    margin: 20px 0px 10px;
}
.GiftedPackage {
    position: absolute;
}
span.options.hidden-xs {
    display: grid;
}





.CheckoutUser.panel {
    display: grid;
    align-items: center;
    justify-content: space-around;
    width: fit-content;
    gap: 30px;
    margin: 0px auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    
}
.UserCheckout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin: -1px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0px 20px;
    overflow: hidden;
}
.UserCheckout img {
    transform: scaleX(-1);
    margin: 0px 0px -50px;
}
.UserCheckout a span {
    display: inline-flex;
    color: #333;
}
.CheckoutLink {
    display: grid;
    text-align: right;
    padding: 25px;
}
form.gateway {
    text-align: center;
}
form.gateway .form-group {
    margin-bottom: 15px;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 600;
}
form.gateway small {
    font-size: 69%;
    opacity: 0.5;
}
.CheckoutLink button {
    border-radius: 6px;
    margin-top: 5px;
    padding: 14px;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantity input {
    border: 2px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    width: 32px;
    padding-left: 10px;
}
.quantity button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 10px;
}





















a#PatronBTN {
    background: #fdcb5b;
    display: block;
    position: relative;
    overflow: hidden;
    fill: #fff;
}
a#PatronBTN svg {
    filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.15));
}
.PatronBTN {
  position: absolute;
  top: 0;
  left: -70px;
  height: 98px;
  width: 50px;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s linear;
  transform: skewX(20deg) translateX(0);
  -webkit-animation: shine 5s infinite;
  -webkit-animation-timing-function: ease-in-out; 
  animation-delay: 3s;
}
@keyframes shine {
    20%, 100% {
        opacity: 0;
        transform: skewX(20deg) translateX(300px);
      }
      0% {
        opacity: 0;
        transform: skewX(0deg) translateX(00px);
      }
      10% {
        opacity: 1;
      }
}





.top-donator {
    overflow: hidden;
}
.top-donator .info {
    text-align: right !important;
}
.top-donator .avatar img {
    opacity: 0.3;
    width: 100px;
    filter: drop-shadow(2px 4px 5px rgba(0,0,0,0.2));
}
ul.payments {
    background: rgba(0,0,0,0.05);
    padding: 20px !important;
    margin: 0px -15px -15px !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
ul.payments img {
    border-radius: 8px;
}
ul.payments {
    display: flex;
    gap: 10px 30px;
    flex-wrap: wrap;
}

.login-disclaimer {
    text-align: center;
    color: rgba(0,0,0,0.5);
    font-weight: 500;
    padding: 10px 0px;
}
.content .panel-heading {
    text-align: center;
}





@media (max-width: 768px) {

.header .logo img {
    height: 170px;
}
/* Pages other than Home: smaller logo so the content starts higher up */
.header-compact {
    padding-bottom: 150px;
}
.header-compact .logo img {
    height: 120px;
}
/* .container has no side padding here, so Bootstrap rows would stick out 15px each side */
#maincontent > .row {
    margin-left: 0;
    margin-right: 0;
}

.CategoryNav , .PackagesGrid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
}
.CategoryNav {
    gap: 12px;
    margin: 16px 0 50px;
}
/* Smaller tiles so all three categories fit on the first screen */
.CategoryNav a {
    padding: 36px 40px;
}
.CategoryNav a:nth-child(1) {
    height: 190px;
}
/* Same layout as desktop (big cat top-right, tiger bottom-left), scaled down so the
   tiger sits under the RANKS label instead of on it */
.CategoryNav a:nth-child(1):before {
    width: 165px;
    height: 165px;
    top: -22%;
    right: 0;
}
.CategoryNav a:nth-child(1):after {
    width: 118px;
    height: 118px;
    left: -2%;
    bottom: -8%;
}
/* Empty basket: just the cart icon on phones (the item count still shows when it has items) */
a.BasketBTN .CartInfo {
    display: none;
}
a.BasketBTN {
    padding: 12px;
}
.UserBarLeft {
    gap: 8px;
}
/* Logged out: the Log in button is enough, the Steve figure only crowds the bar */
.GuestAvatar {
    display: none;
}
.UserMenu:has(.GuestAvatar) {
    height: auto;
    margin: 0;
}
/* "Main Website" leaves the store; not needed on phones (other pages keep "Back to Home") */
.BackBTN--site {
    display: none !important;
}
/* Footer on phones: just the social buttons above the footer (no IP box), and every line
   of the footer lined up on the same 24px left edge */
.CategoryNav {
    margin-bottom: 28px;
}
.FooterTop {
    margin-bottom: 20px;
}
.FooterTop .container {
    justify-content: center;
}
.FooterTop .IP {
    display: none;
}
.FooterSocials {
    gap: 12px;
}
/* Three buttons: a little larger on phones for easier tapping */
.FooterSocials a,
.FooterSocials a#PatronBTN {
    width: 64px;
    height: 48px;
}
.FooterSocials svg {
    width: 22px;
    height: 22px;
}
.FooterSocials a:hover {
    transform: none;
}
footer .container {
    display: flex !important;
    flex-direction: column-reverse;
    justify-content: flex-start !important;
    gap: 24px;
    padding: 28px 24px 0 !important;
}
/* Legal column (the second link list) is hidden on phones */
footer .FooterLinks + .FooterLinks {
    display: none;
}
.FooterLinks h3 {
    margin: 0 0 14px;
}
.FooterLinks ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin: 0;
    padding: 0;
}
.FooterCopyrights {
    align-self: stretch;
    width: auto;
    margin: 0 -24px;
    padding: 24px;
    background: rgb(255 255 255 / 8%);
    backdrop-filter: blur(7px);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.FooterCopyrights p {
    margin: 0;
}
.CloudsBar , .CurrentPage, button.btn-currency  {
    display: none !important;
}
.Clouds img:nth-child(1) , .Clouds img:nth-child(2) {
    height: 100px !important;
}

.Clouds img:nth-child(2) {
    position: absolute;
    right: 0;
}
.UserBar.panel {
    padding: 25px 10px !important;
}
.UserCheckout a {
    display: flex;
    flex-direction: column;
}


.Feature {
    text-align: left;
    left: 0 !important;
    position: sticky !important;
}
.RanksGrid {
    border: 0;
    border-collapse: separate;
    border-spacing: 6px 0;
    float: left;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}
.RanksOverflow {
    overflow-x: auto;
}
td.Feature {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(6px);
    z-index: 9999;
    border-right: 1px solid rgba(0,0,0,0.1) !important;
}

.buttons a {
    padding: 6px 17px !important;
    border-radius: 100px !important;
    background: #f2f7fc !important;
    color: #d9534f !important;
    font-size: 24px !important;
    border: none !important;
}
.CheckoutPackage.panel .buttons {
    bottom: -25px !important;
    top: unset !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    text-align: center;
}

.category .packages-row table td {
    width: unset !important;
}

}





















.category .packages-row table td {
    vertical-align: middle;
    padding: 15px;
    font-weight: 500;
}
a.UpgradesBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    width: fit-content;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 700;
}
a.UpgradesBTN span {
    margin-top: -2px;
    transition: 0.3s all !important;
}
a.UpgradesBTN:hover span {
    transform: translateX(3px);
    opacity: 0.5;
}


.discount {
  text-decoration: line-through;
  opacity: 0.6;
  color: #787878;
}











body>[class*=tebex-footer-wrapper] {
    background: #dee8f2!important;
    height: auto!important;
    padding: 20px 32px!important;
    font-size: 12px!important;
    border-top: 1px solid rgba(0,0,0,0.1) !important;
}
body>[class*=tebex-footer-wrapper]>[class*=tebex-footer-links] a {
    text-decoration: none !important;
    font-weight: 600;
    color: rgba(0,0,0,0.4) !important;
    padding: 0px 15px;
}

/* ---------- Log in button (user bar) ---------- */
.LoginBTN {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 10px;
    background: #2897ff;
    color: #fff;
    font-weight: 700;
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}
.LoginBTN .material-symbols-rounded { font-size: 20px; }
.UserMenu a:hover .LoginBTN { background: #0f86f5; }

/* ---------- Shared login box (login page and pop-up) ---------- */
.LoginBox {
    max-width: 440px;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
}
.LoginAvatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    image-rendering: pixelated;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.LoginTitle {
    margin: 14px 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #333;
}
.LoginLead {
    margin: 0 0 16px;
    font-size: 15px;
    color: #666;
}
.LoginEdition {
    display: inline-flex;
    padding: 4px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #eef2f6;
}
.LoginEdition button {
    min-width: 100px;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7785;
    font-weight: 700;
}
.LoginEdition button.active {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.LoginBox .input-group {
    display: flex;
    width: 100%;
}
.LoginBox .input-group .form-control {
    flex: 1;
    height: 52px;
    padding: 0 16px;
    border: 2px solid #dde3ea;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    box-shadow: none;
    font-size: 17px;
}
.LoginBox .input-group .form-control:focus { border-color: #2897ff; }
.LoginBox .input-group-btn,
.LoginBox .input-group-append { display: flex; width: auto; }
.LoginBox .input-group .btn {
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: #2897ff;
    font-size: 16px;
}
.LoginBox .input-group .btn:hover { background: #0f86f5; }
.LoginHint {
    margin: 12px 0 0;
    font-size: 13px;
    color: #7d8794;
}
.LoginHint[hidden] { display: none; }
.LoginAs {
    margin: 12px 0 0;
    font-size: 14px;
    color: #555;
}
.LoginAs code {
    padding: 2px 6px;
    border-radius: 4px;
    background: #eef2f6;
    color: #333;
    font-weight: 600;
}
.LoginAs[hidden] { display: none; }
.LoginPanel .panel-body { padding: 30px 20px; }

/* Pop-up version */
#Login .modal-dialog { max-width: 520px; margin: 60px auto; }
#Login .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
#Login .modal-body { padding: 30px 24px 24px; }
.LoginClose {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
}
@media (max-width: 768px) {
    #Login .modal-dialog { width: auto; max-width: min(520px, calc(100% - 24px)); margin: 20px auto; }  /* centred; Bootstrap sets 600px from 768px wide */
    .LoginBTN { padding: 8px 14px; }
}

/* ---------- Category tiles: pictures are decoration only ---------- */
/* The tile pictures overlap neighbouring tiles (e.g. the Extras parrot over Crate Keys).
   Without this, tapping that part of Crate Keys opened Extras. */
.CategoryNav a:before,
.CategoryNav a:after,
.CategoryCloud {
    pointer-events: none;
}

/* ---------- Phones: margins, artwork inside tiles, slim top bar, even spacing ---------- */
@media (max-width: 768px) {
    /* 16px side margin on everything, so rounded corners show and it matches the other pages */
    #maincontent,
    .FooterTop .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Basket: the item cards couldn't shrink below a 150px picture plus wide padding, so they
       ran off the right edge of the screen (also on the live store) */
    .CheckoutPackage.panel {
        min-width: 0;
        padding: 20px 16px;
    }
    .CheckoutPackageInfo {
        gap: 16px;
    }
    .CheckoutPackageInfo img {
        width: 110px;
    }

    /* Same 24px gap above and below the social buttons */
    div#maincontent {
        margin-bottom: 24px;
    }
    .FooterTop {
        margin-bottom: 24px;
    }

    /* Category pages wrap content in a Bootstrap column with its own 15px padding */
    #maincontent .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }
    footer .container {
        margin: 0 16px 16px;
        border-radius: 10px;
        overflow: hidden;
    }

    /* The cloud strip that hides the bottom edge of the sky on desktop isn't shown on phones,
       so fade the sky into the page background instead of ending in a hard line */
    .header {
        background-image:
            linear-gradient(to bottom, rgba(242, 247, 252, 0) calc(100% - 140px), rgb(242, 247, 252)),
            url(https://cdn.tebex.io/store/983208/templates/152043/assets/a8656b4dd567389112ac9bc79fba5ffcf0056779.png) !important;
    }

    /* Slim top bar: cart and Log in grouped, no empty slab */
    .UserBar.panel {
        padding: 12px 14px !important;
        border-radius: 10px;
        margin-bottom: 0;
    }

    /* Logged in: the skin still pokes out of the top of the bar, but stops at its bottom edge */
    .UserMenu {
        height: 104px;
        margin-top: -42px;
        margin-bottom: -12px;
    }

    /* Even 16px rhythm: bar, tiles, footer */
    .CategoryNav {
        gap: 16px;
        margin: 16px 0 24px;
    }

    /* Artwork scaled to its tile and kept inside it */
    .CategoryNav a {
        overflow: hidden;
    }
    .CategoryNav a:nth-child(1):before {
        width: 150px;
        height: 150px;
        top: 8px;
        right: 8px;
    }
    .CategoryNav a:nth-child(1):after {
        width: 108px;
        height: 108px;
        left: 6px;
        bottom: 0;
    }
    .CategoryNav a:nth-child(2):before {
        width: 92px;
        height: 92px;
        left: auto;
        right: 18px;
        bottom: 12px;
    }
    .CategoryNav a:nth-child(3):before {
        width: 108px;
        height: 108px;
        right: 14px;
        bottom: 2px;
    }
}

/* ---------- Footer: server IP and social buttons inside it on phones (hidden on bigger screens) ---------- */
.FooterServerMobile {
    display: none;
}

/* ---------- Phones: compact, quieter footer ---------- */
@media (max-width: 768px) {
    /* The IP and social buttons move inside the footer panel on phones */
    div#maincontent {
        margin-bottom: 24px;
    }
    .FooterTop {
        display: none !important;
    }

    /* One dark panel: links, social icons, then a thin divider and the small print */
    footer .container {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 22px 20px 0 !important;
    }
    footer .FooterServerMobile {
        order: 1;
    }
    footer .FooterLinks {
        order: 2;
    }
    footer .FooterCopyrights {
        order: 3;
    }

    /* Server IP: a see-through lighter panel in the footer's own style, white text */
    /* IP box and button row are the same width, so their edges line up */
    .FooterServerMobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 22px;
    }
    .FooterIP {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-sizing: border-box;
        height: 48px;
        padding: 0 7px 0 16px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px);
        cursor: default;
    }
    .FooterIP span {
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .FooterIP .ip {
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .FooterIP .count {
        padding: 6px 10px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.28);
        color: #fff;
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
    }
    /* Just the dot and the number in the chip, like the reference */
    .FooterIP .count::after {
        content: none;
    }
    .FooterIP .ip {
        white-space: nowrap;
    }

    /* Social buttons: brand colours, rounded, soft shadow */
    .FooterSocialsRow {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .FooterSocialsRow a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        color: #fff;
        fill: #fff;
    }
    /* Patron keeps its moving shine (the .PatronBTN strip inside it) */
    .FooterSocialsRow a.SocialPatron {
        position: relative;
        overflow: hidden;
    }
    .FooterSocialsRow a.SocialPatron svg {
        position: relative;
    }
    /* Discord, TikTok and YouTube match the IP box (see-through panel), with the brand colour
       in the icon; Patron stays solid gold with its shine so it's the one that stands out */
    .FooterSocialsRow a.SocialDiscord,
    .FooterSocialsRow a.SocialTikTok,
    .FooterSocialsRow a.SocialYouTube {
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px);
        box-shadow: none;
    }
    .FooterSocialsRow a.SocialDiscord { color: #7983F5; }
    .FooterSocialsRow a.SocialYouTube { color: #FF3B30; cursor: default; }
    .FooterSocialsRow a.SocialDiscord svg,
    .FooterSocialsRow a.SocialYouTube svg {
        width: 24px;
        height: 24px;
    }
    .FooterSocialsRow a.SocialPatron {
        background: #fdcb5b;
        box-shadow: 0 2px 10px rgba(253, 203, 91, 0.35);
    }
    .FooterSocialsRow svg {
        width: 22px;
        height: 22px;
        overflow: visible;
    }
    .FooterSocialsRow a.SocialPatron svg {
        filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.15));
    }

    .FooterLinks h3 {
        margin: 0 0 10px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-shadow: none;
        color: #8f9aa6;
    }
    .FooterLinks ul {
        gap: 8px 18px;
    }
    .FooterLinks a {
        font-size: 15px;
        font-weight: 500;
        color: #d3dae2;
    }

    .FooterCopyrights {
        margin: 20px -20px 0;
        padding: 16px 20px 20px;
        background: none;
        backdrop-filter: none;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
    }
    .FooterCopyrights p {
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.55;
        color: #9aa6b2;
    }
    /* One line break between the two sentences instead of a blank line */
    .FooterCopyrights br + br {
        display: none;
    }
    .FooterCopyrights a {
        color: #FFD076;
    }
}

/* Crate Keys: bright warm gold tile; the label gets a firm darker-gold drop shadow so it reads
   without darkening the tile (darker yellows turn mustard) */
.CategoryNav a:nth-child(2) {
    text-shadow: 0 3px 0 #D9850F, 0 5px 10px rgba(120, 60, 0, 0.25);
}

/* ---------- Phones: top bar buttons all the same height, evenly spaced ---------- */
@media (max-width: 768px) {
    .UserBar.panel {
        gap: 10px;
        margin-bottom: 16px; /* same gap as everywhere else (collapses with the tiles' gap on Home) */
    }
    .UserBarLeft {
        gap: 10px;
    }
    .BackBTN,
    a.BasketBTN,
    button.BasketBTN,
    .LoginBTN {
        box-sizing: border-box;
        height: 48px;
        border-radius: 10px;
    }
    .BackBTN {
        padding: 0 12px 0 8px;
        gap: 4px;
        font-size: 13px;
        white-space: nowrap;
    }
    .BackBTN .material-symbols-rounded {
        font-size: 20px;
    }
    /* The currency picker is hidden on phones; don't let its empty slot add an extra gap */
    .UserBarLeft .currency {
        display: none;
    }
    a.BasketBTN {
        width: 48px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    button.BasketBTN {
        padding: 0 10px;
        align-content: center;
    }
    .LoginBTN {
        padding: 0 12px;
        gap: 4px;
        font-size: 15px;
    }
    .LoginBTN .material-symbols-rounded {
        font-size: 18px;
    }
    /* Log in sits at the right edge of the bar */
    .UserMenu:has(.GuestAvatar) {
        margin-left: auto;
    }
}
/* Very small phones (e.g. 320px wide): tighten the top bar so Log in still fits */
@media (max-width: 359px) {
    .UserBar.panel { gap: 8px; padding-left: 10px !important; padding-right: 10px !important; }
    .UserBarLeft { gap: 8px; }
    .BackBTN { font-size: 12px; padding: 0 10px 0 6px; }
    .LoginBTN .material-symbols-rounded { display: none; }
}

/* ---------- Package size switch (Crate Keys, Extras): one card per item, sizes 15 | 6 | 3 ---------- */
.PackageGroup [data-size][hidden] {
    display: none !important;
}
.PackageSizes {
    display: inline-flex;
    gap: 4px;
    margin: 10px auto 6px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
}
.PackageSizes button {
    min-width: 56px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7785;
    font-weight: 700;
    font-size: 15px;
}
.PackageSizes button.active {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.PackageGroup .PackageTimer {
    font-size: 14px;
}

@media (max-width: 768px) {
    /* Cards use the full width between the store's 16px margins on every page */
    .PackagesGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .Package {
        width: 100%;
        box-sizing: border-box;
    }
    .Package .image img {
        max-width: 150px;
        width: 150px;
        height: auto;
    }
}

/* ---------- Product cards (Crate Keys, Extras): centred row, pictures and text lined up ---------- */
/* Any number of cards stays centred (e.g. 2 when the Halloween keys are gone), and every
   picture sits in a box of the same height so names, size switches and prices line up. */
@media (min-width: 768.02px) {
    .PackagesGrid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    .PackagesGrid > .Package {
        flex: 0 0 calc((100% - 60px) / 3);
        box-sizing: border-box;
    }
}
.PackagesGrid > .Package {
    display: flex;
    flex-direction: column;
}
.PackagesGrid > .Package .image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
}
.PackagesGrid > .Package .image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 190px;
    object-fit: contain;
}
.PackagesGrid > .Package .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}
/* Name (and countdown, if any) at the top; size switch, price and Buy at the bottom, so those
   line up across the row even when one card has a countdown line and the others don't */
.PackagesGrid > .Package .info .text {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
}
.PackagesGrid > .Package .info .text .name {
    margin-bottom: auto;
}
@media (max-width: 768px) {
    .PackagesGrid > .Package .image {
        height: 150px;
    }
    .PackagesGrid > .Package .image img {
        width: auto;
        max-width: 150px;
        max-height: 150px;
    }
}


/* ---------- Basket panel (slides in from the right) ---------- */
button.BasketBTN {
    border: 0;
    font: inherit;
    text-transform: uppercase;
}
.BasketBackdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 20, 26, 0.45);
    opacity: 0;
    visibility: hidden;
    /* visible at once when opening; hidden only after the fade-out when closing */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.BasketPanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: #fff;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
body.basket-open {
    overflow: hidden;
}
body.basket-open .BasketBackdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s;
}
body.basket-open .BasketPanel {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}
.BasketPanelHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #eef1f4;
}
.BasketPanelHead h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #333;
}
.BasketCount {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #8a96a3;
}
.BasketClose {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #f2f5f8;
    color: #555;
    font-size: 26px;
    line-height: 1;
}
.BasketItems {
    flex: 1;
    overflow-y: auto;
    padding: 8px 20px;
}
.BasketItem {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f2f5;
}
.BasketItem:last-child {
    border-bottom: none;
}
.BasketItemImage {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.BasketItemInfo {
    flex: 1;
    min-width: 0;
}
.BasketItemName {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.BasketItemGift {
    margin-top: 2px;
    font-size: 13px;
    color: #8a96a3;
}
.BasketItemInfo .package-options {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: #666;
}
.BasketItemInfo .price {
    display: block;
    margin-top: 4px;
}
.BasketItemRemove {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fdecea;
    color: #d9534f !important;
    font-size: 22px;
    line-height: 1;
}
.BasketItemRemove:hover {
    background: #f9d6d2;
}
.BasketPanelFoot {
    padding: 16px 20px 20px;
    border-top: 1px solid #eef1f4;
}
.BasketTotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
}
.BasketTotal .price {
    font-size: 24px;
}
.BasketCheckout {
    padding: 14px;
    border-radius: 10px;
    font-size: 17px;
}


/* ---------- Account on phones: 2D head button with a small Log out menu ---------- */
.AccountMobile {
    display: none;
}
@media (max-width: 768px) {
    .UserAccount {
        display: none !important;
    }
    .UserMenu:has(.AccountMobile) {
        height: auto;
        margin: 0 0 0 auto;
        overflow: visible;
    }
    .AccountMobile {
        display: block;
        position: relative;
    }
    .AccountHead {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.04);
    }
    .AccountHead img {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        image-rendering: pixelated;
    }
    .AccountMenu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 200;
        display: none;
        min-width: 200px;
        padding: 14px;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        text-align: left;
    }
    .AccountMobile.open .AccountMenu {
        display: block;
    }
    .AccountMenuName {
        margin-bottom: 10px;
        font-size: 14px;
        color: #666;
        overflow-wrap: anywhere;
    }
    .AccountMenuName b {
        color: #333;
    }
    .AccountLogout {
        display: block;
        padding: 10px;
        border-radius: 10px;
        background: #fdecea;
        color: #d9534f !important;
        font-weight: 700;
        text-align: center;
    }
}

/* ---------- Basket page: total in the price green, fixed quantities as plain text, live updates ---------- */
.CheckoutLink .price {
    font-size: 22px;
}
.quantity--fixed {
    margin: 14px 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #8a96a3;
}
.quantity input[readonly] {
    cursor: default;
}
/* While a quantity change is being saved, the items and total dim slightly */
body.basket-updating .CheckoutPackages .price,
body.basket-updating [data-basket-total] {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

/* ---------- Basket page: subtle remove button in each item's top-right corner ---------- */
.CheckoutPackage.panel .buttons {
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
}
.CheckoutPackage.panel .buttons a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #f2f5f8 !important;
    color: #9aa6b2 !important;
    font-size: 14px !important;
    border: 0 !important;
    box-shadow: none !important;
}
.CheckoutPackage.panel .buttons a:hover {
    background: #fdecea !important;
    color: #d9534f !important;
}

/* ---------- Basket page: order summary ---------- */
.CheckoutSummary.panel {
    max-width: 525px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.SummaryDeliver {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f4;
}
.SummaryHead {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    image-rendering: pixelated;
}
.SummaryDeliverText {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}
.SummaryLabel {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #8a96a3;
}
.SummaryDeliverText b {
    font-size: 18px;
    color: #333;
    overflow-wrap: anywhere;
}
.SummaryChange {
    font-size: 14px;
    font-weight: 600;
    color: #2897ff !important;
    white-space: nowrap;
}
.SummaryTotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 16px 0 14px;
    font-size: 17px;
    font-weight: 700;
    color: #333;
}
.SummaryTotal .price {
    font-size: 26px;
}
.SummaryCheckout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
}
.SummaryCheckout .material-symbols-rounded {
    font-size: 20px;
}
.SummaryNote {
    margin: 10px 0 0;
    font-size: 13px;
    color: #8a96a3;
    text-align: center;
}

/* "-" is greyed out at quantity 1 */
.quantity button[disabled] {
    opacity: 0.35;
    cursor: default;
}


/* ---------- Cart button with items ---------- */
.CartBadge {
    display: none;
}
@media (max-width: 768px) {
    /* Phones: a 48px square like the other buttons, darker icon, blue count badge in the corner */
    button.BasketBTN {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        padding: 0;
        background: #eef4fb;
        color: #2f3a45;
    }
    button.BasketBTN .CartInfo {
        display: none;
    }
    button.BasketBTN .CartIcon {
        font-size: 24px;
        line-height: 1;
    }
    .CartBadge {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        box-sizing: border-box;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #2897ff;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
    }
}

/* ---------- Basket quantity stepper: one outlined pill [ - 2 + ], only as wide as its contents ---------- */
.quantity:not(.quantity--fixed) {
    display: inline-flex;
    align-items: center;
    justify-self: start;      /* it's a grid item: don't stretch to the width of a long package name */
    align-self: start;
    width: max-content;
    gap: 0;
    margin: 14px 0 6px;
    padding: 3px;
    border: 1.5px solid #e1e7ee;
    border-radius: 12px;
    background: #fff;
}
.quantity:not(.quantity--fixed) button {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #2f3a45 !important;
    box-shadow: none !important;
    text-shadow: none;
}
.quantity:not(.quantity--fixed) button:hover,
.quantity:not(.quantity--fixed) button:focus-visible {
    background: #eef4fb !important;
    color: #2897ff !important;
}
.quantity:not(.quantity--fixed) button .material-symbols-rounded {
    font-size: 20px;
}
.quantity:not(.quantity--fixed) input {
    position: static;
    flex: none;
    width: 34px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #333;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    -moz-appearance: textfield;
}
.quantity:not(.quantity--fixed) button[disabled] {
    opacity: 1;
    color: #c5ccd4 !important;
    background: transparent !important;
}


/* ---------- Patrons page: intro, top-3 podium, searchable list ---------- */
.PatronHero.panel {
    position: relative;
    margin-bottom: 24px;
    padding: 22px 26px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.PatronHero h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: #333;
}
.PatronHero p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #5b6672;
}
.PatronHero .PatronMeta {
    margin: 12px 0 0;
    font-size: 13px;
    color: #8a96a3;
}

/* Podium: #4, #2, #1, #3, #5 side by side; #1 stands tallest (phones show #2, #1, #3) */
.PatronPodium {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 16px;
    margin: 0 0 32px;
}
.PatronPlace {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.PatronPlaceBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 14px 10px 12px;
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}
/* --w is the skin's width; the crown is sized and placed from it, the same way as on the list cards */
.PatronFigure {
    --w: 64px;
    position: relative;
    margin-top: 14px;
}
.PatronPlace--1 .PatronFigure { --w: 86px; margin-top: 18px; }
.PatronPlace--2 .PatronFigure,
.PatronPlace--3 .PatronFigure { --w: 74px; }
.PatronBody {
    display: block;
    width: var(--w);
    aspect-ratio: 180 / 432;  /* mc-heads body size: keeps the space while the skin loads */
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.15));
}
/* Gold crown on each podium place */
.PatronFigure::after {
    content: "";
    position: absolute;
    top: calc(var(--w) * -0.55);
    left: 0;
    right: 0;
    height: calc(var(--w) * 1.75);
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/f0bb93350f4f8335ed699b5d54647088032c7590.png) bottom / cover;
    transform: rotate(-2deg);
    pointer-events: none;
}
.PatronPlace .PatronName {
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #333;
}
.PatronStep {
    width: 100%;
    border-radius: 0 0 12px 12px;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}
.PatronPlace--1 .PatronStep { height: 72px; padding-top: 16px; background: linear-gradient(180deg, #f7c948, #e8ac1c); }
.PatronPlace--2 .PatronStep { height: 54px; padding-top: 8px;  background: linear-gradient(180deg, #c7d0da, #a3aebb); }
.PatronPlace--3 .PatronStep { height: 42px; padding-top: 2px;  background: linear-gradient(180deg, #e7ac7b, #c7814a); }
.PatronPlace--4 .PatronStep,
.PatronPlace--5 .PatronStep { height: 30px; padding-top: 0; font-size: 20px; line-height: 30px; background: linear-gradient(180deg, #aab6c3, #8d9aa9); }
.PatronPlace.is-me .PatronPlaceBody { box-shadow: 0 0 0 2.5px #2897ff, 0 2px 5px rgba(0, 0, 0, 0.12); }
.PatronPlace.is-loading .PatronPlaceBody { height: 250px; }
.PatronPlace--1.is-loading .PatronPlaceBody { height: 300px; }
.PatronPlace--2.is-loading .PatronPlaceBody,
.PatronPlace--3.is-loading .PatronPlaceBody { height: 270px; }

/* List */
.PatronListHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}
.PatronListHead h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #444;
}
.PatronSearch {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 240px;
    max-width: 55%;
    margin: 0;
    padding: 0 12px;
    border: 1.5px solid #e1e7ee;
    border-radius: 10px;
    background: #fff;
    font-weight: 400;
}
.PatronSearch:focus-within { border-color: #2897ff; }
.PatronSearch .material-symbols-rounded { font-size: 20px; color: #8a96a3; }
.PatronSearch input {
    width: 100%;
    height: 40px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: #333;
}
.PatronList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.PatronRow {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 190px;
    min-width: 0;
    padding: 16px 10px 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.PatronRow[hidden],
.PatronBoard:not(.is-searching) .PatronRow.is-top,
.PatronBoard:not(.is-searching) .PatronRow.is-top5 { display: none; }
.PatronRow > * { flex: none; }  /* the tall skin is cropped by the card; it must not squash the name */
.PatronRow:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 9px rgba(0, 0, 0, 0.15);
}
.PatronRank {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #b3bcc6;
}
.PatronRow .PatronName {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #6f7a86;
}
/* The skin is cropped by the card's bottom edge, so only the head and shoulders show */
.PatronSkin {
    position: relative;
    margin-top: 30px;
}
.PatronBust {
    display: block;
    width: 100px;
    aspect-ratio: 180 / 432;
    margin-top: -25px;
}
/* Gold crown on every head */
.PatronSkin::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 175px;
    background: url(https://cdn.tebex.io/store/983208/templates/152043/assets/f0bb93350f4f8335ed699b5d54647088032c7590.png) bottom / cover;
    transform: rotate(-2deg);
    pointer-events: none;
}
.PatronYou {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #2897ff;
}
.PatronRow.is-me { box-shadow: 0 0 0 2px #2897ff, 0 1px 3px rgba(0, 0, 0, 0.1); }
.PatronRow.is-top .PatronRank { color: #e0a312; }
.PatronRow.is-loading { height: 190px; }
.is-loading {
    background: linear-gradient(90deg, #fff 0%, #f2f5f8 50%, #fff 100%) 0 0 / 200% 100%;
    animation: patronShimmer 1.2s ease-in-out infinite;
}
@keyframes patronShimmer { to { background-position: -200% 0; } }
/* While searching, the list keeps some height so the page doesn't jump up under the search box */
.PatronBoard.is-searching .PatronList { min-height: 70vh; align-content: start; }
.PatronEmpty {
    margin: 18px 0;
    text-align: center;
    color: #8a96a3;
}

@media (max-width: 768px) {
    .PatronHero.panel { padding: 22px 18px 18px; }
    .PatronHero h1 { font-size: 26px; }
    .PatronPodium { gap: 8px; }
    .PatronPlaceBody { padding: 10px 6px; }
    .PatronPodium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .PatronPlace--4, .PatronPlace--5 { display: none; }
    .PatronBoard:not(.is-searching) .PatronRow.is-top5:not([hidden]) { display: flex; }
    .PatronFigure,
    .PatronPlace--2 .PatronFigure,
    .PatronPlace--3 .PatronFigure { --w: 58px; }
    .PatronPlace--1 .PatronFigure { --w: 70px; }
    .PatronPlace .PatronName { font-size: 13px; }
    .PatronStep { font-size: 20px; }
    .PatronPlace--1 .PatronStep { height: 56px; padding-top: 12px; }
    .PatronPlace--2 .PatronStep { height: 40px; padding-top: 4px; }
    .PatronPlace--3 .PatronStep { height: 28px; padding-top: 0; }
    .PatronList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .PatronRow, .PatronRow.is-loading { height: 180px; }
    .PatronListHead h2 { font-size: 18px; }
    .PatronSearch { width: auto; max-width: none; flex: 1; }
}


/* ---------- No focus outline after a mouse click or tap; keyboard users still get one ---------- */
:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible) {
    outline: none !important;
}
:focus-visible {
    outline: 2px solid #2897ff;
    outline-offset: 2px;
}

/* ---------- Desktop footer: smaller gap between the social/IP row and the footer box ---------- */
@media (min-width: 768.02px) {
    footer > .container { margin-top: 12px; }
}

/* Tebex's base CSS turns every clicked link blue (a:focus). Link-buttons keep their own colour instead. */
.BackBTN:focus:not(:hover) { color: #333333; }
a.BasketBTN:focus:not(:hover) { color: #b2bbc7; }

/* ---------- Currency picker (desktop): quick, solid menu in the store's style ---------- */
button.btn-currency { transition: background 0.15s ease, color 0.15s ease !important; }
button.btn-currency:hover,
.currency.open button.btn-currency { background: #eef4fb; color: #2897ff; }
.currency .dropdown-menu {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    min-width: 0;
    width: 150px;
    margin-top: 6px;
    padding: 6px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 30, 50, 0.18);
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    z-index: 1060;
}
.currency.open .dropdown-menu {
    display: grid;
    animation: currencyMenuIn 0.12s ease-out;
}
@keyframes currencyMenuIn { from { opacity: 0; transform: translateY(-4px); } }
.currency .dropdown-menu > li > a {
    padding: 7px 0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #4b5563;
    transition: none !important;
}
.currency .dropdown-menu > li > a:hover,
.currency .dropdown-menu > li > a:focus { background: #eef4fb; color: #2897ff; }
.currency .dropdown-menu > .active > a,
.currency .dropdown-menu > .active > a:hover,
.currency .dropdown-menu > .active > a:focus { background: #2897ff; color: #fff; }

/* ---------- Package pop-up (Buy): picture, title and price on top, store-style buttons ---------- */
#popup-modal .PackageModal { width: auto; max-width: 560px; margin: 8vh auto; padding: 0 12px; }
.PackageModal .modal-content {
    position: relative;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 30, 50, 0.3);
    overflow: hidden;
}
.PackageClose.close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f2f5f8;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    color: #8a96a3;
    text-shadow: none;
    opacity: 1;
}
.PackageClose.close:hover { background: #fde8e8; color: #d9534f; opacity: 1; }
.PackageHead {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 56px 18px 22px;
    background: linear-gradient(180deg, #f5f9fe 0%, #fff 100%);
}
.PackageImage {
    width: 96px;
    height: 96px;
    flex: none;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
}
.PackageHead .modal-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: #333;
}
.PackagePrice { margin: 0; font-size: 14px; font-weight: 600; color: #5b6672; }
.PackagePrice .price { font-size: 24px; }
.PackageBody {
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px 22px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}
.PackageBody p:last-child { margin-bottom: 0; }
.PackageFooter.modal-footer {
    padding: 16px 22px 20px;
    border-top: 1px solid #eef1f4;
    text-align: left;
}
.PackageFooter .package-footer-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.PackageFooter .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 11px 20px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: none;
    box-shadow: none;
}
.PackageFooter .PackageAdd { flex: 1; background: #2897ff; color: #fff; }
.PackageFooter .PackageAdd:hover, .PackageFooter .PackageAdd:focus { background: #0f86f5; color: #fff; }
.PackageFooter .PackageAdd .material-symbols-rounded { font-size: 20px; }
.PackageFooter .PackageRemove { flex: 1; background: #fde8e8; color: #d9534f; }
.PackageFooter .PackageRemove:hover, .PackageFooter .PackageRemove:focus { background: #fbd5d5; color: #c9302c; }
.PackageFooter .PackageGift { background: #f2f5f8; color: #4b5563; }
.PackageFooter .PackageGift:hover, .PackageFooter .PackageGift:focus { background: #e8eef5; color: #333; }
.PackageFooter .PackageGift .fa { font-size: 11px; }
.PackageFooter .gift-fields { display: none; margin-top: 12px; }
.PackageGiftForm { display: flex; gap: 8px; }
.PackageGiftForm .form-control {
    height: 44px;
    border: 1.5px solid #e1e7ee;
    border-radius: 10px;
    box-shadow: none;
    font-size: 15px;
}
.PackageGiftForm .form-control:focus { border-color: #2897ff; box-shadow: none; }
.PackageGiftForm .btn { flex: none; }
@media (max-width: 480px) {
    #popup-modal .PackageModal { margin: 12px auto; }
    .PackageHead { gap: 14px; padding: 18px 52px 14px 16px; }
    .PackageImage { width: 72px; height: 72px; }
    .PackageHead .modal-title { font-size: 19px; }
    .PackageBody { padding: 4px 16px 14px; }
    .PackageFooter.modal-footer { padding: 14px 16px 16px; }
    .PackageFooter .PackageGift { flex: 1; }
}

/* ---------- Desktop: Log in button lines up with the other buttons in the bar ---------- */
@media (min-width: 768.02px) {
    .UserMenu a .LoginBTN { padding: 12px 18px; }
}

/* ---------- Pictures can't be dragged around (clouds, logo, skins, rank pictures) ---------- */
img,
a:has(img),
.CategoryNav a,
.BackBTN,
.BasketBTN,
.FooterSocials a,
.FooterSocialsRow a,
.RanksUpgradeLink,
.RankUpgradeCard,
.RankCardTop,
.btn,
.LogoLink {
    -webkit-user-drag: none;
}
img { user-select: none; }

/* ---------- Pop-ups don't shift the page sideways ---------- */
/* Opening a pop-up hides the page scrollbar. Keeping its space reserved means nothing moves;
   Bootstrap's own make-up padding is then not needed. */
html { scrollbar-gutter: stable; }
body.modal-open { padding-right: 0 !important; }

/* ---------- Desktop: 30px between the page content and the social/IP row, like the other gaps ---------- */
@media (min-width: 768.02px) {
    div#maincontent { margin-bottom: 30px; }
    #maincontent .CategoryNav { margin-bottom: 0; }
}

/* ---------- Desktop footer: server address + players online as one bar, same size as the social buttons ---------- */
@media (min-width: 768.02px) {
    .FooterTop .IP {
        display: flex;
        align-items: stretch;
        height: 44px;
        border-radius: 6px;
        background: var(--footer-btn);
        overflow: hidden;
        cursor: default;
    }
    .FooterTop .IP > span {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 16px;
        border-radius: 0;
        background: none;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    .FooterTop .IP .ip span { padding: 0; background: none; border-radius: 0; }
    .FooterTop .IP .ip { cursor: pointer; transition: background 0.15s ease; }
    .FooterTop .IP .ip:hover { background: var(--footer-btn-hover); }
    .FooterTop .IP .ip .material-symbols-rounded { font-size: 17px; opacity: 0.6; }
    .FooterTop .IP .ip.is-copied { background: #2f8a4a; }
    .FooterTop .IP .ip.is-copied .material-symbols-rounded { opacity: 1; }
    .FooterTop .IP .count { border-left: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ---------- Desktop: slimmer top bar (132px -> 108px); the leopard lies on the Ranks tile
   instead of reaching up into the bar ---------- */
@media (min-width: 768.02px) {
    .UserBar.panel { padding-top: 13px; padding-bottom: 13px; }
    /* The cat starts about 53px into its 212px picture, so -70px puts its back ~17px above the tile */
    .CategoryNav a:nth-child(1):before { top: -70px; }
}

/* ---------- Desktop: player skin (or guest Steve) stands on the bar's bottom edge ----------
   The skin box sits flush with the bottom of the 108px bar, so the head pokes out a little above
   and the skin is cut off exactly at the bar's edge. Its middle then lines up with the
   middle of the bar, so "Log in" or the name/"Click to logout" text sits level with the other buttons. */
@media (min-width: 768.02px) {
    .UserMenu {
        align-self: flex-end;
        height: 130px;          /* the head pokes ~22px above the bar */
        margin: -37px 0 -13px;  /* -13px = the bar's bottom padding; -37px keeps the bar at 108px */
    }
    /* The link is 154px tall so its middle lands on the bar's middle and the text beside it lines up.
       The skin is 76px wide and hangs from the top: the head stays at the same height and the bar's
       bottom edge cuts it off at the knees, so the head and outfit are bigger. */
    .UserMenu a { height: 154px; }
    .UserMenu a > img { width: 76px; height: auto; align-self: flex-start; }
}

/* ---------- Desktop footer: calm social buttons in the IP bar's colour, icons in their brand colour.
   Patrons stays solid gold with its shine so it's the one that stands out. ---------- */
@media (min-width: 768.02px) {
    .FooterSocials a,
    .FooterSocials a.SocialDiscord,
    .FooterSocials a.SocialTikTok,
    .FooterSocials a.SocialYouTube {
        background: var(--footer-btn);
    }
    .FooterSocials a.SocialDiscord { color: #8c96ff; }
    .FooterSocials a.SocialYouTube { color: #ff4d4d; }
    .FooterSocials a:hover,
    .FooterSocials a.SocialDiscord:hover,
    .FooterSocials a.SocialTikTok:hover,
    .FooterSocials a.SocialYouTube:hover {
        background: var(--footer-btn-hover);
        transform: translateY(-3px);
    }
    .FooterSocials a.SocialDiscord:hover { color: #8c96ff; }
    .FooterSocials a.SocialYouTube:hover { color: #ff4d4d; }
}

/* ---------- Desktop footer box: three columns that start on the same line, links under their headings ---------- */
@media (min-width: 768.02px) {
    footer > .container {
        grid-template-columns: 2fr 1fr 1fr;   /* text | Quick Navigation | Legal */
        column-gap: 32px;      /* the headings never run into each other */
        align-items: start;
        margin-bottom: 30px;   /* space below the box, like the other gaps */
        padding: 32px 36px;
    }
    .FooterCopyrights {
        grid-column: 1;
        width: auto;
        max-width: 420px;
        align-self: start;
        align-items: flex-start;
        padding-left: 0;
    }
    .FooterCopyrights p { margin: 2px 0 0; line-height: 1.55; }
    .FooterLinks h3 { margin: 0 0 16px; }
    .FooterLinks ul {
        margin: 0;
        padding: 0;            /* links line up with their heading */
        gap: 11px;             /* 34px from one link to the next (was 43px) */
    }
}
/* Narrow desktops and tablets: give the link columns enough room for "Quick Navigation" */
@media (min-width: 768.02px) and (max-width: 991px) {
    footer > .container { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* ---------- Cart button hover: same light-blue as the currency picker (blue = things you click) ---------- */
.BasketBTN { transition: background 0.15s ease, color 0.15s ease !important; }
.BasketBTN:hover,
.BasketBTN:focus-visible {
    background: #eef4fb;
    color: #2897ff;
}
.BasketBTN:hover .CartIcon,
.BasketBTN:hover .CartInfo { color: inherit; }

/* ---------- Logo shine: one slow light sweep across the logo (desktop) ----------
   A brightened copy of the logo sits on top, seen through a soft vertical band (.LogoShine's mask).
   The band slides across while the copy inside slides back the same amount, so the copy stays
   exactly on the logo. Only transforms move, which the graphics card handles without redrawing,
   so the sweep stays smooth. The light lands on the logo only, never on the sky around it. */
.LogoLink { position: relative; display: inline-block; line-height: 0; }
.header .logo .LogoShine { display: none; margin: 0; }  /* Tebex's base CSS gives logo spans a heading margin */
@media (min-width: 768.02px) {
    .header .logo.is-shining .LogoShine {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(105deg, transparent 38%, rgba(0, 0, 0, 0.95) 50%, transparent 62%);
                mask-image: linear-gradient(105deg, transparent 38%, rgba(0, 0, 0, 0.95) 50%, transparent 62%);
        will-change: transform;
        animation: logoShineBand 1.6s ease-in-out 0.3s 1 both;
    }
    .header .logo.is-shining .LogoShine img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: brightness(2.4) saturate(0.4);
        will-change: transform;
        animation: logoShineImage 1.6s ease-in-out 0.3s 1 both;
    }
    /* On hover the sweep starts straight away */
    .header .logo.is-shining.is-quick .LogoShine,
    .header .logo.is-shining.is-quick .LogoShine img { animation-delay: 0s; }
}
@keyframes logoShineBand  { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes logoShineImage { from { transform: translateX(100%); }  to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .header .logo.is-shining .LogoShine { display: none; }
}

/* ---------- Cart with items (desktop): a blue "Checkout" button with the item count ---------- */
.CartCTA { display: none; }
@media (min-width: 768.02px) {
    button.BasketBTN {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 12px 0 14px;
        border-radius: 10px;
        background: #2897ff;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    button.BasketBTN:hover,
    button.BasketBTN:focus-visible { background: #0f86f5; color: #fff; }
    button.BasketBTN .CartIcon { font-size: 20px; color: inherit; }
    button.BasketBTN .CartInfo { display: none; }
    button.BasketBTN .CartCTA { display: inline; color: inherit; }
    button.BasketBTN .CartBadge {
        display: inline-flex;
        position: static;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border: 0;
        border-radius: 6px;
        background: #fff;
        color: #2897ff;
        font-size: 13px;
        font-weight: 800;
        box-shadow: none;
    }
    button.BasketBTN:hover .CartIcon,
    button.BasketBTN:hover .CartInfo { color: inherit; }
}

/* "Added to your cart" line at the top of the basket panel, shown when it opens after adding something */
.BasketAdded {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 20px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e9f7ee;
    color: #1f7a3a;
    font-size: 14px;
    font-weight: 700;
}
.BasketAdded[hidden] { display: none; }
.BasketAdded .material-symbols-rounded { font-size: 20px; }

/* ---------- Narrow desktops and tablets (769-1199px): the page title sits in the space between the
   left buttons and the account area instead of on top of them, and the cart button shows just the
   icon and count ---------- */
@media (min-width: 768.02px) and (max-width: 1199px) {
    .UserBar.panel { gap: 16px; }
    .CurrentPage {
        position: static;
        flex: 1;
        min-width: 0;
        font-size: 22px;
        line-height: 1.15;
    }
    .CurrentPage span { font-size: 14px; }
    button.BasketBTN .CartCTA { display: none; }
    /* The empty cart is just its icon too (a 48px square), like the cart with items */
    a.BasketBTN { justify-content: center; width: 48px; padding: 0; }
    a.BasketBTN .CartInfo { display: none; }
}

/* ---------- After paying in the pop-up checkout: thank-you message in the summary box ---------- */
.SummaryDone { padding: 8px 0 0; text-align: center; }
.SummaryDone[hidden] { display: none; }
.SummaryDone .material-symbols-rounded { font-size: 48px; color: #24883F; }
.SummaryDone h3 { margin: 6px 0 6px; font-size: 22px; font-weight: 800; color: #333; }
.SummaryDone p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #5b6672; }
.CheckoutPackages[hidden],
.CheckoutSummary form[hidden] { display: none !important; }

/* ---------- Login page: the login box centred, sidebar modules (e.g. Top Patron) underneath at the same width ---------- */
.body.LoginPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.body.LoginPage > .content,
.body.LoginPage > .sidebar {
    float: none;
    width: 100%;
    max-width: 560px;
    margin: 0;
    padding: 0;
}
.body.LoginPage > .sidebar:empty { display: none; }
.body.LoginPage .LoginPanel { margin-bottom: 0; border-radius: 12px; }
.body.LoginPage > .sidebar .panel { margin-bottom: 0; border-radius: 12px; overflow: hidden; }

/* ---------- Patrons podium: a little more "legendary" ----------
   Top 3: a faint gold / silver / bronze tint with a thin matching edge, and a soft spotlight behind
   the skin. #1 also gets the slow gold glow used for the Lion rank and a gold name. #4 and #5 stay plain. */
.PatronPlaceBody { position: relative; isolation: isolate; }
.PatronFigure::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: -1;
    width: calc(var(--w) * 2.4);
    height: calc(var(--w) * 2.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.PatronPlace--1 .PatronPlaceBody {
    background: linear-gradient(180deg, #fff6dc 0%, #ffffff 70%);
    box-shadow: inset 0 0 0 2px rgba(240, 190, 60, 0.75), 0 2px 5px rgba(0, 0, 0, 0.12), 0 0 18px rgba(255, 192, 72, 0.35);
    animation: PodiumGoldGlow 2.4s ease-in-out infinite alternate;
}
.PatronPlace--2 .PatronPlaceBody {
    background: linear-gradient(180deg, #f1f4f8 0%, #ffffff 70%);
    box-shadow: inset 0 0 0 2px rgba(170, 182, 196, 0.7), 0 2px 5px rgba(0, 0, 0, 0.12);
}
.PatronPlace--3 .PatronPlaceBody {
    background: linear-gradient(180deg, #fbefe4 0%, #ffffff 70%);
    box-shadow: inset 0 0 0 2px rgba(205, 140, 90, 0.6), 0 2px 5px rgba(0, 0, 0, 0.12);
}
.PatronPlace--1 .PatronFigure::before { background: radial-gradient(circle, rgba(255, 200, 70, 0.45) 0%, rgba(255, 200, 70, 0) 65%); }
.PatronPlace--2 .PatronFigure::before { background: radial-gradient(circle, rgba(170, 185, 205, 0.35) 0%, rgba(170, 185, 205, 0) 65%); }
.PatronPlace--3 .PatronFigure::before { background: radial-gradient(circle, rgba(220, 150, 95, 0.3) 0%, rgba(220, 150, 95, 0) 65%); }
.PatronPlace--1 .PatronName { color: #a67400; }
@keyframes PodiumGoldGlow {
    from { box-shadow: inset 0 0 0 2px rgba(240, 190, 60, 0.6), 0 2px 5px rgba(0, 0, 0, 0.12), 0 0 10px rgba(255, 192, 72, 0.25); }
    to   { box-shadow: inset 0 0 0 2px rgba(240, 190, 60, 0.95), 0 2px 5px rgba(0, 0, 0, 0.12), 0 0 26px rgba(255, 192, 72, 0.6); }
}
/* Keep the blue "this is you" ring on your own podium card */
.PatronPlace.is-me .PatronPlaceBody { box-shadow: 0 0 0 2.5px #2897ff, 0 2px 5px rgba(0, 0, 0, 0.12); animation: none; }
@media (prefers-reduced-motion: reduce) {
    .PatronPlace--1 .PatronPlaceBody { animation: none; }
}

/* ---------- Edge cases from the review ---------- */
/* At exactly 768px wide (some iPads) Bootstrap's 750px container width also applies; on phone
   layouts the footer box should just fill the space between its margins */
@media (max-width: 768px) {
    footer > .container { width: auto; }
}
/* Tebex's base CSS shrinks and fades every <small> in the checkout form; keep the currency next to the
   order total like every other price */
.CheckoutSummary form.gateway .price small { font-size: 0.7em; opacity: 1; }

/* ---------- Patron crowns: richer gold that sits on the head, and a glint on #1's crown ---------- */
.PatronSkin::after,
.PatronFigure::after {
    filter: saturate(1.4) brightness(1.08) contrast(1.06) drop-shadow(0 2px 1.5px rgba(70, 45, 0, 0.45));
}
.PatronSparkle {
    position: absolute;
    z-index: 2;
    top: calc(var(--w) * -0.28);
    left: calc(var(--w) * 0.66);
    width: 24px;
    height: 24px;
    /* The glow sits on this outer box and the star shape on ::before, so the shape doesn't cut off the glow */
    filter: drop-shadow(0 0 3px rgba(255, 170, 0, 1)) drop-shadow(0 0 7px rgba(255, 190, 40, 0.8));
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}
/* Plays once each time the mouse moves onto a patron (podium card or list card) */
.PatronPlace:hover .PatronSparkle,
.PatronRow:hover .PatronSparkle {
    animation: CrownSparkle 0.9s ease-out 1;
}
/* List cards: the skin there is 100px wide and pulled up 25px under its crown */
.PatronSkin .PatronSparkle {
    top: -24px;
    left: 66px;
}
.PatronSparkle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #ffffff 0%, #fff6c8 35%, #ffc21a 100%);
    clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
}
@keyframes CrownSparkle {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    35%  { transform: scale(1) rotate(45deg); opacity: 1; }
    60%  { transform: scale(0.85) rotate(80deg); opacity: 1; }
    100% { transform: scale(0) rotate(120deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .PatronSparkle { display: none; }
}

/* ---------- Top bar (desktop): every button the same height ----------
   Back and the empty cart were 54px, currency and Log in 44px, the blue Checkout 44px. All 48px now. */
@media (min-width: 768.02px) {
    .UserBarLeft .BackBTN,
    .UserBarLeft button.btn-currency,
    .UserBarLeft .BasketBTN,
    .UserMenu .LoginBTN {
        box-sizing: border-box;
        height: 48px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .UserBarLeft button.btn-currency { display: inline-flex; align-items: center; gap: 4px; }
    .UserBarLeft a.BasketBTN { display: flex; align-items: center; }
}

/* ---------- Package pop-up while it loads (layout.html): description lines and a button, shimmering ---------- */
.PackageSkeleton {
    display: block;
    height: 14px;
    margin: 6px 0 10px;
    border-radius: 6px;
}
.PackageSkeleton--short { width: 60%; }
.PackageSkeletonButton {
    display: block;
    flex: 1;
    height: 44px;
    border-radius: 10px;
}
.PackageSkeleton.is-loading,
.PackageSkeletonButton.is-loading { background: linear-gradient(90deg, #eef2f6 0%, #e1e7ee 50%, #eef2f6 100%) 0 0 / 200% 100%; }

/* ---------- Cloud strip: two more clouds (header.twig) so wide screens (over ~2,300px) have no gap ---------- */
.CloudsBar img:nth-child(7) { margin-top: 40px; }
.CloudsBar img:nth-child(8) { margin-top: 70px; }

/* ---------- Footer colour: charcoal (the Minecraft picture shows faintly through it) ----------
   The social buttons and the IP bar above it use the same family. Dark mode sets its own colours. */
:root {
    --footer-overlay: linear-gradient(45deg, rgba(46, 51, 59, 0.94), rgba(29, 33, 40, 0.97));
    --footer-btn: #343a44;
    --footer-btn-hover: #414854;
}
footer .container {
    background: var(--footer-overlay), var(--footer-bg, none);
    background-size: cover !important;
    background-position: left;
}
/* The lighter box behind "We're not affiliated with Mojang AB…" stopped short of the edges; gone */
.FooterCopyrights { background: none; }

/* ---------- Narrow desktops (769-1199px): the 76px skin leaves too little room for the page title,
   so the skin is 72px there and sits a little closer to the name ---------- */
@media (min-width: 768.02px) and (max-width: 1199px) {
    .UserMenu a { gap: 12px; }
    .UserMenu a > img { width: 72px; }
}

/* ---------- Light / dark mode button (top bar) ---------- */
button.ThemeBTN {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;  /* same as the other top bar buttons */
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
    color: #b2bbc7;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
button.ThemeBTN:hover { background: #eef4fb; color: #2897ff; }
button.ThemeBTN .material-symbols-rounded { font-size: 22px; }
/* Moon in light mode, sun in dark mode (!important: other icon rules set display too) */
html:not([data-theme="dark"]) .ThemeBTN .ThemeIconLight,
html[data-theme="dark"] .ThemeBTN .ThemeIconDark { display: none !important; }
/* Phones: the button sits in the top bar next to the cart, the same 48px square as the cart.
   To make room, Back to Home shows just its arrow there (a 48px square too). */
/* Desktop: right side of the bar, just left of the name / Log in (the title is centred over the
   whole bar, so the button sits above it like the other buttons) */
.UserBar > button.ThemeBTN { position: relative; z-index: 10; flex: none; margin-left: auto; margin-right: 20px; }
@media (max-width: 768px) {
    /* Phones: straight after the cart (the account is pushed right by its own margin) */
    .UserBar > button.ThemeBTN { width: 48px; height: 48px; margin: 0; border-radius: 10px; }
    .UserBarLeft .BackBTN:not(.BackBTN--site) { justify-content: center; width: 48px; padding: 0; gap: 0; }
    .UserBarLeft .BackBTN .BackLabel { display: none; }
    .UserBarLeft .BackBTN .material-symbols-rounded { font-size: 22px; }
}

/* ---------- Dark mode ----------
   Night-time CatCraft: a starry night sky, night clouds, slate-navy boxes. The brand colours
   (gold Back/Patron, blue buttons, the category tiles) stay the same. Everything is under
   html[data-theme="dark"], so the light look is untouched. */
html[data-theme="dark"] {
    color-scheme: dark;
    --d-bg: #141b2b;        /* page; also the colour of the night clouds, so the cloud strip blends in */
    --d-panel: #1c2538;     /* boxes */
    --d-panel-2: #253049;   /* hover / raised */
    --d-border: #2f3b52;
    --d-text: #e6ebf0;
    --d-text-2: #b9c3cf;
    --d-muted: #8a96a3;
    --d-green: #4cc46e;     /* prices and ticks: the light theme's green is too dark on navy */
    --d-red: #ff7a75;
}
html[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); }

/* Sky and clouds: night versions of the same pixel art. The cloud pictures are <img>s; the day picture
   is moved out of view and the night one drawn as the image's background, so it works in every browser. */
/* The bottom of the sky fades into the page, so there's no hard line where the sky picture ends
   (the day clouds hide that edge; the dark night clouds don't) */
html[data-theme="dark"] .header {
    background-image: linear-gradient(to bottom, rgba(20, 27, 43, 0) calc(100% - 190px), rgba(20, 27, 43, 0.85) calc(100% - 40px), var(--d-bg)), var(--sky-night);
    background-position: center top;
}
html[data-theme="dark"] .Clouds img,
html[data-theme="dark"] .CloudsBar img {
    object-position: -99999px 0;
    background: var(--clouds-night) 0 0 / 100% 100% no-repeat;
}
html[data-theme="dark"] .Clouds img { filter: none; }
@media (max-width: 768px) {
    html[data-theme="dark"] .header {
        background-image:
            linear-gradient(to bottom, rgba(20, 27, 43, 0) calc(100% - 140px), var(--d-bg)),
            var(--sky-night) !important;
    }
}

/* Top bar */
html[data-theme="dark"] .UserBar.panel {
    background: var(--d-panel);
    border-color: var(--d-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .CurrentPage { color: var(--d-text); text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .CurrentPage span { color: var(--d-muted); }
html[data-theme="dark"] button.btn-currency,
html[data-theme="dark"] .BasketBTN,
html[data-theme="dark"] a.BasketBTN:focus:not(:hover),
html[data-theme="dark"] button.ThemeBTN {
    background: rgba(255, 255, 255, 0.04);
    color: var(--d-muted);
}
html[data-theme="dark"] button.btn-currency:hover,
html[data-theme="dark"] .currency.open button.btn-currency,
html[data-theme="dark"] button.ThemeBTN:hover {
    background: var(--d-panel-2);
    color: #5fb0ff;
}
html[data-theme="dark"] button.ThemeBTN .ThemeIconLight { color: #fdcb5b; }  /* the sun is gold */
html[data-theme="dark"] .currency .dropdown-menu {
    background: var(--d-panel-2);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .currency .dropdown-menu > li > a { color: var(--d-text-2); }
html[data-theme="dark"] .currency .dropdown-menu > li > a:hover,
html[data-theme="dark"] .currency .dropdown-menu > li > a:focus { background: #2e3b52; color: #5fb0ff; }
html[data-theme="dark"] .currency .dropdown-menu > .active > a,
html[data-theme="dark"] .currency .dropdown-menu > .active > a:hover,
html[data-theme="dark"] .currency .dropdown-menu > .active > a:focus { background: #2897ff; color: #fff; }

/* Patrons page */
html[data-theme="dark"] .PatronHero.panel { background: var(--d-panel); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .PatronHero h1 { color: var(--d-text); }
html[data-theme="dark"] .PatronHero p { color: var(--d-text-2); }
html[data-theme="dark"] .PatronHero .PatronMeta { color: var(--d-muted); }
html[data-theme="dark"] .PatronPlaceBody { background: var(--d-panel); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .PatronPlace--1 .PatronPlaceBody { background: linear-gradient(180deg, #3b3018 0%, var(--d-panel) 70%); }
html[data-theme="dark"] .PatronPlace--2 .PatronPlaceBody { background: linear-gradient(180deg, #2c3546 0%, var(--d-panel) 70%); box-shadow: inset 0 0 0 2px rgba(170, 182, 196, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .PatronPlace--3 .PatronPlaceBody { background: linear-gradient(180deg, #3a2a20 0%, var(--d-panel) 70%); box-shadow: inset 0 0 0 2px rgba(205, 140, 90, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .PatronPlace.is-me .PatronPlaceBody { box-shadow: 0 0 0 2.5px #2897ff, 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .PatronPlace .PatronName { color: var(--d-text); }
html[data-theme="dark"] .PatronPlace--1 .PatronName { color: #f5c451; }
html[data-theme="dark"] .PatronBody { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
html[data-theme="dark"] .PatronListHead h2 { color: var(--d-text); }
html[data-theme="dark"] .PatronSearch { background: var(--d-panel); border-color: var(--d-border); }
html[data-theme="dark"] .PatronSearch:focus-within { border-color: #2897ff; }
html[data-theme="dark"] .PatronSearch input { color: var(--d-text); }
html[data-theme="dark"] .PatronSearch input::placeholder { color: var(--d-muted); }
html[data-theme="dark"] .PatronRow { background: var(--d-panel); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .PatronRow:hover { box-shadow: 0 10px 14px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .PatronRow.is-me { box-shadow: 0 0 0 2px #2897ff, 0 1px 4px rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .PatronRank { color: #7f8b9c; }
html[data-theme="dark"] .PatronRow.is-top .PatronRank { color: #f5c451; }
html[data-theme="dark"] .PatronRow .PatronName { color: var(--d-text-2); }
html[data-theme="dark"] .PatronYou { color: #5fb0ff; }
html[data-theme="dark"] .PatronEmpty { color: var(--d-muted); }
html[data-theme="dark"] .is-loading {
    background: linear-gradient(90deg, var(--d-panel) 0%, var(--d-panel-2) 50%, var(--d-panel) 100%) 0 0 / 200% 100%;
}

/* Tebex's own pieces (Bootstrap): boxes, tables, forms, pop-ups, menus, alerts */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .box-container { background-color: var(--d-panel); color: var(--d-text); }
html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .panel .panel-heading { color: var(--d-text); border-color: var(--d-border); }
html[data-theme="dark"] .panel-footer { background-color: var(--d-panel-2); border-color: var(--d-border); }
html[data-theme="dark"] .content .panel-heading { background: rgba(28, 37, 56, 0.85); border-right-color: var(--d-border) !important; }
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th { background-color: var(--d-panel) !important; border-color: var(--d-border) !important; color: var(--d-text); }
html[data-theme="dark"] .table-responsive { border-color: var(--d-border); }
html[data-theme="dark"] hr,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] legend { border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] h1 small, html[data-theme="dark"] h2 small, html[data-theme="dark"] h3 small,
html[data-theme="dark"] h4 small { color: var(--d-muted); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"] { background-color: #151d2e !important; border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder { color: #6f7b8c; }
html[data-theme="dark"] .form-control:focus { border-color: #2897ff; }
html[data-theme="dark"] .form-control[disabled],
html[data-theme="dark"] .form-control[readonly] { background-color: var(--d-panel-2) !important; }
html[data-theme="dark"] .input-group-addon { background-color: var(--d-panel-2); border-color: var(--d-border); color: var(--d-text-2); }
html[data-theme="dark"] .btn-default { background-color: var(--d-panel-2); border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-default:focus { background-color: #2e3b56; border-color: #3a4864; color: #fff; }
html[data-theme="dark"] .modal-content { background-color: var(--d-panel); border-color: var(--d-border); color: var(--d-text); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--d-border); }
html[data-theme="dark"] .modal-title { color: var(--d-text); }
html[data-theme="dark"] .modal-backdrop.in { opacity: 0.7; }
html[data-theme="dark"] .close { color: var(--d-text); text-shadow: none; opacity: 0.7; }
html[data-theme="dark"] .close:hover,
html[data-theme="dark"] .close:focus { color: #fff; opacity: 1; }
html[data-theme="dark"] .dropdown-menu { background-color: var(--d-panel-2); border-color: var(--d-border); }
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--d-text-2); }
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #2e3b52; color: #fff; }
html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--d-border); }
html[data-theme="dark"] .well { background-color: var(--d-panel-2); border-color: var(--d-border); }
html[data-theme="dark"] .list-group-item { background-color: var(--d-panel); border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .popover { background-color: var(--d-panel-2); border-color: var(--d-border); color: var(--d-text); }
html[data-theme="dark"] .popover-title { background-color: var(--d-panel); border-color: var(--d-border); }
html[data-theme="dark"] .progress { background-color: var(--d-panel-2); }
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span { background-color: var(--d-panel); border-color: var(--d-border); }
html[data-theme="dark"] code { background-color: var(--d-panel-2); color: #ff9db8; }
html[data-theme="dark"] .alert-dismissable .close { color: #fff; }
html[data-theme="dark"] body > [class*=tebex-footer-wrapper] { background: #10172a !important; }
html[data-theme="dark"] #loader { border-color: var(--d-border); }
html[data-theme="dark"] .login-disclaimer { color: var(--d-muted); }

/* Prices, ticks and sale prices */
html[data-theme="dark"] .price,
html[data-theme="dark"] .PerkTick,
html[data-theme="dark"] .FeatureCheck,
html[data-theme="dark"] .SummaryDone .material-symbols-rounded { color: var(--d-green); }
html[data-theme="dark"] .price small { color: var(--d-muted); }
html[data-theme="dark"] .discount { color: var(--d-muted); opacity: 0.8; }

/* Crate Keys and Extras */
html[data-theme="dark"] .Package { background: var(--d-panel-2); }
html[data-theme="dark"] .Package:hover { box-shadow: 0 10px 14px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .PackageGroup .PackageTitle,
html[data-theme="dark"] .Package .name { color: var(--d-text); }
html[data-theme="dark"] .PackageSizes { background: rgba(0, 0, 0, 0.25); }
html[data-theme="dark"] .PackageSizes button { color: var(--d-muted); }
html[data-theme="dark"] .PackageSizes button:hover { color: var(--d-text); }
html[data-theme="dark"] .PackageSizes button.active { background: #34425e; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }

/* Ranks: intro bar, comparison table, phone cards */
html[data-theme="dark"] .RanksIntro,
html[data-theme="dark"] .RankCard,
html[data-theme="dark"] .UpgradesIntro,
html[data-theme="dark"] .UpgradeCard { background: var(--d-panel); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .RanksLifetime,
html[data-theme="dark"] .RanksUpgradeText strong,
html[data-theme="dark"] .RankCardTop strong,
html[data-theme="dark"] .UpgradesIntro h2,
html[data-theme="dark"] .UpgradeBuy strong,
html[data-theme="dark"] .UpgradeGains .perk-label,
html[data-theme="dark"] .RanksCompareTitle,
html[data-theme="dark"] .ranks-table strong { color: var(--d-text); }
html[data-theme="dark"] .RanksUpgradeLink,
html[data-theme="dark"] .RanksUpgradeLink:hover,
html[data-theme="dark"] .RanksUpgradeLink:focus,
html[data-theme="dark"] .UpgradesIntro p,
html[data-theme="dark"] .UpgradeGains .perk-value,
html[data-theme="dark"] .rank-price { color: var(--d-text-2); }
html[data-theme="dark"] .RanksUpgradeLink { border-left-color: var(--d-border); }
html[data-theme="dark"] .UpgradeGainsTitle,
html[data-theme="dark"] .RanksCompareTitle span { color: var(--d-muted); }
html[data-theme="dark"] .ranks-table { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .ranks-table thead,
html[data-theme="dark"] .ranks-table thead th,
html[data-theme="dark"] .ranks-table thead th:first-child { background-color: var(--d-panel-2) !important; border-bottom-color: var(--d-border); }
html[data-theme="dark"] .feature-label,
html[data-theme="dark"] td.feature-label { background-color: var(--d-panel) !important; color: var(--d-text-2); }
html[data-theme="dark"] .ranks-table tbody tr:nth-child(even) td { background-color: #202a3e !important; }
html[data-theme="dark"] table.RanksTable { background-color: var(--d-panel); }
html[data-theme="dark"] td.Feature { background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .RankBadge { color: #5fb0ff; }
html[data-theme="dark"] .RankBadge--best-perks { color: #f5c451; }
/* Lion (best perks): warm gold glow on navy instead of the cream card */
html[data-theme="dark"] .RankCard.RankLegendary,
html[data-theme="dark"] .UpgradeCard.RankLegendary { background: linear-gradient(135deg, #3a3018 0%, var(--d-panel) 55%, #352c17 100%); }
html[data-theme="dark"] .ranks-table thead th.RankLegendary { background: linear-gradient(180deg, #3d3218 0%, #2a2a2e 100%) !important; }
/* Rank Upgrades */
html[data-theme="dark"] .UpgradeArrow { color: #5fb0ff; }
html[data-theme="dark"] .UpgradeBuy { background: var(--d-panel-2); border-top-color: var(--d-border); }
html[data-theme="dark"] .UpgradeGainsBox { border-left-color: var(--d-border); }
html[data-theme="dark"] .UpgradeGains li,
html[data-theme="dark"] .UpgradeGains li:last-child { border-bottom-color: var(--d-border); }
html[data-theme="dark"] .UpgradeGains li:last-child:nth-child(odd) { border-bottom-color: var(--d-border); }
html[data-theme="dark"] a.UpgradesBTN { background: var(--d-panel-2); color: var(--d-text); }

/* Buy pop-up */
html[data-theme="dark"] .PackageHead { background: linear-gradient(180deg, #232e45 0%, var(--d-panel) 100%); }
html[data-theme="dark"] .PackageHead .modal-title { color: var(--d-text); }
html[data-theme="dark"] .PackagePrice { color: var(--d-text-2); }
html[data-theme="dark"] .PackageBody { color: var(--d-text-2); }
html[data-theme="dark"] .PackageBody a { color: #5fb0ff; }
html[data-theme="dark"] .PackageFooter.modal-footer { border-top-color: var(--d-border); }
html[data-theme="dark"] .PackageClose.close { background: var(--d-panel-2); color: var(--d-text-2); }
html[data-theme="dark"] .PackageClose.close:hover { background: rgba(217, 83, 79, 0.2); color: var(--d-red); }
html[data-theme="dark"] .PackageFooter .PackageRemove { background: rgba(217, 83, 79, 0.18); color: var(--d-red); }
html[data-theme="dark"] .PackageFooter .PackageRemove:hover,
html[data-theme="dark"] .PackageFooter .PackageRemove:focus { background: rgba(217, 83, 79, 0.28); color: #ff9590; }
html[data-theme="dark"] .PackageFooter .PackageGift { background: var(--d-panel-2); color: var(--d-text-2); }
html[data-theme="dark"] .PackageFooter .PackageGift:hover,
html[data-theme="dark"] .PackageFooter .PackageGift:focus { background: #2e3b56; color: #fff; }
html[data-theme="dark"] .PackageGiftForm .form-control { border-color: var(--d-border); }

/* Cart panel and the phone account menu */
html[data-theme="dark"] .BasketPanel,
html[data-theme="dark"] .AccountMenu { background: var(--d-panel); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .BasketPanelHead,
html[data-theme="dark"] .BasketItem,
html[data-theme="dark"] .BasketPanelFoot { border-color: var(--d-border); }
html[data-theme="dark"] .BasketPanelHead h3,
html[data-theme="dark"] .BasketItemName,
html[data-theme="dark"] .BasketTotal,
html[data-theme="dark"] .AccountMenuName b { color: var(--d-text); }
html[data-theme="dark"] .BasketItemInfo .package-options,
html[data-theme="dark"] .AccountMenuName { color: var(--d-muted); }
html[data-theme="dark"] .BasketClose { background: var(--d-panel-2); color: var(--d-text-2); }
html[data-theme="dark"] .BasketItemRemove,
html[data-theme="dark"] .AccountLogout { background: rgba(217, 83, 79, 0.18); color: var(--d-red) !important; }
html[data-theme="dark"] .BasketItemRemove:hover { background: rgba(217, 83, 79, 0.28); }
html[data-theme="dark"] .BasketAdded { background: rgba(57, 192, 94, 0.14); color: var(--d-green); }
html[data-theme="dark"] .BasketBackdrop { background: rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] button.BasketBTN .CartBadge { background: #fff; color: #2897ff; }
html[data-theme="dark"] .CartBadge { border-color: var(--d-panel); }

/* Checkout */
html[data-theme="dark"] .CheckoutPackage.panel,
html[data-theme="dark"] .CheckoutSummary.panel,
html[data-theme="dark"] .CheckoutUser.panel { background: var(--d-panel); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .PackageInfo h3,
html[data-theme="dark"] .SummaryDeliverText b,
html[data-theme="dark"] .SummaryTotal,
html[data-theme="dark"] .UserCheckout a span,
html[data-theme="dark"] .SummaryDone h3 { color: var(--d-text); }
html[data-theme="dark"] .SummaryDone p,
html[data-theme="dark"] .SummaryNote { color: var(--d-text-2); }
html[data-theme="dark"] .SummaryDeliver { border-bottom-color: var(--d-border); }
html[data-theme="dark"] .buttons a,
html[data-theme="dark"] .CheckoutPackage.panel .buttons a { background: var(--d-panel-2) !important; color: var(--d-red) !important; }
html[data-theme="dark"] .CheckoutPackage.panel .buttons a:hover { background: rgba(217, 83, 79, 0.2) !important; }
html[data-theme="dark"] .quantity:not(.quantity--fixed),
html[data-theme="dark"] .quantity { background: #151d2e; border-color: var(--d-border); }
html[data-theme="dark"] .quantity:not(.quantity--fixed) button { color: var(--d-text) !important; }
html[data-theme="dark"] .quantity:not(.quantity--fixed) button:hover,
html[data-theme="dark"] .quantity:not(.quantity--fixed) button:focus-visible { background: var(--d-panel-2) !important; }
html[data-theme="dark"] .quantity input,
html[data-theme="dark"] .quantity:not(.quantity--fixed) input { background: transparent !important; color: var(--d-text); }
/* Footer: navy (the same family as the boxes), with the social buttons and IP bar to match */
html[data-theme="dark"] {
    --footer-overlay: linear-gradient(45deg, rgba(28, 37, 56, 0.95), rgba(22, 31, 54, 0.97));
    --footer-btn: #253049;
    --footer-btn-hover: #2e3b56;
}

/* Log in (pop-up and page) */
html[data-theme="dark"] .LoginTitle { color: var(--d-text); }
html[data-theme="dark"] .LoginLead,
html[data-theme="dark"] .LoginAs { color: var(--d-text-2); }
html[data-theme="dark"] .LoginEdition { background: rgba(0, 0, 0, 0.25); }
html[data-theme="dark"] .LoginEdition button { color: var(--d-muted); }
html[data-theme="dark"] .LoginEdition button.active { background: #34425e; color: #fff; }
html[data-theme="dark"] .LoginBox .input-group .form-control { border-color: var(--d-border); }
html[data-theme="dark"] .LoginBox .input-group .form-control:focus { border-color: #2897ff; }
html[data-theme="dark"] .LoginAs code { background: var(--d-panel-2); color: var(--d-text); }
html[data-theme="dark"] .LoginHint { color: var(--d-muted); }
html[data-theme="dark"] .countdown-to,
html[data-theme="dark"] .PackageTimer,
html[data-theme="dark"] .UpgradeTimer { color: var(--d-red); }
html[data-theme="dark"] .text-danger { color: var(--d-red); }
html[data-theme="dark"] .text-success { color: var(--d-green); }
html[data-theme="dark"] .text-warning { color: #f5c451; }
html[data-theme="dark"] .text-info,
html[data-theme="dark"] .text-primary { color: #5fb0ff; }

/* ---------- Dark mode, desktop: twinkling stars and shooting stars in the night sky ----------
   Only opacity and transform are animated, so the graphics card does the work (no repainting). */
.NightSky { display: none; }
@media (min-width: 768.02px) and (prefers-reduced-motion: no-preference) {
    html[data-theme="dark"] .header { position: relative; }
    /* A positioned header is drawn over normal content, which hid the cloud strip behind the sky;
       positioning the strip too puts it back in front (it comes later in the page) */
    html[data-theme="dark"] .CloudsBar { position: relative; }
    html[data-theme="dark"] .header .logo { position: relative; }  /* stays above the stars */
    html[data-theme="dark"] .NightSky {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 300px;
        overflow: hidden;
        pointer-events: none;
    }
    /* Twinkling stars: square, like the pixel stars in the sky picture */
    .NightSky i {
        position: absolute;
        width: 3px;
        height: 3px;
        background: #fff;
        box-shadow: 0 0 6px 2px rgba(190, 215, 255, 0.8);
        opacity: 0.15;
        animation: StarTwinkle 3.6s ease-in-out infinite;
    }
    /* At its brightest each star flashes a small 4-point glint, like the bigger stars in the sky picture */
    .NightSky i::before,
    .NightSky i::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0));
        transform: translate(-50%, -50%);
        animation: inherit;
        animation-name: StarGlint;
    }
    .NightSky i::before { width: 15px; height: 1px; }
    .NightSky i::after { width: 1px; height: 15px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); }
    @keyframes StarTwinkle {
        0%, 100% { opacity: 0.15; transform: scale(0.7); }
        50%      { opacity: 1;    transform: scale(1.4); }
    }
    @keyframes StarGlint {
        0%, 30%, 70%, 100% { opacity: 0; }
        50%                { opacity: 1; }
    }
    /* Shooting stars: a short streak that crosses part of the sky now and then (each about every 15-20s) */
    .ShootingStar {
        position: absolute;
        width: 130px;
        height: 2px;
        transform-origin: 0 50%;
    }
    .ShootingStar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 2px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(220, 232, 255, 0.85) 85%, #fff);
        box-shadow: 0 0 6px rgba(200, 220, 255, 0.5);
        opacity: 0;
        animation: ShootingStarRun 17s linear infinite;
    }
    .ShootingStar--1 { top: 8%; left: 90%; transform: rotate(155deg); }
    .ShootingStar--1::before { animation-delay: 4s; }
    .ShootingStar--2 { top: 6%; left: 30%; transform: rotate(160deg); }
    .ShootingStar--2::before { animation-duration: 23s; animation-delay: 13s; }
    @keyframes ShootingStarRun {
        0%   { opacity: 0; transform: translateX(0); }
        0.6% { opacity: 1; }
        4%   { opacity: 0; transform: translateX(380px); }
        100% { opacity: 0; transform: translateX(380px); }
    }
}
html[data-theme="dark"] .PackageSkeleton.is-loading,
html[data-theme="dark"] .PackageSkeletonButton.is-loading { background: linear-gradient(90deg, var(--d-panel-2) 0%, #2e3a52 50%, var(--d-panel-2) 100%) 0 0 / 200% 100%; }
@media (min-width: 768.02px) and (max-width: 1199px) {
    .UserBar > button.ThemeBTN { margin-right: 0; } /* the bar's 16px gap already spaces it from the account */
}
/* With the light / dark button on the right too, long titles ("Rank Upgrades") need a little more room here */
@media (min-width: 768.02px) and (max-width: 1199px) {
    .UserBar.panel { gap: 12px; }
    .CurrentPage { font-size: 20px; }
}
@media (min-width: 768.02px) and (max-width: 1199px) {
    /* Back to Home is just its arrow here (as on phones), so the page title fits on one line */
    .UserBarLeft .BackBTN:not(.BackBTN--site) { justify-content: center; width: 48px; padding: 0; gap: 0; }
    .UserBarLeft .BackBTN:not(.BackBTN--site) .BackLabel { display: none; }
    .CurrentPage, .CurrentPage span { white-space: nowrap; }
}

/* ---------- Page loading bar (layout.html): a thin bar along the top if a page takes over 0.5s ----------
   It creeps towards the right while the next page loads; the new page replaces it. */
#PageProgress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 3px;
    background: #fdcb5b;  /* CatCraft gold: shows against the day sky and the night sky */
    box-shadow: 0 0 8px rgba(253, 203, 91, 0.7);
    transform: scaleX(0);
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
}
#PageProgress.is-loading {
    opacity: 1;
    transform: scaleX(0.85);
    transition: transform 8s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.2s ease;
}

/* ---------- Currency button arrow: drawn with CSS (same size and place as the old FontAwesome caret),
   so the home page doesn't download the 44 KB FontAwesome font just for this one arrow ---------- */
.CurrencyCaret {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 14px;
    line-height: 14px;
    vertical-align: baseline;
}
.CurrencyCaret::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid currentColor;
}

/* The twinkling stars are <i> elements: browsers make <i> italic, which made the glints load the italic
   Rubik font (36 KB) on every dark-mode page. They have no text, so normal style looks exactly the same. */
.NightSky i { font-style: normal; }

/* ---------- Package badges (category.html packageBadges, e.g. "Best value" on 50,000 Claim Blocks) ----------
   Sits in the gap above the name, so the names on every card still line up */
.Package .name { position: relative; }
.Package .PackageBadge {
    position: absolute;
    left: 0;
    right: 0;
    top: -17px;
    margin: 0;
    text-align: center;
}

/* Dark mode: Tebex's base styles give package pictures ("img-thumbnail") a white box, which only showed
   in dark mode (e.g. behind keys on the checkout page). The pictures are transparent; keep them that way. */
html[data-theme="dark"] .img-thumbnail { background-color: transparent; border-color: transparent; }

/* ---------- Checkout after payment: a roomy thank-you instead of the narrow summary ----------
   The "Delivering to" row is hidden (the message names the player), the text is balanced over its
   lines with "in-game" kept together, and the button is a normal centred button. */
.CheckoutSummary.is-done .SummaryDeliver { display: none; }
.CheckoutSummary.is-done .SummaryDone { padding: 22px 8px 6px; }
.SummaryDone .material-symbols-rounded { font-size: 56px; }
.SummaryDone h3 { margin: 10px 0 8px; font-size: 26px; }
.SummaryDone p { max-width: 380px; margin: 0 auto 22px; text-wrap: balance; }
.SummaryDone .nowrap { white-space: nowrap; }
.SummaryDone .SummaryDoneBTN {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 28px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
}

/* ---------- Category name heading (Crate Keys, Extras): phones only ----------
   On bigger screens the top bar shows it already ("Currently viewing"); phones hide that title. */
@media (min-width: 768.02px) {
    .CategoryHeading { display: none; }
}

/* ---------- Page headings with Tebex's "header" class (terms, privacy, order status, pending) ----------
   "header" is also the sky banner's class, so these headings picked up its 170px bottom padding (a big
   empty gap) and, in dark mode, the night sky. They're plain headings. */
.panel-heading.header,
html[data-theme="dark"] .panel-heading.header {
    position: static;
    padding: 20px 15px !important;     /* !important: the phone sky rules use it too */
    background-image: none !important;
}

/* Thank-you "Play again": a small link under "Back to the store", shown once after the celebration
   (assets/celebrate.js, started in checkout.html) */
.SummaryDone .ReplayLink { display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; background: none; color: #8a96a3; font-size: 13px; text-decoration: underline; cursor: pointer; }
.SummaryDone .ReplayLink:hover { color: inherit; }
.SummaryDone .ReplayLink[hidden] { display: none; }