@font-face {
  font-family: SmbWeb;
  src: url('../font/smbfont.ttf') format("truetype");
  font-display: swap;
}

@font-face {
  font-family: SmbChat;
  src: url('../font/chatfont.ttf') format("truetype");
  font-display: swap;
}

@keyframes glow {
  to {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}

@keyframes hueShift {
      0% {
        color: hsl(0,100%,50%);
      }
      17% {
        color: hsl(60,100%,50%);
      }
      33% {
        color: hsl(120,100%,50%);
      }
      50% {
        color: hsl(180,100%,50%);
      }
      67% {
        color: hsl(240,100%,50%);
      }
      83% {
        color: hsl(300,100%,50%);
      }
      100% {
        color: hsl(360,100%,50%);
      }
}

@-webkit-keyframes bkgScroll {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 100% 0px;
  }
}

@keyframes bkgScroll {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 100% 0px;
  }
}

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
  border-bottom: 5px dashed green;
  -webkit-text-fill-color: green;
}

@keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
  }
}

@-webkit-keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
  }
}

html, body {
  touch-action: none;     /* Disables gestures (like zoom) */
  user-select: none;      /* Prevents text selection */
  -webkit-user-drag: none; /* Disables image dragging */
  -webkit-touch-callout: none; /* Disables the long-press callout */
}

body {
  background-color: rgba(0, 0, 0);
  user-select: none;
  -moz-user-select: none;
  overflow: hidden;

  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;

  text-shadow: 0.125em 0.125em 0 #000;
}

.background-a {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: #9290FF;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/bkga.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  -webkit-animation: bkgScroll 150s linear infinite;
  animation: bkgScroll 150s linear infinite;
}

.background-b {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: #000000;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/bkgb.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  -webkit-animation: bkgScroll 150s linear infinite;
  animation: bkgScroll 150s linear infinite;
}

.background-c {
  background-color: #000000;
}

.background-d {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: #000000;
  background-image: url(https://terminalarch.de/img/liar_dancer.gif);
  background-repeat: repeat-x;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

.background-e {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: #9290FF;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/bkgc.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  -webkit-animation: bkgScroll 150s linear infinite;
  animation: bkgScroll 150s linear infinite;
}

.background-f {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-color: #000000;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/bkgd.png);
  background-repeat: repeat-x;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;

  -webkit-animation: bkgScroll 150s linear infinite;
  animation: bkgScroll 150s linear infinite;
}

.background-halloween {
  background-color: #000000;
}

.background-a.winter {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/legacy/img/home/bkga_winter.png);
}

;
/* link.css */

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.container-center {
  font-family: SmbWeb;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  white-space: nowrap;
}

.title {
  font-size: 64px;
  animation: hueShift 8s linear infinite;
  color: red;
}

.title-logo {
  margin: auto;
  display: block;
  transform: translateY(-50%)scale(2);
  content: url(https://raw.githubusercontent.com/mroyale/assets/refs/heads/v7/img/home/logo.png);
}

.logo-halloween {
  content: url(https://raw.githubusercontent.com/mroyale/assets/refs/heads/v7/img/home/logo_event_halloween.png);
}

@media only screen and (max-width: 769px) {
  .title {
    font-size: 28px;
    text-align: center;
  }
}

.container-launch {
  margin-top: 10px;
  font-size: 32px;
}

@media only screen and (max-width: 769px) {
  .container-launch {
    margin-top: 15px;
    font-size: 16px;
  }
}

.container-bottom {
  font-size: 32px;
}

.container-go {
  font-size: 32px;
  text-align: center;
}

@media only screen and (max-width: 769px) {
  .container-go {
    font-size: 16px;
  }
}

.launch {
  cursor: pointer;
  margin-left: 6px;
}

.leaderboard-select {
  cursor: pointer;
  margin-left: 6px;
  display: inline-block;
}

.leaderboard-content {
  color: #663500;
  background-color: #EA9E22;
  border-top: 6px solid #994E00;
  border-right: 6px solid #000;
  border-bottom: 6px solid #000;
  border-left: 6px solid #994E00;
}

@media only screen and (max-width: 769px) {
  .launch {
    margin-left: 2px;
  }
}

.private {
  font-size: 28px;
  cursor: pointer;
  margin-left: 6px;
  float: right;

  animation: 1s infinite alternate;
}

@media only screen and (max-width: 769px) {
  .private {
    font-size: 12px;
  }
}

.launch:hover {
  animation: none;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.launchStrong:hover {
  animation: none;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.launchStrong {
  cursor: pointer;
  font-size: 32px;
  font-family: SmbWeb;
  background: none;
  border: none;
  color: white;
  animation: glow 1s infinite alternate;
}

@media only screen and (max-width: 769px) {
  .launchStrong {
    font-size: 16px;
  }
}

.players {
  font-size: 20px;
  margin-right: 4px;
  float: right;
}

.player-number {
  color: #00FF00;
}

.player-maintenance {
  font-size: 20px;
  margin-right: 4px;
  float: right;
  color: #FF0000;
}

@media only screen and (max-width: 769px) {
  .players {
    font-size: 16px;
  }
}

input {
  text-shadow: 0.125em 0.125em 0 #000;
}

.profile-cornerbutton {
  position: absolute; top: 10px; right: 10px; padding: 10px;  color: #fff; cursor: pointer;margin-top: 10px;font-size: 20px;
}

.profile-button {
  padding: 10px; color: #fff; cursor: pointer;
}

.name-input {
  font-family: SmbWeb;
  font-size: 64px;
  color: white;
  text-align: center;

  background: transparent;
  border: none;
  border-bottom: 5px dashed #FFFFFF;
  margin-bottom: 8px;
  width: 100%;
}

.name-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

@media only screen and (max-width: 769px) {
  .name-input {
    font-size: 20px;
  }
}

.captcha-input {
  font-family: SmbWeb;
  font-size: 64px;
  color: white;
  text-align: center;

  width: 480px;
  background: transparent;
  border: none;
  border-bottom: 5px dashed #FFFFFF;
  margin-bottom: 8px;
}

.captcha-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

@media only screen and (max-width: 769px) {
  .captcha-input {
    font-size: 20px;
    width: 180px;
  }
}

.team-input {
  font-family: SmbWeb;
  font-size: 32px;
  color: white;
  text-align: center;

  background: transparent;
  border: none;
  border-bottom: 5px dashed #FFFFFF;
  margin-bottom: 8px;
  width: 100%;
}

.team-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.shop-search {
  font-family: SmbWeb;
  font-size: 24px;
  color: white;
  text-align: center;

  background-color: transparent;
  border: none;
  border-bottom: 5px dashed #FFFFFF;

  margin-top: 15px;
  margin-left: 10px;
  width: 400px;
}

.shop-search::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

@media only screen and (max-width: 769px) {
  .team-input {
    font-size: 12px;
  }
}

hr {
  border: 2px dashed whitesmoke;
}

.password-input {
  font-family: SmbWeb;
  font-size: 64px;
  color: white;
  text-align: center;

  background: transparent;
  border: none;
  border-bottom: 5px dashed #FFFFFF;
  margin-bottom: 8px;
}

.password-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

@media only screen and (max-width: 769px) {
  .password-input {
    font-size: 20px;
  }
}

.dis-lg {
  font-size: 24px;
  text-align: center;
  margin-bottom: 24px;
}

.dis-sm {
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
  white-space: normal;
}

.dis-sm-r {
  font-size: 12px;
  text-align: right;
}

@media only screen and (max-width: 769px) {
  .dis-lg {
    font-size: 8px;
    margin-bottom: 8px;
    white-space: normal;
  }

  .dis-sm {
    font-size: 4px;
    white-space: normal;
  }
}

.warn {
  position: absolute;
  margin: 0px 0px 0px 0px;
  padding: 5px 32px 2px 4px;
  font-family: "Calibri", monospace;
  color: rgba(255, 255, 255, 1.0);
  background-color: rgba(0, 0, 0, 0.75);

  font-size: 16px;
}

.warn-ico {
  height: 16px;
  margin-bottom: -2px;
  margin-right: 2px;
}

.error {
  font-size: 32px;
}

.fullscreen {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
  height: 100%;
}

#log {
  font-family: SmbWeb;
  font-size: 32px;
  color: white;
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
}

#log>.debugLog {
  display: table-cell;
  vertical-align: middle;
}

.leaderboard-skin {
  text-align: left;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 6px;
  border: none;
  background: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/skins/smb_skin0.png) 0px -16px;
  transform: scale(2) scaleX(-1);
}

.leaderboard-name {
  cursor: pointer;
}
.leaderboard-name:hover {
  text-decoration: underline;
}

.skin-select-button {
  text-align: left;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 12px;
  border: 2px solid #3c3c3c;
  background: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/skins/smb_skin0.png) 0px -16px;
  transform: scale(2) scaleX(-1)
}

.skin-shop-button {
  text-align: left;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 15px;
  border: none;
  background: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/skins/smb_skin0.png) 0px -16px;
  transform: scale(2) scaleX(-1);
}

.badge-shop-button {
  text-align: left;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 15px;
  border: none;
  background-image: url("https://raw.githubusercontent.com/mroyale/assets/v7/img/game/badges.png");
  background-position: 0px 0px;
  transform: scale(2);
}

.event-shop-button {
  text-align: left;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 15px;
  border: none;
  background-image: url("https://raw.githubusercontent.com/mroyale/assets/v7/img/game/badges.png");
  background-position: 0px 0px;
  transform: scale(2);
}

.event-shop-button {
  text-align: left;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 15px;
  border: none;
  background-image: url("https://raw.githubusercontent.com/mroyale/assets/v7/img/game/badges.png");
  background-position: 0px 0px;
  transform: scale(2);
}

.skin-select {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  width: 1250px;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(0, 0, 0, 0)
}

@media only screen and (max-width: 769px) {
  .skin-select {
    margin-top: 20px;
    transform: scale(1)
  }
}

.container-return {
  font-family: SmbWeb;
  font-size: 32px;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;

  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%) translateY(-90%);
  white-space: nowrap;
}

.container-unlock {
  width: 634px;
  height: 124px;
  background-image: url("https://raw.githubusercontent.com/mroyale/assets/v7/img/game/unlock.png");
  position: fixed;
  transform: translateX(-50%);
  left: 50%;
  font-family: SmbWeb;
  color: white;
  top: -128px;
  transition: top 1s linear;
  image-rendering: pixelated;
}

.container-achievements {
  background-image: url("https://raw.githubusercontent.com/mroyale/assets/v7/img/game/achievements.png");
  width: 681.5px; /* you know what if chrome didnt suck by making the scrollbar the way it is it would be pixel perfect */
  height: 550px;
  background-size: cover;
  position: fixed;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  font-family: SmbWeb;
  color: white;
  z-index: 2;
}

.container-achievement {
  height: 124px;
  background-image: url("https://raw.githubusercontent.com/mroyale/assets/v7/img/game/unlock.png");
  transform: translateX(-50%);
  font-family: SmbWeb;
  color: white;
  image-rendering: pixelated;
  position: static;
  margin-left: 50%;
  width: 600px;
  background-size: contain;
  background-repeat: no-repeat;
}

.itemUnlock-up {
  top: -128px;
  transition: top 1s linear;
}

.itemUnlock-down {
  top: 0px;
  transition: top 1s linear;
}

#gameChat {
  width: 25em; 
}

/* "CHAT" header is an h2. The pixel font doesn't have bold weight, and the artificial bold weight looks bad, so turn it off */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

.container-gameChat {
  position: absolute;
  font-family: SmbWeb;
  width: inherit;

  background-color: #00000080;
  background-image: none;

  bottom: 0.5em;
  left: 0.5em;

  overflow-x: clip;
  overflow-y: hidden;
  color: #FFFFFF;

  font-size: 1em;
}

.container-hideChat {
  position: absolute;
  display: block;
  right: 5px;
  margin-top: 13px;
}

.container-hiddenChat {
  /* this class might not actually show up now */
  width: 20vh;
  height: 5vh;
  transform: translateX(5%) translateY(90vh);
}

.container-chatTab {
  display: inline-flex;
  margin: 0.2 0.5em;
  margin-top: 12px;
}

.container-chatInput {
  width: 95%;
  background-color: rgba(0, 0, 0, 0.565);
  font-family: SmbChat;
  color: rgb(255, 255, 255);
  font-size: 1em;
  margin: .5em;
  border: 1px solid gray;
}

.container-chatMessages {
  height: 12em;
  font-family: 'SmbChat';
  margin-left: 0.5em;
  margin-right: 0.5em;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.75em;
}

.container-privLobby {
  font-family: SmbWeb;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: black;

  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(-40%);

  border: 8px solid #000;
  background-color: #994E00;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCIVETtIEclQnSyIioiTVLEIFkpboVUHk0u/oElDkuLiKLgWHPxYrDq4OOvq4CoIgh8gjk5Oii5S4v+SQosYD4778e7e4+4d4G1UmGL4xwFFNfVUPCZkc6tC4BV+DKMfYcyKzNAS6cUMXMfXPTx8vYvyLPdzf45eOW8wwCMQzzFNN4k3iKc3TY3zPnGIlUSZ+Jx4TKcLEj9yXXL4jXPRZi/PDOmZ1DxxiFgodrDUwaykK8RTxBFZUSnfm3VY5rzFWanUWOue/IXBvLqS5jrNIcSxhASSECChhjIqMBGlVSXFQIr2Yy7+sO1PkksiVxmMHAuoQoFo+8H/4He3RmFywkkKxoCuF8v6GAECu0Czblnfx5bVPAF8z8CV2vZXG8DMJ+n1thY5Avq2gYvrtibtAZc7wOCTJuqiLfloegsF4P2MvikHDNwCPWtOb619nD4AGepq+QY4OARGi5S97vLu7s7e/j3T6u8H4HVy047HNnMAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmBB4TKibqiYCvAAAAJ0lEQVQ4y2NgwA/+E5JnYqAQUGwAIxHOJAn8J1V+GIbBaDoYmekAADEeDAm6TpGEAAAAAElFTkSuQmCC);
  image-rendering: pixelated;
  background-size: 48px 48px;
}

.container-shop {
  font-family: SmbWeb;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: black;

  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(-30%) scale(1);

  border: 8px solid #000;
  background-color: #994E00;
  image-rendering: pixelated;
  background-size: 48px 48px;

  border: medium; background: none; width: 60em; height: 600px;
}

@media screen and (max-width: 767px) {
  .container-shop {
    transform: translate(-50%, -40%) scale(0.4);
  }
}

@media screen and (max-width: 1335px) {
  .container-shop {
    transform: translate(-50%, -40%) scale(0.7);
  }
}

@media screen and (max-height: 719px) {
  .container-shop {
    transform: translate(-50%, -40%) scale(0.7);
  }
}

@media screen and (max-height: 619px) {
  .container-shop {
    transform: translate(-50%, -40%) scale(0.5);
  }
}



.container-privLobby-box {
  font-size: 14px;
  color: #663500;
  background-color: #EA9E22;
  border-top: 6px solid #994E00;
  border-right: 6px solid #000;
  border-bottom: 6px solid #000;
  border-left: 6px solid #994E00;
}

.container-developerMenu {
  font-family: SmbWeb;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: black;

  position: absolute;
  top: 25%;
  left: 0%;
  white-space: nowrap;
}

.container-statsBar {
  font-family: SmbWeb;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: black;

  position: absolute;
  bottom: 0px;
  width: 100%;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 0;
}

.container-notice {
  font-family: SmbWeb;
  color: #FFFFFF;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: black;
  
  position: absolute;
  width: 40em;
  height: 20em;
  z-index: 10;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(0%);

  border: 8px solid #000;
  background-color: #994E00;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCIVETtIEclQnSyIioiTVLEIFkpboVUHk0u/oElDkuLiKLgWHPxYrDq4OOvq4CoIgh8gjk5Oii5S4v+SQosYD4778e7e4+4d4G1UmGL4xwFFNfVUPCZkc6tC4BV+DKMfYcyKzNAS6cUMXMfXPTx8vYvyLPdzf45eOW8wwCMQzzFNN4k3iKc3TY3zPnGIlUSZ+Jx4TKcLEj9yXXL4jXPRZi/PDOmZ1DxxiFgodrDUwaykK8RTxBFZUSnfm3VY5rzFWanUWOue/IXBvLqS5jrNIcSxhASSECChhjIqMBGlVSXFQIr2Yy7+sO1PkksiVxmMHAuoQoFo+8H/4He3RmFywkkKxoCuF8v6GAECu0Czblnfx5bVPAF8z8CV2vZXG8DMJ+n1thY5Avq2gYvrtibtAZc7wOCTJuqiLfloegsF4P2MvikHDNwCPWtOb619nD4AGepq+QY4OARGi5S97vLu7s7e/j3T6u8H4HVy047HNnMAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmBB4TKibqiYCvAAAAJ0lEQVQ4y2NgwA/+E5JnYqAQUGwAIxHOJAn8J1V+GIbBaDoYmekAADEeDAm6TpGEAAAAAElFTkSuQmCC);
  image-rendering: pixelated;
  background-size: 48px 48px;
}

#notice-title {
  height: 3em;
  align-items: center;
  justify-content: left;
  display: flex;
  font-size: 24px;
  margin-left: 4px;
}

#notice-contents {
  margin: 6px;
}

#notice-controls {
  margin: 6px;
  bottom: 0px;
  position: fixed;
  right: 0px;
  font-size: 24px;
}

#notice-controls span:hover {
  cursor: pointer;
}

.developerMenu-name-input {
  font-family: SmbWeb;
  color: white;
  text-align: center;

  background: transparent;
  border: none;
  border-bottom: 1px dashed #FFFFFF;
}

.levelSelectButton {
  display: inline-block;
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  border: 2px solid #EA9E22;
}

.levelSelectRow {
  text-align: center;
  margin: 2px;
}

/* used for GFX mod settings, and world select in private lobbies */
.yellowContainer {
  font-size: 14px;
  color: #663500;
  background-color: #EA9E22;
  border-top: 6px solid #994E00;
  border-right: 6px solid #000;
  border-bottom: 6px solid #000;
  border-left: 6px solid #994E00;
  padding-bottom: 10px;
}

.yellowContainer div {
  /* black shadow on brown text makes the text harder to read */
  text-shadow: none;
}

.yellowContainer div.groupHeader {
  /* re-add shadow that yellowContainer removes */
  text-shadow: 0.125em 0.125em 0 #000;
}

.groupContainer {
  margin: 5px;
  width: 100%;
  height: 80px;
}

.groupHeader {
  color: white;
}

.login-result {
  position: absolute;
  padding: 5px 32px 2px 32px;
  left: 50%;
  transform: translate(-50%, 10%);
  background-color: rgba(255, 255, 255, 0.39);

  font-family: SmbWeb;
  font-size: 32px;
}

@media only screen and (max-width: 769px) {
  .login-result {
    font-size: 12px;
  }
}

.pagination {
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.pagination,
.pagination * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pagination a {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}

.pagination a.disabled {
  opacity: .3;
  pointer-events: none;
  cursor: not-allowed;
}

.pagination a.current {
  color: gray;
}

.char-music-toggle.enabled {
  float: right;
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/char-music-enabled.png');
}

@media only screen and (max-width: 769px) {
  .char-music-toggle.enabled {
    width: 16px !important;
    height: 16px !important;
  }
}

.char-music-toggle.disabled {
  float: right;
  width: 32px;
  height: 32px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/char-music-disabled.png');
}

@media only screen and (max-width: 769px) {
  .char-music-toggle.disabled {
    width: 16px !important;
    height: 16px !important;
  }
}

.private-toggle.enabled {
  float: right;
  width: 26px;
  height: 32px;
  background-size: 100% 100%;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/locked.png');
}

@media only screen and (max-width: 769px) {
  .private-toggle.enabled {
    width: 13px !important;
    height: 16px !important;
  }
}

.private-toggle.disabled {
  float: right;
  width: 26px;
  height: 32px;
  background-size: 100% 100%;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/unlocked.png');
}

@media only screen and (max-width: 769px) {
  .private-toggle.disabled {
    width: 13px !important;
    height: 16px !important;
  }
}

.gm-change.race {
  float: right;
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/gm0.png');
}

@media only screen and (max-width: 769px) {
  .gm-change.vanilla {
    width: 16px !important;
    height: 16px !important;
  }
}

.gm-change.pvp {
  float: right;
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/gm1.png');
}

@media only screen and (max-width: 769px) {
  .gm-change.pvp {
    width: 16px !important;
    height: 16px !important;
  }
}

.gm-change.hell {
  float: right;
  width: 32px;
  height: 32px;
  background-size: 100%;
  background-image: url('https://raw.githubusercontent.com/mroyale/assets/v7/img/home/gm2.png');
}

@media only screen and (max-width: 769px) {
  .gm-change.hell {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 110%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  font-size: 16px;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Loading spinner */
#loader {
  animation: spin 1s linear infinite;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px;
}

@keyframes spin {
  0% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  6.25% {
    box-shadow:
      0px -30px transparent,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  12.5% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  18.75% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  25% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  31.25% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  37.5% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px transparent,
      -10px -30px transparent;
  }

  43.75% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px #FFFFFF,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px transparent;
  }

  50% {
    box-shadow:
      0px -30px transparent,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px #FFFFFF,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  56.25% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px transparent,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px #FFFFFF,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  62.5% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px transparent,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px #FFFFFF,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  68.75% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px transparent,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px #FFFFFF,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  75% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px transparent,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px #FFFFFF,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  81.25% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px transparent,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px #FFFFFF,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  87.5% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px transparent,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px #FFFFFF,
      -10px -30px #FFFFFF;
  }

  93.75% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px transparent,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px #FFFFFF;
  }

  100% {
    box-shadow:
      0px -30px #FFFFFF,
      10px -30px #FFFFFF,
      20px -20px #FFFFFF,
      30px -10px #FFFFFF,
      30px 0px #FFFFFF,
      30px 10px #FFFFFF,
      20px 20px #FFFFFF,
      10px 30px #FFFFFF,
      0px 30px transparent,
      -10px 30px transparent,
      -20px 20px transparent,
      -30px 10px transparent,
      -30px 0px transparent,
      -30px -10px transparent,
      -20px -20px transparent,
      -10px -30px transparent;
  }
}

/* Links */
.link-r {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 0px;
  padding: 0px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.0);
}

.link-git {
  cursor: pointer;
  display: inline-block;
  width: 72px;
  height: 72px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/git.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px 64px;
}

.link-git:hover {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/git-inv.png);
}

.link-disc {
  cursor: pointer;
  display: inline-block;
  width: 72px;
  height: 72px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/disc.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72px 72px;
}

.link-disc:hover {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/disc-inv.png);
}

.link-twit {
  cursor: pointer;
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/twit.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
}

.link-twit:hover {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/twit-inv.png);
}

.link-patr {
  cursor: pointer;
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/img/home/patr.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
}

.link-patr:hover {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/img/home/patr-inv.png);
}

.link-l {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 6px;
  margin-left: 6px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.0);
}

.link-patch {
  font-family: SmbWeb;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
}

.link-patch:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.link-leaderboard {
  font-family: SmbWeb;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
}

.link-leaderboard:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.link-b {
  position: absolute;
  bottom: 0px;
  right: 0px;
  margin-top: 6px;
  margin-left: 6px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.0);
}

.link-editor {
  cursor: pointer;
  display: inline-block;
  width: 36px;
  height: 27px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/warn.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 27px;
  margin-bottom: 1px;
  vertical-align: top;
}

.link-con {
  cursor: pointer;
  display: inline-block;
  width: 36px;
  height: 25px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/input.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  margin-right: 6px;
  vertical-align: top;
}

.link-con:hover {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/con-inv.png);
}

.link-w {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: -2;
  padding-top: 10px;
}

.link-s {
  position: absolute;
  bottom: 9px;
  left: 0px;
  margin-top: 6px;
  margin-left: 6px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0.0);
}

.link-leaderboard {
  cursor: pointer;
  display: inline-block;
  margin: 4px;
  font-family: SmbWeb;
  font-size: 18px;
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  z-index: 1;
  margin-left: 12px;
}

.win {
  display: inline-block;
  margin: 6px;
  font-family: SmbWeb;
  font-size: 18px;
  color: white;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  z-index: 1;
  margin-left: 12px;
}

.kill {
  font-size: 18px;
}

.rtfpn {
  position: absolute;
  bottom: 15px;
  right: 0px;
  width: 344px;
  height: 278px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/ui_arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70px 70px;
  z-index: -1;
  font-family: SmbWeb;
  color: white;
  transform: rotate(320deg) translate(12%, 20%);
}

@media only screen and (max-width: 769px) {
  .rtfpn {
    display: none;
    width: 0px;
    height: 0px;
  }
}

.rtfpn2 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 344px;
  height: 278px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/ui_arrow.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70px 70px;
  z-index: -1;
  font-family: SmbWeb;
  color: white;
  transform: rotate(165deg) translate(0, 20%) scale(0.85);
}

@media only screen and (max-width: 769px) {
  .rtfpn2 {
    display: none;
    width: 0px;
    height: 0px;
  }
}

@media only screen and (max-height: 650px) {
  .rtfpn2 {
    display: none;
    width: 0px;
    height: 0px;
  }
}

.rtfpn3 {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 844px;
  height: 378px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/rtfpn3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 844px 378px;
  z-index: -1;
}

@media only screen and (max-width: 769px) {
  .rtfpn3 {
    display: none;
    width: 0px;
    height: 0px;
  }
}

@media only screen and (max-height: 650px) {
  .rtfpn3 {
    display: none;
    width: 0px;
    height: 0px;
  }
}

.rtfpn4 {
  position: absolute;
  bottom: 9px;
  left: 0px;
  width: 844px;
  height: 378px;
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/rtfpn4.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 844px 378px;
  z-index: -1;
}

@media only screen and (max-width: 769px) {
  .rtfpn4 {
    display: none;
    width: 0px;
    height: 0px;
  }
}

@media only screen and (max-height: 650px) {
  .rtfpn4 {
    display: none;
    width: 0px;
    height: 0px;
  }
}

@media only screen and (max-width: 769px) {
  .link-patch {
    font-size: 12px;
  }
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: gray; 
  border-radius: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: darkslategray; 
}

/* LAST THING */
.stat-icons {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/refs/heads/v7/img/home/stats.png);
  width: 16px;
  height: 16px;
  display: inline-block;
  transform: scale(1.5);
}

.stat-wins {
  background-position: -48px -16px;
}

.stat-deaths {
  background-position: 0px -16px;
}

.stat-kills {
  background-position: -16px -16px;
}

.stat-coins {
  background-position: -32px -16px;
}

.stat-halloweenCoin {
  background-position: -80px -16px;
}

.stat-winterCoin {
  background-position: -96px -16px;
}

.stat-editor {
  background-position: -64px -16px;
  cursor: pointer;
  margin-right: 8px;
  transform: scale(1.5);
}

.stat-maker {
  background-image: url(https://raw.githubusercontent.com/mroyale/assets/v7/img/home/shop_makers.png);
  width: 20px;
  height: 20px;
  background-size: 20px;
}

.flag-icons {
  width: 16px;
  height: 11px;
  display: inline-block;
  transform: scale(2);
  position: relative;
  margin-right: 20px;
}

.volume-slider {
  appearance: none; /* Remove default styling */
  width: 80%; /* Adjust width as needed */
  background: #333; /* Background color of the slider track */
  position: relative; /* Positioning for pseudo-elements */
}

/* Style the slider thumb */
.volume-slider::-webkit-slider-thumb {
  appearance: none; /* Remove default styling */
  appearance: none; /* Remove default styling */
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  background: white; /* Thumb color */
  cursor: pointer; /* Cursor style */
  border-radius: 0; /* Remove border radius for a square look */
}

.volume-slider::-moz-range-thumb {
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  background: #ffcc00; /* Thumb color */
  cursor: pointer; /* Cursor style */
  border-radius: 0; /* Remove border radius for a square look */
}

/* Hide the default track for Firefox */
.volume-slider::-moz-range-track {
  background: #333; /* Background color of the slider track */
}


/* Country select dropdown */
.dropdown {
  position: relative;
  display: inline-block;
  min-width: 800px;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  border: 2px solid #EA9E22;
  padding: 10px;
  cursor: pointer;
  width: 97.5%; /* This is demented */
}

.dropdown-toggle:hover {
  background-color: #FFA542;
  color: #E75A10;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #9C4A00;
  border: 2px solid #EA9E22;
  width: 100%;
  margin-top: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 30em;
  overflow: scroll;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #FFA542;
  color: #E75A10;
}

.dropdown.open .dropdown-menu {
  display: block;
}