*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #4a3a5c url("images/bg.jpg") center / cover no-repeat;
}

@font-face {
  font-family: "Vipnagorgialla";
  src: url("fonts/Vipnagorgialla-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.board {
  --side: min(640px, calc(100vw - 24px), calc(100vh - 24px));
  --side: min(
    640px,
    calc(100dvw - 24px - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))),
    calc(100dvh - 24px - 2 * max(env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)))
  );
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: calc(var(--side) * 0.0125);
  width: var(--side);
  height: var(--side);
  margin: 0;
  padding: calc(var(--side) * 0.025);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 24, 32, 0.92), rgba(10, 12, 18, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.45);
}

.pad-c0 { --pad-light: #9d79f2; --pad-dark: #6f4bd6; --pad-glow: rgba(139, 92, 246, 0.55); --pad-light-rest: #8a74c4; --pad-dark-rest: #5f49a2; --pad-glow-rest: rgba(120, 95, 200, 0.22); }
.pad-c1 { --pad-light: #60a5fa; --pad-dark: #2563eb; --pad-glow: rgba(59, 130, 246, 0.55); --pad-light-rest: #6187bc; --pad-dark-rest: #3358a3; --pad-glow-rest: rgba(70, 120, 200, 0.22); }
.pad-c2 { --pad-light: #34d399; --pad-dark: #059669; --pad-glow: rgba(16, 185, 129, 0.55); --pad-light-rest: #49a280; --pad-dark-rest: #247357; --pad-glow-rest: rgba(50, 150, 110, 0.22); }
.pad-c3 { --pad-light: #f472b6; --pad-dark: #db2777; --pad-glow: rgba(236, 72, 153, 0.55); --pad-light-rest: #b96b94; --pad-dark-rest: #983966; --pad-glow-rest: rgba(180, 70, 120, 0.22); }
.pad-c4 { --pad-light: #fb923c; --pad-dark: #f97316; --pad-glow: rgba(249, 115, 22, 0.55); --pad-light-rest: #bd804b; --pad-dark-rest: #a66029; --pad-glow-rest: rgba(200, 120, 50, 0.22); }
.pad-c5 { --pad-light: #f87171; --pad-dark: #dc2626; --pad-glow: rgba(239, 68, 68, 0.55); --pad-light-rest: #bb6868; --pad-dark-rest: #993434; --pad-glow-rest: rgba(180, 70, 70, 0.22); }

.pad {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  overflow: hidden;
  padding: 0;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.pad:focus {
  outline: none;
}

.pad::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(to bottom, #060607, #101015);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.85);
  z-index: 0;
}

.pad::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 7px;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.36), transparent 40%),
    radial-gradient(circle at 50% 60%, var(--pad-light-rest) 0, var(--pad-dark-rest) 62%);
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.5) inset,
    0 0 6px rgba(0, 0, 0, 0.35),
    0 0 8px var(--pad-glow-rest);
  transition:
    transform 0.07s ease-out,
    box-shadow 0.15s ease-out,
    filter 0.15s ease-out,
    background 0.15s ease-out;
}

.pad:hover::before {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.62), transparent 40%),
    radial-gradient(circle at 50% 60%, var(--pad-light) 0, var(--pad-dark) 62%);
  box-shadow:
    0 0 18px rgba(0, 0, 0, 0.78) inset,
    0 0 10px rgba(0, 0, 0, 0.66),
    0 0 20px var(--pad-glow);
}

.pad:active::before,
.pad.is-lit::before {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.62), transparent 40%),
    radial-gradient(circle at 50% 60%, var(--pad-light) 0, var(--pad-dark) 62%);
  transform: translateY(1px);
  filter: brightness(1.45);
  box-shadow:
    0 0 22px rgba(0, 0, 0, 0.7) inset,
    0 0 28px rgba(0, 0, 0, 0.75),
    0 0 36px var(--pad-glow);
}

.pad:active::after,
.pad.is-lit::after {
  box-shadow:
    inset 0 0 0 2px var(--pad-light),
    0 0 14px var(--pad-glow),
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.85);
}

.pad-label {
  position: absolute;
  right: 8px;
  bottom: 7px;
  text-align: right;
  color: rgba(5, 5, 10, 0.58);
  font-size: clamp(7px, calc(var(--side) * 0.023), 15px);
  line-height: 1.05;
  font-family: "Vipnagorgialla", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  z-index: 2;
  pointer-events: none;
}

.pad audio {
  display: none;
}

@media (max-width: 768px) {
  .pad-label {
    right: 5px;
    bottom: 4px;
  }
}