/* gallery.css */
#gallery-display {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
}

#gallery-display.visible {
    display: block;
}

#gallery-display.hidden {
    display: none;
}

#gallery-display-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

#gallery {
    width: 750px;
    height: 500px;
    position: relative;
    color: #bebebe;
    background-color: #222222;
    border-radius: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: #353535;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

#gallery-close-btn {
    width: 30px;    
    height: 30px;
    position: absolute;
    right: -10px;
    top: -10px;
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: #141414;
    border-width: 2px;
    border-style: solid;
    border-color: #353535;
}

/* main.css */
/* Import Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Rajdhani:wght@300;400;500;600;700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Ubuntu:wght@300;400;500;700&display=swap');






html {
    box-sizing: border-box;
    font-size: 16px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

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

.pointer-events-all {
    pointer-events: all;
}

.pointer-events-none {
    pointer-events: none;
}

.toast {
    margin-top: 20px !important;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Ubuntu';
    overflow: hidden;
    font-size: 18px;
    color: #000000;
}

/* Game Display (Canvas) */
#game-display {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background-color: #000000;
}

/* Hud Display */
#hud-display {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

#hud-display.visible {
    display: block;
}

#hud-display.hidden {
    display: none;
}

/* Menu Display */
#menu-display {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.3);
    /*background-image: url('../images/bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;*/
}

#menu-display.visible {
    display: block;
}

#menu-display.hidden {
    display: none;
}

#menu-display-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

#leaderboard-canvas {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid rgba(0, 0, 0, 0);
}

#minimap-canvas {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(0, 0, 0, 0.13);
}

.menu-container {
    display: grid;
    place-items: center;
    gap: 20px;
    border-radius: 40px;
    padding: 10px;
}


/* onyx.css */
.control-bar-container {
    background: rgba(136, 136, 136, 0.2);
    position: absolute;
    width: 100%;
    height: 180px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0px;
    z-index: 1;
    /* box-shadow: 0 0 10px #000; */
    /* border-radius: 200px; */
}
.control-bar {
    width: 100%;
    position: absolute;
    height: 110px;
    top: 20%;
    /* left: 10px; */
    background: #222222;
    /* border-radius: 200px; */
}
.bar-button-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 795px;
    /* top: 10px; */
}
.bar-button-bg {
    width: 127px;
    height: 110px;
    display: inline-block;
    margin-left: -1px;
    margin-right: -1px;
    position: relative;
    transition: all .5s;
    transform: skewX(-15deg) scaleY(1.05) scaleX(1.05);
}
.bar-button-bg.left {
}
.bar-button-bg.left:hover {
}
.bar-button-bg.center {
    border-radius: 0 5px 5px 0;
    z-index: 5
}
.bar-button-bg.right {
}
.bar-button-bg.right:hover {
}
.bar-button-bg.settings {
    background: #25262a;
    border-radius: 4px 0 0 4px;
}
.bar-button-bg.play {
    background: #25262a;
    z-index: 4;
}
.bar-button-bg.spectate {
    background: #25262a;
    z-index: 3;
}
.bar-button-bg.inputs {
    background: #25262a;
    z-index: 2;
}
.bar-button-bg.theme {
    background: #25262a;
    border-radius: 0 4px 4px 0;
    z-index: 1;
}
.bar-button-bg.dummy {
    background: #25262a;
    width: 170px;
}
.bar-button i {
    font-size: 36px
}

.bar-circle-outer{
    cursor:pointer;
    width:210px;
    height:210px;
    position:absolute;
    background:rgba(155, 155, 155, 0.3);
    border-radius:50%;
    left:50%;
    top:-10px;
    transform:scale(1) translateX(-295px);
    transition:transform .5s
}
.bar-circle-outer:hover{
    transform:scale(1.05) translateX(-280px)
}
.bar-circle {
  position: relative;
  width: 196px;
  height: 196px;
  margin: 7px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden; /* Wichtig! */
}
.skin-preview {
  position: relative;
  width: 188px;
  height: 188px;
  margin: 4px; /* oder 2px oder 0 */
  border-radius: 50%;
  overflow: hidden;
}

.skin-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

#skinLeft {
  left: 0;
  background-position: left center; /* 👈 zeige linke Seite */
}

#skinRight {
  left: 50%;
  background-position: right center; /* 👈 zeige rechte Seite */
}

.skin-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: white;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}


.bar-button{
    cursor:pointer;
    margin-top:23px;
    margin-left:-1px;
    width:125px;
    color: #72787c;
    user-select:none;
    font-size:10px;
    text-align:center;
    height:45px;
    display:inline-block;
    transform:scale(1);
    transition:transform .5s;
}
#button-settings{
    color: #72787c;
}
.bar-button:hover{
    transform:scale(1.1)
}
.bar-button.dummy{
    width:170px
}
.bar-button .text{
    font-family: monospace;
    text-transform:uppercase;
    font-size:13px;
    font-weight:600;
    margin-top: 5px;
}
.menu-panel{
    z-index:1;
    border-radius:5px;
    background:#0a0a0a
}

#inputs{
    display:none;
    width:400px;
    height:500px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}
.input-hidden{
    color:transparent!important
}
.input-hidden::selection{
    background:#777!important;
    color:transparent!important
}
.inputs-tab{
    cursor:pointer;
    background:#171717;
    padding:8px 10px;
    border-radius:4px 4px 0 0
}
.inputs-tab.active{
    background:#212121
}
.inputs-tab-bar{
    color:#fff;
    font-size:12px;
    font-weight:600;
    font-family:raleway;
    text-transform:uppercase;
    height:22px
}
.inputs-menu-container{
    width:100%;
    height:478px;
    background:rgba(51,51,51,.5);
    border-radius:0 0 4px 4px
}
.inputs-menu{
    width:100%;
    position:absolute;
    height:478px;
    display:none;
    color:#fff
}
.inputs-menu.active{
    display:block
}
.inputs-tab.close{
    float:right;
    margin-right:-3px;
    margin-top:-3px;
    border-radius:50%;
    background:0 0
}

  #player-data {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    transform: translate(-50%, 125px);
    padding: 15px;
    background: #151515;
    border-radius: 1px;
    z-index: 1;
    box-sizing: border-box;
    font-size: 0;
    box-shadow: 0 2px 5px #000;
  }

  #player-data .decorator{
    width:100%;
    height:69px;
    background:#222;
    position:absolute;
    bottom:0;
    left:0;
    z-index:-1;
    }


  .menu-inputs {
    flex: 1;
    min-width: 0;
    margin: 5px 0;
    padding: 8px 10px;
    border: none;
    background-color: #1f1f1f;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    font-family: monospace;
    font-weight: 600;
    box-sizing: border-box;
  }
  
  .menu-inputs::placeholder {
    color: rgba(255, 255, 255, .3);
  }
  .menu-inputs:focus {
    outline: 0;
  }
  
  #tag {
    width: 60px;
  }
  #nickname, #nickname2, #nick1, #nick2 {
    width: 102px;
    margin-left: 2px;
  }
  #nick2 {
    margin-right: 0;
  }
  #skin1, #skin2 {
    width: 133px;
    margin-bottom: 22px;
  }
  
  #skin1 {
    margin-right: 2px !important;
  }
  
  #gamemode {
    cursor: pointer;
    width: 80px;
    margin-left: 0;
    background: #151515;
  }
  #servers {
    cursor: pointer;
    width: 186px;
    margin-left: 2px;
    background: #151515;
  }


  #info-display {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
  
  .menu-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #222;
    color: #bebebe;
    border: 2px solid #353535;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    font-family: monospace;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    text-align: left;
  }
  
  .menu-box h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff;
    font-size: 18px;
    text-align: center;
  }
  
  .menu-box p {
    margin: 6px 0;
    font-size: 14px;
  }
  
  #info-close-btn {
    margin-top: 15px;
    background: #444;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
  }
  
  #info-close-btn:hover {
    background-color: rgb(129, 126, 126);
  }
  


/* settings.css */
#settings-display {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.5);
  }

#settings-display.visible {
  display: block;
}

#settings-display.hidden {
  display: none;
}

#settings-display-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
}

#settings {
  width: 550px;
  height: 500px;
  position: relative;
  color: #bebebe;
  background-color: #222222;
  border-radius: 15px;
  border: 1px solid #353535;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

#settings-close-btn {
  width: 30px;    
  height: 30px;
  position: absolute;
  right: -10px;
  top: -10px;
  color: #FFFFFF;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background-color: #141414;
  border: 1px solid #353535;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#settings-close-btn:hover {
  background-color: rgb(129, 126, 126);
  box-shadow: 0 0 8px rgb(129, 126, 126);
}

#settings-container {
  padding: 10px;
}

#settings .tabs {
  justify-content: center;
  width: 100%;
  display: flex;
  gap: 10px;
}

#settings .tab {
  padding: 10px 20px;
  border-radius: 8px;
  background-color: #333333;
  font-size: 15px;
  color: #FFFFFF;
  border: 1px solid #3d3d3d;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

#settings .tab.active {
  background-color: #3362a3;
  color: #FFFFFF;
  box-shadow: 0 0 10px #3362a3;
}

#settings .tab:hover {
  background-color: #223d64;
  box-shadow: 0 0 10px #223d64;
}

#settings .tabs-container {
  max-height: 430px;
  margin-top: 10px;
  overflow-y: auto;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: #55585c #222222; /* Thumb and track colors */
}

#settings .tabs-container::-webkit-scrollbar {
  width: 6px; /* Thin scrollbar */
}

#settings .tabs-container::-webkit-scrollbar-thumb {
  background-color: #55585c;
  border-radius: 3px;
}

#settings .tabs-container::-webkit-scrollbar-track {
  background-color: #222222;
}

#settings .tab-content {
  display: none;
}

#settings .tab-content.active {
  display: block;
}

#settings .option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  color: #ffffff;
  background-color: #292929;
  border-bottom: 1px solid #292929;
  transition: background-color 0.3s ease;
}



#settings .option:hover {
  background-color: #1f1e1e;
}

#settings .toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

#settings .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#settings .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}

#settings .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

#settings input:checked + .slider {
  background-color: #3362a3;
}

#settings input:checked + .slider:before {
  transform: translateX(20px);
}

.setting-slider {
  -webkit-appearance: none;
  width: 120px;
  height: 6px;
  background-color: #444;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.setting-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background-color: #3362a3;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.setting-slider:hover {
  background-color: #3362a3;
}

.slider-value {
  font-size: 12px;
  text-align: center;
  padding: 2px 4px;
  margin-left: 5px;
  border-radius: 5px;
  background-color: #3362a3;
  color: white;
}

#settings .hotkey-input {
  width: 40%;
  text-align: center;
  color: #FFFFFF;
  padding: 5px 8px;
  border-radius: 5px;
  background-color: #292929; /* Same as slider background */
  border: 1px solid #555; /* Same as slider border */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#settings .hotkey-input:hover {
  background-color: #3362a3; /* Same as active slider background */
  box-shadow: 0 0 10px #3362a3; /* Same hover effect as tab */
}


#settings .hotkey-input.selected {
  border-color: #3362a3; /* Highlight selected state */
}

#settings .mouseActions {
  width: 40%;
  text-align: center;
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #292929; /* Same as slider background */
  border: 1px solid #555; /* Same as slider border */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-size: 14px; /* Custom font size */
  font-family: Arial, sans-serif; /* Custom font */
  appearance: none; /* Remove default dropdown arrow */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  background-image: url('data:image/svg+xml;base64,...'); /* Custom arrow icon */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px; /* Adjust arrow size */
  padding-right: 30px; /* Space for custom arrow */
}

#settings .mouseActions:hover {
  background-color: #3362a3; /* Hover background */
  box-shadow: 0 0 10px #3362a3; /* Hover effect */
}

#settings .mouseActions:focus {
  outline: none; /* Remove default focus outline */
  border: 1px solid #3362a3; /* Custom border on focus */
  box-shadow: 0 0 5px rgba(51, 98, 163, 0.8); /* Focus glow effect */
}

#settings .mouseActions option {
  background-color: #292929; /* Option background */
  color: #FFFFFF; /* Option text color */
  padding: 8px; /* Option padding */
}

#settings .mouseActions option:hover {
  background-color: #3362a3; /* Option hover background */
}

.color-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}


/* ui.css */
.logo {
    width: 330px;
}

.player-inputs {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.form-control {
    font-family: 'Ubuntu';
    font-weight: 600;
    color: #464646;
    text-align: center;
    border-radius: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    padding: 10px 10px;
    background-image: linear-gradient(to bottom, #ffffff 70%, #ececec 50%);
}

.input-nickname {
    width: 50%;
}

.input-tag {
    width: 20%;
}

.buttons-group {
    display: flex;
    gap: 10px;
}

.button {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    cursor: pointer;
    padding: 8px 10px;
    -webkit-text-stroke: black;
    -webkit-text-stroke-width: 1px;
    letter-spacing: -1px;
}

.button i {
    font-size: 20px;
}

.gallery-button {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    line-height: 70px;
    padding: 0;
    background-image: linear-gradient(to bottom, #e74646 70%, #d04040 50%);
}

.gallery-button .plus {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);

    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;

    background-image: url('https://scrux.io/plus.8976a56d.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.gallery-button:hover {
    background-image: linear-gradient(to bottom, #f06363 70%, #e65a5a 50%);
}

.play-button {
    width: 200px;
    background-image: linear-gradient(to bottom, #7ce746 70%, #71d040 50%);
}

.play-button:hover {
    background-image: linear-gradient(to bottom, #9ef867 70%, #8bdb5a 50%);
}

.spectate-button {
    background-image: linear-gradient(to bottom, #F5B700 70%, #e2ac0e 50%);
}

.spectate-button:hover {
    background-image: linear-gradient(to bottom, #ffce3d 70%, #efc444 50%);
}

.settings-button {
    background-image: linear-gradient(to bottom, #333333 70%, #272727 50%);
}

.settings-button:hover {
    background-image: linear-gradient(to bottom, #555555 70%, #444444 50%);
}

.restart-button {
    background-image: linear-gradient(to bottom, #008bf8 70%, #0b7dd6 50%);
}

.restart-button:hover {
    background-image: linear-gradient(to bottom, #56b5ff 70%, #45acfd 50%);
}

.server-select {
    display: flex;
    gap: 10px;
}

.server-select-input {
    width: 250px;
    font-family: 'Ubuntu';
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF;
    padding: 12px 10px;
    background-color: #4b4b4b;
    border: 1px solid #646464;
    border-radius: 8px;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
    cursor: pointer;
    -webkit-text-stroke: black;
    -webkit-text-stroke-width: 1px;
    letter-spacing: -1px;
    background-image: linear-gradient(to bottom, #333333 70%, #272727 50%);
    outline: none;
    box-shadow: none;
}