@import url("https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap");

:root {
  --drum-pads-container-height: 50svh;
  --drum-pads-container-width: 50svh;

  --controls-container-height: 10svh;
  --controls-container-width: 50svh;

  --effects-container-height: 20svh;
  --effects-container-height-large: 40svh;
  --effects-container-width: 50svh;

  --header-height: 9svh;
  --header-width: 50svh;

  /* --pad-color: rgb(102, 59, 51);
  --pad-color-hover: rgb(217, 107, 85); */
  --pad-color: rgb(0, 0, 0);
  --pad-color-hover: rgb(33, 33, 33);
  --pad-color-active: rgb(77, 77, 77);

  --pad-text-small: 1.5vmin;
  --pad-text-large: 2.5vmin;

  --container-color: #8b9b9f;

  /* Modal sizing */
  --modal-width-large: 50vw;
  --modal-height-large: 70vh;
  --modal-width-small: 80vw;
  --modal-height-small: 80vh;

  --secondary-color: #33c1ff; /* Bright Blue for interactive elements */
  --accent-color: #ffd700; /* Golden Yellow for effects and highlights */

  /* Background and Text Colors */
  --background-color: #1e1e1e; /* Dark Gray for the overall background */
  --pad-background-color: #2c2c2c; /* Slightly lighter gray for drum pad background */
  --text-color: #ffffff; /* White for primary text */
  --muted-text-color: #aaaaaa; /* Light gray for secondary text */

  /* Shadows and Borders */
  --shadow-color: rgba(0, 0, 0, 0.5); /* Soft black shadow for depth */
  --border-color: #444444;
}

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

* {
  font-family: "Kode Mono", monospace;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100svh;
  margin: 0;
  /* background-color: #f0f0f0; */
  background-color: black;
  font-family: sans-serif;
  
  overflow: hidden;
  
  touch-action: none;
}

h2 {
  font-size: medium;
}

h3 {
  font-size: small;
}

#main-content-container {
  /* display: grid; */
  grid-template-columns: 1fr;
  box-shadow: 0px 0px 60px 5px rgba(255, 255, 255, 0.55);
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--header-height);
  width: var(--header-width);
  color: var(--text-color);
  /* grid-area: main-header; */
}

.container {
  background-color: var(--container-color);
  /* #ffd14a #9e9f8a d7d7d7*/
  border: 1px solid black;
  /* border-radius: 10px; */
  padding: 10px 0px;
}

header {
  background: var(--container-color);
  color: black;
}

#start-text {
  color: var(--text-color);
  margin-bottom: 3rem;
  text-align: center;
}

#start-btn {
  border: 1px solid;
}

#pads-container {
  width: var(--drum-pads-container-width);
  height: var(--drum-pads-container-height);
  padding: 1rem;
  grid-area: pads;
}

#controls-container {
  width: var(--controls-container-width);
  height: var(--controls-container-height);
  padding: 1rem;
  grid-area: controls;
}

#effects-container {
  width: var(--effects-container-width);
  height: var(--effects-container-height);
  padding: 1rem;
  grid-area: effects;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 10px;
  height: 100%;
  width: 100%;
}

#pads-container .grid-container {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 0.4fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "title title title title"
    ". . . ."
    ". . . ."
    ". . . ."
    ". . . .";
}

#controls-container .grid-container {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
}

#effects-container .grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 10% 90%;
  grid-template-areas:
    "title title title"
    ". . .";
}

#pad-effects {
  display: none;
}

.pad-effect-div {
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
}

.pad-effect-inner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.pad-effect-inner-row {
  width: 100%;
  height: 50%;
  gap: 0.2rem;
  display: flex;
}

.pad-effect-inner-select {
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 6px;
  display: grid;
  place-content: center;
}

.pad-effect-inner-select p {
  color: white;
  text-align: center;
  line-height: 100%;
}

.pad-effect-inner-select.active {
  background: var(--secondary-color);
}

.pad-effect-inner-select.active:hover {
  background: var(--secondary-color);
  opacity: 0.8;
  cursor: pointer;
}

.pad-effect-inner-select:hover {
  background: var(--pad-color-hover);
  cursor: pointer;
}

.pad-effect-inner p {
  font-size: 1.1vmin;
}

.pad-effect-div p {
  font-size: 1.5vmin;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item.title {
  grid-area: title;
  justify-content: space-around;
}

.hidden {
  display: none;
}

button {
  background-color: var(--pad-color);
  border-style: none;
  color: white;
  font-weight: bold;
  padding: 10px;
  margin-inline: auto;
  width: auto;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

button:hover {
  background-color: var(--pad-color-hover);
  transform: translateY(2px);
  box-shadow: 0 0 rgba(0, 0, 0, 0);
}

.btn {
  background-color: var(--pad-color);
  border-style: none;
  color: white;
  font-weight: bold;
  padding: 10px;
  margin-inline: auto;
  width: auto;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

.btn:hover {
  background-color: var(--pad-color-hover);
  transform: translateY(2px);
  box-shadow: 0 0 rgba(0, 0, 0, 0);
}


.pad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--pad-color);
  color: white;
  font-weight: bold;
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);

  touch-action: auto;
}

.pad:hover {
  background-color: var(--pad-color-hover);  
}

.pad.active {
  background-color: var(--pad-color-active);
  transform: translateY(2px) scale(0.9);
  box-shadow: 0 0 rgba(0, 0, 0, 0);
}

.pad p {
  font-size: 2.5vmin;
  font-weight: bolder;
}

.pad small {
  font-size: 1.2vmin;
  color: #cccccc;
  display: none; /* small text only shown on larger browsers */
}

.pad.control p {
  font-size: 1.5vmin;
  padding: 0.5rem;
}

.pad.control small {
  font-size: 1vmin;
}

.slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 10px;
  position: relative;
  bottom: 0;
}

.slider-container input[type="range"] {  
  appearance: none; /* removes browser-specific styling */
  --h: 60%;
  width: var(--h); /* width of slider (actually the height when rotated)*/
  height: 1.5rem; /* height of slider */
  background: #000000;
  outline: none; /* remove outline */
  margin-block: calc(var(--h) / 2);
  transform: rotate(270deg); /* rotate the element */
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* removes browser-specific styling */
  width: 0.8rem; /* handle width */
  height: 1.5rem; /* handle height */
  background: #ffffff; /* white color */
  cursor: pointer; /* cursor on hover */
}

.slider2 {
  appearance: none;
  max-width: 200px;
  height: 1rem;
  background: #000000;
  outline: none;
}

.slider2::-webkit-slider-thumb {
  appearance: none; /* removes browser-specific styling */
  width: 0.5rem; /* handle width */
  height: 1rem; /* handle height */
  background: white;
  cursor: pointer; /* cursor on hover */
}

.slider-value {
  font-size: 1.8vmin;
  text-align: center;
  position: relative;
  margin-top: auto;
  margin-bottom: 0;
}

.slider-name {
  position: relative;
  font-weight: bold;
  font-size: 1.8vmin;
}

.step-active-indicator {
  width: 1.4rem;
  height: 0.5rem;
  background: var(--muted-text-color);
  border-radius: 0.5rem;
}

.step-active-indicator.active {
  background: var(--secondary-color);
}

.click-icon {
  cursor: pointer;
}

.click-icon:hover {
  color: var(--secondary-color);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* -------------------- Modal -------------------- */

#settings-modal-container {  
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.modal {
  position: absolute;
  width: var(--modal-width-small);
  height: var(--modal-height-small);
  overflow: auto;
  outline: 2px solid white;
  background: rgba(0, 0, 0, 0.789);
  display: flex;
  padding: 30px;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  color: white;
}

#close-settings-modal-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin: 30px;
}

#pad-settings-mobile {
  display: flex;
  flex-direction: column;
  height: auto;
  text-align: center;
  background: gray;
  padding: 12px 100px;
  gap: 10px;
}

#pad-settings-mobile p {
  margin: 0;
}

#landscape-manual-div{
  display: none;
}

#portrait-manual-div{
  display: block;
}

/* -------------------- Media Queries -------------------- */

/* media query for desktop size */
/* @media (min-width: 1280px) */
@media (orientation: landscape) {
  #main-content-container {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--effects-container-height-large);
    height: 50%;
  }

  /* Header */

  header {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100vw;
    background: none;
    color: white;
  }

  /* Effects Container */

  #effects-container {
    height: var(--effects-container-height-large);
  }

  #effects-container .grid-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 10% 90%;
    grid-template-areas:
      "title title title title"
      "pad-effects . . .";
  }

  #pad-effects {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-area: pad-effects;
    width: 80px;
    margin-inline: auto;
  }

  /* Pads */

  .pad small {
    display: block;
  }

  /* Slider */

  .slider-container input[type="range"] {
    position: absolute;
    --h: calc(var(--effects-container-height-large) * 0.6);
  }

  /* Modal */

  .modal {
    width: var(--modal-width-large);
    height: var(--modal-height-large);
  }

  #portrait-manual-div{
    display: none;
  }

  #landscape-manual-div{
    display: block;
  }

  /* Pad settings mobile */
  #pad-settings-mobile {
    display: none;
  }

  #pad-effects-title {
    margin-inline: 50%;
  }
}

/* -------------------- Animations -------------------- */

/* disable animation it reduced motion is on */
@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

/* Fade and Glow animation */
.animate.fade-glow {
  animation-name: animate-fade-glow;
  animation-duration: 1.5s;
  animation-fill-mode: backwards;
}
@keyframes animate-fade-glow {
  0% {
    opacity: 0;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    box-shadow: 0px 0px 60px 5px rgba(255, 255, 255, 0.55);
  }
}

/* fade animation */
.animate.fade {
  animation-name: animate-fade;
  animation-duration: 1s;
  animation-delay: calc(var(--delay) * 0.05s);
  /* animation-duration: 3s; */
  animation-fill-mode: backwards;
}
@keyframes animate-fade {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}