@import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&family=Story+Script&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --background-color:#2c2c2c;
  --container-color:#1a1a1a;
  --text-color:#e4e4e4;
  --accent-color:#a8dadc;
  --accent-color-2:#594670;
  --button-bg:linear-gradient(145deg,var(--accent-color),color-mix(in srgb,var(--accent-color) 70%,var(--accent-color-2)));
}

html{
  height:100%;
  font-size:24px;
  font-family:Sniglet,Arial,sans-serif;
  background:var(--background-color);
  color:var(--text-color);
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
}

main{width:100%;display:flex;justify-content:center}

.enter-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.82);
  z-index:1000;
  cursor:pointer;
}

.enter-card{
  padding:2rem 2.8rem;
  text-align:center;
  border:2px solid var(--accent-color-2);
  border-radius:1rem;
  background:var(--container-color);
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  transform:scale(1.15);
}

.enter-card h2{margin-bottom:.4rem;color:var(--accent-color)}
.enter-card p{font-size:.8rem;color:var(--text-color)}
.enter-overlay.hidden{opacity:0;pointer-events:none;transition:opacity .25s ease}

#about{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.2rem;
  padding:2.3rem;
  border:2px solid var(--accent-color-2);
  border-radius:1.2rem;
  background:var(--container-color);
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  transform:scale(1.03);
}

#user{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  text-align:center;
}

#user img{
  width:auto;
  border:4px solid var(--accent-color-2);
  border-radius:50%;
  transform:scale(1.03);
}

#description{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  width:min(25vw,24rem);
  max-width:100%;
  justify-content:flex-start;
  transform:scale(1.03);
}

#achievements{display:flex;gap:1rem}

.achievement{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  font-size:.75rem;
  text-align:center;
  text-decoration:underline;
}

.achievement img{width:4rem;height:4rem;object-fit:cover;border-radius:20%}

.audio-player{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:1rem 1.05rem 1.1rem;
  margin-top:auto;
  min-width:12.5rem;
  position:relative;
  overflow:hidden;
  border:2px solid var(--accent-color-2);
  border-radius:.95rem;
  background:linear-gradient(145deg,var(--container-color),#0f0f0f);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-color-2) 35%,black),0 8px 18px rgba(0,0,0,.24);
  transform:scale(1.05);
}

.audio-player::before{
  content:"";
  position:absolute;
  inset:.35rem;
  border:1px solid rgba(255,255,255,.06);
  border-radius:.7rem;
  pointer-events:none;
}

.player-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  width:100%;
  position:relative;
  z-index:1;
}

.player-row:first-child{padding:.25rem 0 .15rem}
.player-row:last-child{padding-top:.2rem}

.audio-player input,
.audio-player button{
  font:inherit;
  padding:.25rem .45rem;
  border:1px solid var(--accent-color-2);
  border-radius:.4rem;
  background:var(--button-bg);
  color:var(--container-color);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}

.audio-player input[type="range"]{
  width:3.4rem;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  accent-color:var(--accent-color);
  color:var(--accent-color);
}

.audio-player input[type="range"]::-webkit-slider-runnable-track{
  height:.25rem;
  border-radius:999px;
  background:rgba(255,255,255,.15);
}

.audio-player input[type="range"]::-webkit-slider-thumb{
  width:1rem;
  height:1rem;
  border-radius:50%;
  background:var(--accent-color);
  border:1px solid var(--accent-color-2);
  margin-top:-.38rem;
  appearance:none;
}

.audio-player input[type="range"]::-moz-range-track{
  background:rgba(255,255,255,.15);
  height:.25rem;
  border-radius:999px;
}

.audio-player input[type="range"]::-moz-range-progress{
  background:var(--accent-color);
  height:.25rem;
  border-radius:999px;
}

.audio-player input[type="range"]::-moz-range-thumb{
  width:1rem;
  height:1rem;
  border-radius:50%;
  background:var(--accent-color);
  border:1px solid var(--accent-color-2);
}

.track-title{
  flex:1;
  min-width:0;
  padding:.2rem .35rem;
  overflow:hidden;
  text-align:center;
  font-size:.7rem;
  white-space:nowrap;
  text-overflow:ellipsis;
  border-radius:999px;
  color:var(--text-color);
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 20%,transparent),color-mix(in srgb,var(--accent-color-2) 20%,transparent));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12);
}

.progress-wrap{
  width:100%;
  height:.35rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
}

.progress-bar{height:100%;width:0%;background:var(--accent-color);border-radius:inherit}
.audio-player button{cursor:pointer;font-weight:700}

.nav-btn{padding:.2rem .45rem;min-width:1.8rem;display:inline-flex;align-items:center;justify-content:center}
.nav-btn img{width:.9rem;height:.9rem;object-fit:contain;display:block}

.audio-player .player-row:last-child::before,
.audio-player .player-row:last-child::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:1.1rem;
  height:1.1rem;
  border:2px solid var(--accent-color-2);
  border-radius:50%;
  background:radial-gradient(circle,var(--accent-color) 0%,var(--accent-color-2) 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);
}
.audio-player .player-row:last-child::before{left:.2rem}
.audio-player .player-row:last-child::after{right:.2rem}

h1{font-family:Story Script,Arial,sans-serif;font-size:3rem;color:var(--accent-color)}
footer{display:flex;position:absolute;bottom:1em;left:50%;transform:translateX(-50%);font-size:.5rem}
.highlighted{color:var(--accent-color);font-size:1.5em}

@media (max-width:900px){
  #about{flex-direction:column;padding:1.5rem}
  #description{width:min(100%,24rem)}
}

@media (max-width:600px){
  html{font-size:20px}
  #about{gap:1.2rem;padding:1.2rem}
  .audio-player{min-width:0;width:100%;transform:none}
  .audio-player input[type="range"]{width:2.8rem}
}