/* Retro Room — Phase 3c: Touch button visuals and default positions
 *
 * Improved styling for the touch overlay created by src/touch-overlay.js.
 * The input logic stays unchanged — this is purely visual enhancement.
 *
 * PS1 controller button colors used for immediate recognition:
 * - X/Triangle/Circle/Square map to left/top/right/bottom positions
 * - Colors loosely mirror the original PS1 controller (though that was
 *   black with colored symbols; here we use the symbols' colors for the
 *   buttons themselves for better mobile readability).
 */

/* ---- D-pad ---- */

.touch-dpad {
  position: absolute;
  pointer-events: auto;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 120px;
  height: 120px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(30, 30, 35, 0.95), rgba(45, 45, 55, 0.95));
  border: 2px solid rgba(80, 80, 95, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.touch-dpad::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 35%, rgba(100, 100, 120, 0.2), rgba(40, 40, 50, 0.4));
  border: 1px solid rgba(60, 60, 75, 0.5);
  pointer-events: none;
}

.dpad-hint {
  position: absolute;
  color: #8b93a7;
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dpad-hint.dpad-up    { left: 50%; top: 18%; }
.dpad-hint.dpad-down  { left: 50%; top: 82%; }
.dpad-hint.dpad-left  { left: 18%; top: 50%; }
.dpad-hint.dpad-right { left: 82%; top: 50%; }

/* ---- Face buttons (A/B/X/Y) ---- */

.touch-face-pad {
  position: absolute;
  pointer-events: none;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 150px;
  height: 150px;
}

.touch-face-btn {
  position: absolute;
  pointer-events: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
              inset 0 -2px 4px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255, 255, 255, 0.1);
  transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-size: 22px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.touch-face-btn:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
              inset 0 -1px 3px rgba(0, 0, 0, 0.4),
              inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

/* Individual button colors — PS1 controller scheme
 * X (left, blue), Triangle (top, green), Circle (right, red), Square (bottom, magenta)
 */

.touch-face-top {
  top: 0;
  left: 50px;
  background: linear-gradient(135deg, rgba(90, 178, 61, 0.85), rgba(70, 140, 50, 0.85));
  color: #e6e8ef;
}
.touch-face-top:active {
  background: linear-gradient(135deg, rgba(70, 140, 50, 0.95), rgba(50, 100, 35, 0.95));
}

.touch-face-left {
  top: 50px;
  left: 0;
  background: linear-gradient(135deg, rgba(31, 124, 209, 0.85), rgba(25, 95, 170, 0.85));
  color: #e6e8ef;
}
.touch-face-left:active {
  background: linear-gradient(135deg, rgba(25, 95, 170, 0.95), rgba(18, 70, 140, 0.95));
}

.touch-face-right {
  top: 50px;
  left: 100px;
  background: linear-gradient(135deg, rgba(232, 76, 61, 0.85), rgba(200, 50, 40, 0.85));
  color: #e6e8ef;
}
.touch-face-right:active {
  background: linear-gradient(135deg, rgba(200, 50, 40, 0.95), rgba(160, 35, 25, 0.95));
}

.touch-face-bottom {
  top: 100px;
  left: 50px;
  background: linear-gradient(135deg, rgba(217, 70, 163, 0.85), rgba(180, 50, 130, 0.85));
  color: #e6e8ef;
}
.touch-face-bottom:active {
  background: linear-gradient(135deg, rgba(180, 50, 130, 0.95), rgba(140, 35, 100, 0.95));
}

/* ---- Shoulder buttons (L1/L2/R1/R2) ---- */

.touch-shoulder-btn {
  position: absolute;
  pointer-events: auto;
  top: calc(max(10px, env(safe-area-inset-top)) + 44px);
  width: 48px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(40, 40, 50, 0.9), rgba(30, 30, 40, 0.9));
  border: 2px solid rgba(80, 80, 100, 0.6);
  color: #c0c5d5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4),
              inset 0 -1px 3px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255, 255, 255, 0.08);
  transition: all 70ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.touch-shoulder-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.touch-shoulder-l2 {
  left: max(10px, env(safe-area-inset-left));
}

.touch-shoulder-l1 {
  left: calc(max(10px, env(safe-area-inset-left)) + 54px);
}

.touch-shoulder-r1 {
  right: calc(max(10px, env(safe-area-inset-right)) + 54px);
}

.touch-shoulder-r2 {
  right: max(10px, env(safe-area-inset-right));
}

/* ---- Center buttons (SELECT/START) ---- */

.touch-center-btn {
  position: absolute;
  pointer-events: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 58px;
  height: 26px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(50, 50, 60, 0.88), rgba(35, 35, 45, 0.88));
  border: 2px solid rgba(70, 70, 90, 0.6);
  color: #a8aeb8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 70ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.touch-center-btn:active {
  transform: scale(0.95);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.touch-select {
  left: calc(50% - 62px);
}

.touch-start {
  left: calc(50% + 4px);
}

/* ---- Control panel (hide button + opacity slider) ---- */

#touch-panel {
  position: fixed;
  z-index: 13;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

#touch-hide-btn {
  appearance: none;
  border: 2px solid rgba(80, 80, 100, 0.6);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(40, 40, 50, 0.9), rgba(30, 30, 40, 0.9));
  color: #e6e8ef;
  width: 32px;
  height: 32px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#touch-hide-btn:active {
  transform: scale(0.92);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

#touch-opacity-slider {
  width: 80px;
  height: 4px;
  accent-color: #4a90d9;
  cursor: pointer;
  -webkit-appearance: slider-horizontal;
}

#touch-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90d9, #357abd);
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 100ms ease;
}

#touch-opacity-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
}

#touch-opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90d9, #357abd);
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 100ms ease;
}

#touch-opacity-slider::-moz-range-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.4);
}

/* ---- Responsive adjustments ---- */

@media (max-width: 480px) {
  /* Smaller screens: tighten spacing slightly */
  .touch-dpad {
    width: 110px;
    height: 110px;
  }

  .touch-face-pad {
    width: 140px;
    height: 140px;
  }

  .touch-face-btn {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .touch-face-top {
    left: 47px;
  }

  .touch-face-left {
    top: 47px;
  }

  .touch-face-right {
    top: 47px;
    left: 94px;
  }

  .touch-face-bottom {
    top: 94px;
    left: 47px;
  }
}

/* ---- Touch feedback states (no :hover on touch devices, but still provide visual polish) ---- */

@media (hover: hover) {
  /* Desktop: add hover state */
  .touch-face-btn:hover,
  .touch-shoulder-btn:hover,
  .touch-center-btn:hover,
  #touch-hide-btn:hover {
    opacity: 1.1;
  }
}