.xbox-controller-panel {
  display: grid;
  gap: 8px;
  width: 276px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(5, 14, 18, 0.66);
  color: #f7fbff;
  font: 700 11px "Trebuchet MS", "Segoe UI", sans-serif;
}

.controller-top,
.controller-mode-row,
.stick-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.controller-top [data-role="light"] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f5f;
}

.controller-top [data-role="light"].connected {
  background: #64ff9a;
}

.controller-mode-row button {
  flex: 1;
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  background: rgba(129, 233, 255, 0.12);
  color: #f7fbff;
  font-weight: 800;
}

.controller-mode-row button.active {
  background: rgba(129, 233, 255, 0.3);
  border-color: rgba(129, 233, 255, 0.62);
}

.stick-row {
  justify-content: space-between;
}

.stick-pad {
  position: relative;
  width: 118px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.stick-cross {
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
}

.stick-cross.horizontal { width: 74%; height: 1px; }
.stick-cross.vertical { width: 1px; height: 74%; }

.stick-dot {
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #81e9ff;
}

.stick-pad small {
  position: absolute;
  left: 6px;
  bottom: 4px;
  color: rgba(247, 251, 255, 0.65);
}

.controller-buttons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}

.controller-buttons span {
  min-height: 17px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 251, 255, 0.7);
  text-align: center;
  font-size: 9px;
}

.controller-buttons span.pressed {
  background: #81e9ff;
  color: #06222b;
}