/* --------------------------------------------------------------------------
   Center Stage Board: Honeycomb Layout (Colméia) with Absolute Positioning
   -------------------------------------------------------------------------- */
.looper-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 520px;
  margin: 0 auto;
  overflow: visible;
  display: block;
  transform-origin: 0 0;
}

/* Add Track Slot Component */
.add-track-cell {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.25s ease;
}

.add-track-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Tamanho do circulo do add track: 30% do wrapper (exatamente o diâmetro do círculo interno das tracks) */
/* Hover e eventos limitados estritamente ao botão/círculo (não ao container) */
.btn-add-track {
  width: 30%;
  height: 30%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1.5px solid rgba(115, 109, 100, 0.5);
  background: transparent;
  color: rgba(115, 109, 100, 0.45); /* Mesma cor do '+' no centro das tracks */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  outline: none;
  touch-action: none;
  pointer-events: auto; /* Apenas o círculo recebe eventos e hover */
  transition: all 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.6));
  position: relative;
}

[data-theme="dark"] .btn-add-track {
  background: transparent;
  border-color: rgba(220, 215, 205, 0.5);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

[data-theme="dark"] .add-track-plus-icon {
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

/* Background, borda e label SÓ aparecem durante o hover no círculo */
.btn-add-track:hover {
  border-style: solid;
  border-color: #ea580c;
  color: #ea580c;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 4px 14px rgba(234, 88, 12, 0.15);
  transform: scale(1.05);
}

.btn-add-track:active {
  transform: scale(0.96);
  background: rgba(234, 88, 12, 0.08);
}

.btn-add-track.is-dragging {
  cursor: grabbing;
}

.add-track-plus-icon {
  stroke: currentColor;
  transition: transform 0.2s ease, stroke 0.2s ease;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
}

.btn-add-track:hover .add-track-plus-icon {
  transform: rotate(90deg);
}

.add-track-label,
.track-btn-label,
.track-center-label {
  position: absolute;
  font-family: var(--font-main);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  color: #ea580c;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  z-index: 25;
}

[data-theme="dark"] .add-track-label,
[data-theme="dark"] .track-btn-label,
[data-theme="dark"] .track-center-label {
  color: #f97316;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.add-track-label {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}

.btn-add-track:hover .add-track-label {
  opacity: 1;
  visibility: visible;
}

/* Outward hover labels for track peripheral buttons */
.btn-track-solo .track-btn-label {
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}

.btn-track-remove .track-btn-label {
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}

.btn-track-mute .track-btn-label {
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}

.btn-track-clear .track-btn-label,
.btn-track-import .track-btn-label {
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
}

.btn-track-solo:hover .track-btn-label,
.btn-track-mute:hover .track-btn-label,
.btn-track-remove:hover .track-btn-label,
.btn-track-clear:hover .track-btn-label,
.btn-track-import:hover .track-btn-label {
  opacity: 1;
  visibility: visible;
}

/* Center button hover label (Rec / Overdub / Stop) */
.track-center-label {
  left: 50%;
  top: calc(53.2% + var(--track-center-radius, 28px) + 5px);
  transform: translateX(-50%);
}

.track-center-label.visible {
  opacity: 1;
  visibility: visible;
}

.add-track-chip-pro {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: #ea580c;
  color: #ffffff;
  margin-left: 3px;
  letter-spacing: 0.04em;
}

[data-theme="dark"] .btn-add-track:hover {
  background: rgba(45, 41, 37, 0.95);
  border-color: #f97316;
  color: #f97316;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(249, 115, 22, 0.2);
}

.looper-track-cell {
  --track-btn-size: 21px;
  --track-btn-font: 11px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  user-select: none;
  touch-action: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s ease;
  z-index: 2;
}

.looper-track-cell.is-dragging {
  transition: none !important;
  cursor: grabbing !important;
}

.looper-track-cell.is-spawning .track-hit-area {
  pointer-events: none !important;
}

.looper-track-cell.is-closing {
  transition: none !important;
  pointer-events: none !important;
}

.looper-track-cell.is-closing * {
  pointer-events: none !important;
}

.track-spawn-ring {
  position: absolute;
  top: 53.2%;
  left: 50%;
  width: 90%;
  height: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  z-index: 12;
}

.looper-track-cell.is-spawning .track-spawn-ring {
  animation: trackSpawnRing 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.looper-track-cell.is-closing .track-spawn-ring {
  animation: trackCloseRing 0.30s cubic-bezier(0.55, 0, 1, 0.45) both;
}

.looper-track-cell.is-spawning .looper-canvas {
  animation: trackSpawnCanvas 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.looper-track-cell.is-closing .looper-canvas {
  animation: trackCloseCanvas 0.30s cubic-bezier(0.55, 0, 1, 0.45) both;
}

.looper-track-cell.is-spawning .btn-track-solo {
  animation: trackSpawnBtn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}

.looper-track-cell.is-spawning .btn-track-remove {
  animation: trackSpawnBtn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s both;
}

.looper-track-cell.is-spawning .btn-track-mute {
  animation: trackSpawnBtn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.24s both;
}

.looper-track-cell.is-spawning .btn-track-import,
.looper-track-cell.is-spawning .btn-track-clear {
  animation: trackSpawnBtn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s both;
}

.looper-track-cell.is-closing .btn-track-import,
.looper-track-cell.is-closing .btn-track-clear {
  animation: trackCloseBtn 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0s forwards;
}

.looper-track-cell.is-closing .btn-track-mute {
  animation: trackCloseBtn 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.04s forwards;
}

.looper-track-cell.is-closing .btn-track-remove {
  animation: trackCloseBtn 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.08s forwards;
}

.looper-track-cell.is-closing .btn-track-solo {
  animation: trackCloseBtn 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.12s forwards;
}

.looper-track-cell.is-spawning .track-center-label {
  animation: trackSpawnCenterLabel 0.40s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s both;
}

.looper-track-cell.is-closing .track-center-label {
  animation: trackCloseCenterLabel 0.18s ease-in 0s forwards;
}

@keyframes trackSpawnRing {
  0% {
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0.95;
    border: 2px solid #ea580c;
    box-shadow: 0 0 22px rgba(234, 88, 12, 0.9), inset 0 0 12px rgba(234, 88, 12, 0.6);
  }
  35% {
    opacity: 0.9;
    border: 2px solid rgba(234, 88, 12, 0.9);
    box-shadow: 0 0 25px rgba(234, 88, 12, 0.9), inset 0 0 14px rgba(234, 88, 12, 0.6);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0.45;
    border: 1.5px solid rgba(234, 88, 12, 0.4);
    box-shadow: 0 0 12px rgba(234, 88, 12, 0.4);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 0;
    box-shadow: none;
  }
}

@keyframes trackCloseRing {
  0% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 0;
  }
  25% {
    opacity: 0.95;
    border: 2px solid #ea580c;
    box-shadow: 0 0 22px rgba(234, 88, 12, 0.9), inset 0 0 12px rgba(234, 88, 12, 0.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.12);
    opacity: 0;
    border: 3px solid #ea580c;
    box-shadow: 0 0 35px rgba(234, 88, 12, 1);
  }
}

@keyframes trackSpawnCanvas {
  0% {
    transform: scale(0.2) rotate(-75deg);
    opacity: 0;
    filter: brightness(2.2) contrast(1.3) drop-shadow(0 0 16px rgba(234, 88, 12, 0.8));
  }
  60% {
    transform: scale(1.035) rotate(3deg);
    opacity: 1;
    filter: brightness(1.2) contrast(1.05) drop-shadow(0 0 6px rgba(234, 88, 12, 0.3));
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }
}

@keyframes trackCloseCanvas {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
  }
  30% {
    transform: scale(1.04) rotate(-4deg);
    opacity: 1;
    filter: brightness(1.6) drop-shadow(0 0 14px rgba(234, 88, 12, 0.8));
  }
  100% {
    transform: scale(0.08) rotate(70deg);
    opacity: 0;
    filter: brightness(3) drop-shadow(0 0 25px rgba(234, 88, 12, 1));
  }
}

@keyframes trackSpawnBtn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    filter: brightness(2) drop-shadow(0 0 8px rgba(234, 88, 12, 0.8));
  }
  65% {
    transform: translate(-50%, -50%) scale(1.22);
    opacity: 1;
    filter: brightness(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: none;
  }
}

@keyframes trackCloseBtn {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: none;
  }
  35% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
    filter: brightness(1.8) drop-shadow(0 0 8px rgba(234, 88, 12, 0.8));
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    filter: brightness(2.5);
  }
}

@keyframes trackSpawnCenterLabel {
  0% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  70% {
    transform: translateX(-50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

@keyframes trackCloseCenterLabel {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
}

.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  touch-action: none;
}

.looper-canvas {
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  transform-origin: 50% 53.2%;
}

.track-hit-area {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}

.track-hit-area > path {
  fill: transparent;
  pointer-events: fill;
}