/* Speaker 3D styles - ONLY for speaker device */

/* Positioner styles for speaker */
.speaker-positioner-app {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: grab;
  will-change: transform, left, top;
}

.speaker-positioner-app:active {
  cursor: grabbing;
}

/* Optimize Speaker 3D rendering for smooth dragging */
.speaker-positioner:active .speaker-3d-wrapper,
.speaker-positioner:active .monitor-box,
.speaker-positioner:active .box-face,
.speaker-positioner:active .handle-cutout {
  transition: none !important;
}

.speaker-3d-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 0.05s ease-out;
}

.monitor-box {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.05s ease-out;
}

.box-face {
  position: absolute;
  border: 1px solid #444;
  transform-origin: center center;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.handle-cutout {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Front face with speaker grill */
.monitor-face-front {
  background: linear-gradient(135deg, #2b2b2b 0%, #111 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.monitor-face-front::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: 
    radial-gradient(circle, #1a1a1a 30%, transparent 31%),
    repeating-linear-gradient(45deg, #111, #111 2px, #050505 2px, #050505 4px);
  background-size: 6px 6px, 100% 100%;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
}

/* Other faces */
.face-back { 
  background: #161616; 
  border-color: #222; 
}

.face-top { 
  background: #1c1c1c; 
}

.face-bottom { 
  background: #121212; 
}

.face-left, .face-right { 
  background: #181818; 
  overflow: hidden;
}

/* Handle cutouts on sides */
.handle-cutout {
  position: absolute;
  width: 35%;
  height: 25%;
  top: 37%;
  left: 32.5%;
  background: #0a0a0a;
  border: 1px solid #333;
  transform: skewX(15deg);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.9);
}

/* Optimize for smooth dragging */
.speaker-positioner-app:active .speaker-3d-wrapper,
.speaker-positioner-app:active .monitor-box,
.speaker-positioner-app:active .box-face {
  transition: none !important;
}