* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #2d2d2d;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
overflow-y:hidden;
	
}

h1 {
  position: relative;
	left:1.5rem;
  font-family: "New Rocker", system-ui;
  font-weight: 100;
  font-style: normal;
  font-size: 2.25em;
  translate: 0 -0.25em;
  text-shadow: 
    0 -1px 0 #fff,
    0 1px 0 #2e2e2e,
    0 2px 0 #2c2c2c,
    0 3px 0 #2a2a2a,
    0 4px 0 #282828,
    0 5px 0 #262626,
    0 6px 0 #242424,
    0 7px 0 #222,
    0 8px 0 #202020,
    0 9px 0 #1e1e1e,
    0 10px 0 #1c1c1c,
    0 11px 0 #1a1a1a,
    0 12px 0 #181818,
    0 13px 0 #161616,
    0 14px 0 #141414,
    0 15px 0 #121212,
    0 22px 30px rgba(0,0,0,0.9);
}
h3{
display:flex;
	justify-content: center;
	align-items:center;	
position:absolute;
	font-family:"New Rocker", system-ui;
	font-size:2.7em;
	top:0.6em;left:30%;align-self:center;
	width:40%;background:transparent;
	z-index:9;
}
.topBtns {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-shrink: 0;
}

button {
  font-family: "New Rocker", system-ui;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Botão Start */
#startBtn {
 padding: 0.4rem 1.2rem;
  font-size: 1rem;
  background-color: #1a1a1a;
  color: #fff;
  border: 1px solid #008b00;
  border-radius: 6px;
  box-shadow: 0 0 6px #008b0088;
  margin-top: 0.5rem;
  transition: transform 0.2s ease, background 0.3s ease;
}
#startBtn:hover {
   background-color: #2a2a2a;
  transform: scale(1.05);
}

/* Botão Pause */
#pauseBtn {
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  background-color: #444;
  color: white;
  margin-top: 0.5rem;
}
#pauseBtn:hover {
  background-color: #666;
}

#restartBtn {
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  background-color: #1a1a1a;
  color: #fb1000;
  border: 1px solid #fb1000;
  border-radius: 6px;
  box-shadow: 0 0 6px #fb100088;
  margin-top: 0.5rem;
}
#restartBtn:hover {
  background-color: #666;
}

/* Botão Info */
#infoBtn {
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  background-color: #1a1a1a;
  color: #ffcc00;
  border: 1px solid #8b8000;
  border-radius: 6px;
  box-shadow: 0 0 6px #8b800088;
  margin-top: 0.5rem;
}
#infoBtn:hover {
  background-color: #2a2a2a;
  transform: scale(1.05);
}

/* Botão Configurações */
#configBtn {
  padding: 0.4rem 1.2rem;
  font-size: 1rem;
  background-color: #1a1a1a;
  color: #00d9ff;
  border: 1px solid #005f6a;
  border-radius: 6px;
  box-shadow: 0 0 6px #00d9ff88;
  margin-top: 0.5rem;
}
#configBtn:hover {
  background-color: #2a2a2a;
  transform: scale(1.05);
}
/* Container principal com ícones e slider */
.volume-container {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 2rem;
	
	border-radius: 0.82rem 0.82rem 0.82rem 0.82rem;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	border: solid 0px #008273;
}

.icon svg {
	display: block;
	cursor: pointer;
	width: 32px;
	height: 32px;
	fill: #111;
	transition: fill 33ms ease;
	filter: drop-shadow(1px 1px 2px #9cffec) drop-shadow(1px 1px #9cffec)
		drop-shadow(-1px -1px #111);
}
.icon:hover svg {
	fill: rgba(5, 15, 36, 1);
	filter: drop-shadow(1px 1px 2px #9cffec) drop-shadow(1px 1px #9cffec)
		drop-shadow(-1px -1px rgba(0, 130, 115, 1));
}

.icon:active svg {
	fill: #fff;
	filter: drop-shadow(1px 1px 2px #9cffec) drop-shadow(1px 1px #9cffec)
		drop-shadow(-1px -1px #000);
}

/* Slider estilizado */
.slider {
	appearance: none;
	width: 180px;
	height: calc(1em - 2px);
	background: linear-gradient(90deg, rgb(98 255 235) 48%, rgba(0, 0, 0, 1) 48%);
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	transition: background 0.3s ease;
	filter: drop-shadow(-1px -1px rgba(0, 130, 115, 1))
		drop-shadow(1px 1px rgba(0, 130, 115, 1))
		drop-shadow(0px 1px rgba(0, 130, 115, 1))
		drop-shadow(1px 0px rgba(0, 130, 115, 1))
		drop-shadow(0px -1px rgba(0, 130, 115, 1))
		drop-shadow(-1px 0px rgba(0, 130, 115, 1));
}

/* Linha do range (WebKit) */
.slider::-webkit-slider-runnable-track {
	height: 1em;
	background: transparent;
	border-radius: 3px;
	border: solid 2px #fff;
}

/* Thumb (ponteiro) - WebKit */
.slider::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	background: linear-gradient(90deg, rgb(98 255 235) 48%, rgba(0, 0, 0, 1) 48%);
	border: 2px solid white;
	border-radius: 50%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transform: scale(1.2);
	transition: transform 0.2s ease;
	margin-top: -6px; /* alinha no centro da trilha */
}
.slider:hover::-webkit-slider-thumb {
	transform: scale(1.22);
}

/* Firefox */
.slider::-webkit-slider-thumb {
	appearance: none;
	width: 32px;
	height: 32px;
	background: #a6ffed;
	background: radial-gradient(
		circle,
		rgba(166, 255, 237, 1) 0%,
		rgba(156, 255, 236, 1) 43%,
		rgba(31, 255, 218, 1) 69%,
		rgba(0, 130, 115, 1) 84%,
		rgba(0, 0, 0, 1) 97%,
		rgba(255, 255, 255, 1) 100%
	);
	background-size: contain;
	border: 0.25em solid rgba(0, 130, 115, 1);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
	translate: 0 -0.5em;
}

/* ::-moz para Firefox */
.slider::-moz-range-thumb {
	width: 32px;
	height: 32px;
	background: #a6ffed;
	background: radial-gradient(
		circle,
		rgba(166, 255, 237, 1) 0%,
		rgba(156, 255, 236, 1) 43%,
		rgba(31, 255, 218, 1) 69%,
		rgba(0, 130, 115, 1) 84%,
		rgba(0, 0, 0, 1) 97%,
		rgba(255, 255, 255, 1) 100%
	);
	background-size: contain;
	border: none;
	border-radius: 50%;
	translate: 0 -0.5em;
	cursor: pointer;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
/* Grupo dos botões de nível */
.level-options {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.level-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(0, 0, 0, 0.92);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s;
  filter: drop-shadow(-1px -1px rgba(0, 130, 115, 1))
          drop-shadow(1px 1px rgba(0, 130, 115, 1))
          drop-shadow(0px 1px rgba(0, 130, 115, 1))
          drop-shadow(1px 0px rgba(0, 130, 115, 1))
          drop-shadow(0px -1px rgba(0, 130, 115, 1))
          drop-shadow(-1px 0px rgba(0, 130, 115, 1));
	
}

.level-options label:has(input[type="radio"]:checked){
	background-color: rgba(0, 0, 0, 0.52);
	border: 1px solid #00d9ff44;
}


.level-options input[type="radio"] {
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: radial-gradient(
    circle,
    rgba(166, 255, 237, 1) 0%,
    rgba(156, 255, 236, 1) 43%,
    rgba(31, 255, 218, 1) 69%,
    rgba(0, 130, 115, 1) 84%,
    rgba(0, 0, 0, 1) 97%,
    rgba(255, 255, 255, 1) 100%
  );
  background-size: cover;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s;
  position: relative;
  flex-shrink: 0;
}

.level-options input[type="radio"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: rgba(98, 255, 235, 1);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s ease-in-out;
}

.level-options input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
	background-color:#ff6577;
}

.level-options input[type="radio"]:checked {
  box-shadow: 0 0 0 3px rgba(98, 255, 235, 0.4);
  border-color: #a6ffed;
	
}

.level-options span {
  color: #a6ffed;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(98, 255, 235, 0.6);
  user-select: none;
  letter-spacing: 0.5px;
  font-size: 1rem;
}

.popover-wrapper {
  position: relative;
  display: inline-block;
}

/* Estilo do popover de configurações */
#configPopover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  padding: 1rem;
  width: fit-content;
  background: rgba(24, 24, 24, 0.95);
  border-radius: 12px;
  border: 1px solid #00d9ff44;
  box-shadow: 0 0 12px #00d9ff55;
  color: white;
  font-family: "New Rocker", system-ui;
  z-index: 999;
  display: none;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease-out;
}

/* Animação suave de entrada */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Estilo do Popover */
.popover {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 400px;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(10, 10, 10, 0.85);
  border: 2px solid #ffcc00;
  border-radius: 12px;
  box-shadow: 0 0 15px #ffcc00aa;
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 1.5rem;
  display: none;
}
.popover-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	
}
.popover-content h2 {
  font-family: "New Rocker", system-ui;
  color: #f9ff00;
  text-shadow: 0 0 5px #ff6a00;
  margin-top: 0;
}

.popover-content p {
  font-size: 1rem;
  line-height: 1.4;
  color: #ddd;
}

.popover-content button {
  margin-top: 1rem;
  background-color: #8b0000;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.popover-content button:hover {
  background-color: #aa0000;
}

/* Classe utilitária */
.hidden {
  display: none;
}


.game {
  display: grid;
  grid-template-columns: repeat(5, 80px);
  grid-template-rows: 400px 50px;
  gap: 0px;
  margin-top: 1rem;

perspective: 800px;
  perspective-origin: center top;
  transform-style: preserve-3d;
padding-bottom:0.5em;
}
@keyframes changeColor {
  0% {
    filter: hue-rotate(0deg) /* Vermelho */
  }
  25% {
    filter: hue-rotate(-18deg) /* Verde */
  }
  50% {
    filter: hue-rotate(0deg) /* Azul */
  }
	75% {
    filter: hue-rotate(18deg) /* Azul */
  }
	100% {
    filter: hue-rotate(0deg) /* Azul */
  }
}

.lane {
 background: 
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 0px,
      transparent 0px,
      transparent 10vh
    ),
    linear-gradient(to bottom, #00000028, #4444442f);
 /*background-image:url(../img/laneBg1.png);*/
  background-size: 100% 10vh;
  background-position-y: 0;
  animation: changeColor 5s infinite linear;
  border-left: 1px solid #44444444;
  border-right: 1px solid #44444444;
  position: relative;
  transform-origin: top center;
  transform: rotateX(46deg);
  overflow: visible;
	translate:0 0.25rem;
	z-index:-9;
	box-shadow:0px 0px 5px #000;
}
.lane::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(0,0,0,0.05);
  transform: translateX(-50%);
  pointer-events: none;
	z-index:-9;
}
@keyframes scrollLines {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 20vh;
  }
}
.note {

width: 60px;
  height: 30px;
  border-radius: 50%;
	box-shadow:0px 1px 0 white,0px 2px 0 white,0px -1px 1px white,0px -1px 0 white,1px 0px 0 white,-1px 0px 0 white;
  position: absolute;
  left: 10px;
  transform: translateZ(0) rotateX(39deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
	transform:scale(0.8);
transition: opacity 550ms ease-in-out;
}

.key {
  background: transparent;
  text-align: center;
  line-height: calc(50px + 1.28rem);
  font-size: 1.25rem;
	min-width:calc(50px + 1.28rem);
	height: auto;
	font-family: "New Rocker", system-ui;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
  border: 1px solid #888;
  opacity: 0.7;
  transform: rotateX(95deg);
	align-self:center;
	z-index:99;
	margin-bottom:0.98rem;
}

[data-key="a"]{
  transform: rotateX(55deg) translate(-4.5em, -0.82rem)  scale(0.87)!important;
  color: #6aff00;
	background: #6AFF0018;
	position:absolute;
	border-bottom:solid 2px #6aff00;
	bottom:0;left:0.82rem;
 
/*background: radial-gradient(circle,rgba(106, 255, 0, 0.97) 50%, rgba(52, 125, 0, 0.98) 100%);*/
}
[data-key="s"]{
  transform: rotateX(55deg) translate(-2.25em, -0.82rem)  scale(0.87)!important;
  color: #ff0e00;
	border-bottom:solid 2px #ff0e00;
	background: #ff0e0018;
	position:absolute;
	bottom:0;left:calc(25% - 0.82rem);
/*background: radial-gradient(circle,rgba(255, 14, 0, 0.97) 50%, rgba(255, 14, 0, 0.98) 100%);*/
}

[data-key="j"]{
  transform: rotateX(55deg) translate(0em, -0.82rem)  scale(0.87)!important;
  color: #f9ff00;
	border-bottom:solid 2px #f9ff00;
	background: #f9ff0018;position:absolute;
	bottom:0;left:calc(50% - 25px - 0.72rem);
/*background: radial-gradient(circle,rgba(249, 255, 0, 0.97) 50%, rgba(249, 255, 0, 0.98) 100%);*/
}

[data-key="k"]{
  transform: rotateX(55deg) translate(2.25em, -0.82rem)  scale(0.87)!important;
  color: #006aff;
	border-bottom:solid 2px #006aff;
	background: #006aff18;
	position:absolute;
	bottom:0;right:calc(25% - 0.82rem);
/*background: radial-gradient(circle,rgba(0, 106, 255, 0.97) 50%, rgba(0, 106, 255, 0.98) 100%);*/
}

[data-key="l"]{
  transform: rotateX(55deg) translate(4.5em, -0.82rem)  scale(0.87)!important;
  color: #ff6a00;
	border-bottom:solid 2px #ff6a00;
	background: #ff6a0018;
	position:absolute;
	bottom:0;right:0.82rem;
/*background: radial-gradient(circle,rgba(255, 106, 0, 0.97) 50%, rgba(255, 106, 0, 0.98) 100%);*/
}

.note.hit {
  animation: hitFlash 250ms ease-in-out;
}

.note.miss {
  animation: missFlash 0.2s ease-out;
}

@keyframes hitFlash {
  0% { transform: scale(0.8) matrix(0.9, 0, 0, 1.4, 0, 0); opacity: 1; filter:brightness(1.4) }
  100% { transform: scale(0.8) matrix(0.9, 0, 0, 1.4, 0, 0); opacity: 1; filter:brightness(1.6)}
}

@keyframes missFlash {
  0% { transform: translateY(0) matrix(0.9, 0, 0, 1.4, 0, 0); opacity: 1; filter: grayscale(55%) scale(0.8)}
100% { transform: translateY(15px) matrix(0.9, 0, 0, 1.4, 0, 0);opacity: 0; filter: grayscale(100%) scale(0.8) }
}
.hud {
  position: fixed; /* antes estava 'absolute' */
  top: 1rem;
  font-size: 1.1rem;
  font-family: "Segoe UI", sans-serif;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #444;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  text-shadow: 0 0 5px #000;
  z-index: 9999; /* força estar no topo absoluto da pilha */
  pointer-events: none; /* evita que clique interfira */
}

/* Feedback Element Styles */
.hit-feedback {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  text-shadow: 0 0 10px rgba(0,0,0,0.8) !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}


.hud.left {
  left: 1rem;
transform: translateZ(0);
  transform-style: preserve-3d;
  backface-visibility: visible;
	translate:-25vw 0;
}

.hud.right {
  right: 1rem;
  text-align: right;
transform: translateZ(0);
  transform-style: preserve-3d;
  backface-visibility: visible;
	translate:25vw 0;
}

.hud span {
  font-weight: bold;
  color: gold;
}


.gameIconImage {
  position: absolute;
  border-radius: 30%;
  top: 475px;
  left: 140px;
  width: 225px;
  height: 100px;
}

.gameIconImage:hover {
  position: absolute;
  border-radius: 30%;
  top: 475px;
  left: 140px;
  width: 225px;
  height: 100px;
  opacity: 0.75;
}

.gameIconImageOther {
  position: absolute;
  border-radius: 30%;
  top: 475px;
  right: 140px;
  width: 225px;
  height: 100px;
}

.gameIconImageOther:hover {
  position: absolute;
  border-radius: 30%;
  top: 475px;
  right: 140px;
  width: 225px;
  height: 100px;
  opacity: 0.75;
}

.returnToGamePage {
  position: absolute;
  top: 600px;
  left: 160px;
  font-size: 1.65rem;
  font-weight: 1000;
  text-align: center;
  color: red;
}

.returnToGamePage:hover {
  position: absolute;
  top: 600px;
  left: 160px;
  font-size: 1.7rem;
  font-weight: 1000;
  text-align: center;
  color: violet;
}

.returnToGamePageOther {
  position: absolute;
  top: 600px;
  right: 160px;
  font-size: 1.65rem;
  font-weight: 1000;
  text-align: center;
  color: red;
}

.returnToGamePageOther:hover {
  position: absolute;
  top: 600px;
  right: 160px;
  font-size: 1.7rem;
  font-weight: 1000;
  text-align: center;
  color: violet;
}