/* =========================================================
   KARAS PAD KP-1
   Hardware Image : 1024 × 1536 (2:3)
   ========================================================= */

/* =========================================================
   GLOBAL
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      #252535 0%,
      #09090d 70%
    );
  color: #fff;
  font-family: monospace;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* =========================================================
   OUTER WRAPPER
   ========================================================= */
.outer-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
}
/* =========================================================
   HARDWARE CONTAINER
   1024 × 1536 = 2 : 3
   ========================================================= */
.app-container {
  position: relative;
  width: min(
    calc(100vw - 10px),
    430px
  );
  aspect-ratio: 2 / 3;
  max-height: calc(100vh - 10px);
  height: auto;
  overflow: hidden;
  background: #111;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px #050505,
    0 0 20px rgba(0, 0, 0, 0.9);
}
/* =========================================================
   HARDWARE IMAGE
   images/kp1.png
   ========================================================= */
.hardware-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
/* =========================================================
   UI LAYER
   ========================================================= */
.ui-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
/* =========================================================
   FILE INPUT
   ========================================================= */
#audioFile {
  position: absolute;
  top: 34%;
  left: 15%;
  width: 70%;
  height: 28px;
  padding: 4px;
  font-family: monospace;
  font-size: 9px;
  color: #aeeeee;
  background:
    rgba(0, 0, 0, 0.75);
  border:
    1px solid #00f0ff;
  border-radius: 3px;
  box-shadow:
    0 0 5px
    rgba(0, 240, 255, 0.35);
}
/* =========================================================
   DEMO / PLAY
   ========================================================= */
.transport-controls {
  position: absolute;
  top: 26%;
  right: 10%;
  display: flex;
  gap: 7px;
}
/* =========================================================
   BUTTON
   ========================================================= */
button {
  min-width: 55px;
  height: 29px;
  padding: 0 10px;
  font-family: monospace;
  font-size: 10px;
  font-weight: 900;
  color: #000;
  background:
    linear-gradient(
      180deg,
      #00f0ff 0%,
      #00b8c7 100%
    );
  border:
    2px solid #050505;
  border-radius: 5px;
  cursor: pointer;
  box-shadow:
    3px 3px 0 #ff007f;
  transition:
    transform 0.05s ease,
    box-shadow 0.05s ease;
}

button:active {
  transform:
    translate(2px, 2px);
  box-shadow: 1px 1px 0 #ff007f;
  background: #ff007f;
  color: white;
}


/* =========================================================
   XY PAD
   ========================================================= */

#pad {
  position: absolute;
  top: 40%;
  left: 19%;
  width: 62%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  /*
    パッド背景画像
  */
  background-image:
    url('../images/kp1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*
    画像の上に薄く黒を重ねる
  */
  background-color:
    rgba(0, 0, 0, 0.2);
  background-blend-mode: multiply;
  border:
    2px solid
    rgba(255, 0, 127, 0.85);
  box-shadow:
    inset
    0 0 15px
    rgba(0, 0, 0, 0.7),
    0 0 10px
    rgba(255, 0, 127, 0.35);
}
/* =========================================================
   PAD GRID
   パッド画像の上にグリッドを表示
   ========================================================= */

#pad::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      rgba(255, 0, 127, 0.25) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 0, 127, 0.25) 1px,
      transparent 1px
    );
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 2;
}
/* =========================================================
   PAD POINTER
   ========================================================= */
#pointer {
  position: absolute;
  width: 36px;
  height: 36px;
  display: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 0, 127, 0.95) 35%,
      rgba(255, 0, 85, 0.6) 65%,
      rgba(255, 0, 85, 0) 100%
    );
  box-shadow:
    0 0 12px
    #ff007f,
    0 0 25px
    rgba(255, 0, 127, 0.8);
  filter: blur(1px);
  mix-blend-mode: screen;
  z-index: 10;
}
/* =========================================================
   SPEED / PITCH
   ========================================================= */
.bottom-controls {
  position: absolute;
  left: 10%;
  bottom: 6%;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
/* =========================================================
   LABEL
   ========================================================= */
label {
  font-size: 11px;
  color: #00f0ff;
  font-weight: bold;
  text-shadow: 0 0 4px
    rgba(0, 240, 255, 0.5);
}
/* =========================================================
   SPEED WRAPPER
   ========================================================= */
.speed-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* =========================================================
   RESET SPEED BUTTON
   ========================================================= */
#resetSpeedBtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  background: #ff007f;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #00f0ff;
}
/* =========================================================
   RANGE
   ========================================================= */
#speed {
  width: 70%;
  accent-color: #ff007f;
}
/* =========================================================
   SMALL SCREEN
   ========================================================= */
@media (
  max-height: 650px
) {
  .app-container {
    height: 96vh;
    width: auto;
    aspect-ratio: 2 / 3;
  }

}