/* ### INTERNAL ### */
@font-face {
    font-family: "balatro";
    src: url('balatro.woff2') format('woff2');
    font-display: swap;
    unicode-range: U+0000-00FF; /* Latin Characters */
}
body {
    image-rendering: pixelated; /*disable anti-aliasing*/
 
    /* visual */
    background-color: #000; /*black bg*/
    background-image: url("delta.gif");
    background-repeat: no-repeat; /* Prevents the image from tiling */
    background-position: center; /* Centers the image horizontally and vertically */
    background-size:cover; /* Scales the image to cover the entire container */
    background-attachment: fixed; /*bg scrolls with view*/
 
    height: 100vh;
 
    color: #8E6BDF; /*all text color change*/
    text-align: center; /*center elements*/
    text-shadow: 0px 0px 4px #00000080; /*80 in end: 50% opacity*/
}
/* ### VISUAL ### */
/*set every text to font*/
* {font-family: "balatro", "balatro", sans-serif;}
/*hide underline in links*/
a {text-decoration: none;}
.rainbowtxt {
    background: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.floatanim {
    /* animation */
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}
.wave-text span{
  display:inline-block;
  animation: wave 1.6s ease-in-out infinite;
  background: inherit;
  -webkit-background-clip: text;
  color: transparent;
}
.wave {
  animation: wave 2s ease-in-out infinite;
}
.rainbow-text {
  /* Vibrant Colors */
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
  background-size: 300% auto;
 
  text-shadow:none;
  /* Text Coloring Setup */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
 
  /* Animation */
  animation: rainbow-animation 4s linear infinite;
}
/* ### CLICK TO CONTINUE SCREEN ### */
/* Fullscreen overlay */
#startScreen {
    position: fixed;
    inset: 0;
    background: black;
 
    display: flex;
    align-items: center;      /* vertical center */
    justify-content: center;  /* horizontal center */
 
    cursor: pointer;
    transition: opacity 1s ease;
 
    z-index: 9999;
}
 
/* Fade class */
#startScreen.fade {
    opacity: 0;
}
 
/* Pixel style text */
#startText {
    color: white;
    font-size: 3em;
}
/* ### MUSIC PLAYER ### */
/* PLAYER */
#playerUI{
position:fixed;
bottom:10px;
left:50%;
transform:translateX(-50%) scale(0.75);
transform-origin:bottom center;
display:flex;
align-items:center;
gap:20px;
background:rgba(95,84,123,0.75);
padding:16px 22px;
border-radius:12px;
color:white;
text-shadow:2px 2px 5px black;
user-select: none;
}
/* DISC */
#disc{
width:80px;
height:80px;
}
.spin{
animation:spin 5s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
/* INFO */
#info{
display:flex;
flex-direction:column;
align-items:center;
min-width:260px;
}
#title{
margin-bottom:4px;
text-align:center;
color:#FF746C;
filter:hue-rotate(0deg);
animation:rainbowTitle 6s linear infinite;
}
/* rainbow */
@keyframes rainbowTitle{
0%{filter:hue-rotate(0deg);}
100%{filter:hue-rotate(360deg);}
}
/* character spans */
#title span{
display:inline-block;
white-space:pre;
color:inherit !important;
background:none !important;
-webkit-background-clip:unset !important;
animation:wave2 1.2s ease-in-out infinite;
}
@keyframes wave2{
0%{transform:translateY(0px);}
50%{transform:translateY(-5px);}
100%{transform:translateY(0px);}
}
#length{
margin-bottom:8px;
}
/* CONTROLS */
.controls{
display:flex;
gap:10px;
justify-content:center;
}
button{
background:black;
color:white;
border:1px solid #666;
padding:6px 10px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
button:hover{
background:#333;
}
.material-icons{
font-size:20px;
}
/* ### ANIMATIONS ### */
@keyframes wave{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
@keyframes rainbow-animation {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
@keyframes rotation {
  from {
    /* Start at 0 degrees */
    transform: rotate(0deg);
  }
  to {
    /* End at 360 degrees (a full turn) */
    transform: rotate(360deg);
  }
}