html, body {
  margin: 0;
  padding: 0;
}

/* 父容器 */
.joycon-container {
  display: flex;
  justify-content: center; /* 水平居中内层 div */
  align-items: center; /* 垂直居中内层 div */
  width: 100%; /* 父容器宽度 */
  height: 100vh; /* 父容器高度填满视口 */
}

/* 内层 div，控制两个 joycon 的排列 */
.joycon-container > div {
  display: flex;             /* 让左右 joycon 横向并排 */
  align-items: center;       /* 两个 joycon 垂直对齐 */
  height: 100%;              /* 确保 div 填满父容器 */
  /*transform-origin: center center; !* 设置缩放的中心点 *!*/
  /*will-change: transform;*/
  /*transform:scale(1);      !* 放大整体 *!*/
}

/* 防止双击缩放和长按菜单 */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 确保joycon手柄部分和摇杆事件不冲突 */
.joycon,
.joystick {
  touch-action: none; /* 禁用浏览器默认手势 */
}

/* 所有类型的按钮都优化 */
.main-buttons button, /* ABXY/方向按钮 */
.in-buttons button, /* SL/SR按钮 */
.back-buttons, /* L/R/ZL/ZR肩部按钮 */
.joycon span, /* +/- 按钮 */
.joycon i { /* Home/Capture 按钮 */
  touch-action: manipulation; /* 禁用双击缩放，优化响应 */
}

/* ==================== JOYCON 基础结构 ==================== */
.joycon {
  width: 75px;
  height: 220px;
  display: inline-block;
  margin: 0 25px;
  border-top: 5px solid rgba(255, 255, 255, 0.4);
  border-bottom: 10px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.joycon:nth-child(1) {
  background-color: #00b2dc;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.joycon:nth-child(2) {
  background-color: #ff493e;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

/* ==================== 摇杆样式 ==================== */
.joystick {
  width: 35px;
  height: 35px;
  background: linear-gradient(to top right, #333, #60686b);
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
  position: absolute;
  cursor: pointer;
  transition: transform 0.05s ease-out; /* 提供平滑的动画效果 */
}

.joystick:after {
  content: '';
  width: 27px;
  height: 27px;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

/* 摇杆位置 - 使用独立的transform属性 */
.joycon:nth-child(1) .joystick {
  top: 40px;
  left: 20px;
}
.joycon:nth-child(2) .joystick {
  top: 110px;
  left: 20px;
}

/* ==================== 主按钮组 ==================== */
.main-buttons {
  width: 55px;
  height: 55px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.joycon:nth-child(1) .main-buttons {
  top: 100px;
}
.joycon:nth-child(2) .main-buttons {
  top: 30px;
}


/* ==================== 单个按钮基础样式 ==================== */
/* 只设置通用属性，不要重置transform！ */
.joycon button,
.joycon .back-buttons,
.joycon span,
.joycon i {
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, box-shadow, opacity;
  transition: all 0.05s ease;
}

/* 方向/功能按钮 */
.joycon .main-buttons button {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: absolute;
  /*border: none;*/
  background: linear-gradient(to top right, #222, #666);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  font-size: 8pt;
  transition: all 0.05s ease;
  cursor: pointer;
}

.joycon:nth-child(1) .main-buttons button {
  color: #252525;
}
.joycon:nth-child(2) .main-buttons button {
  color: #bbb;
}


/* 按钮内容样式 */
.joycon .main-buttons button::before {
  content: '';
  width: 100%;
  height: 100%;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  transform: rotate(40deg);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}

/* 左Joy-Con方向按钮文字 */
#up::after { content: '▲'; }
#down::after { content: '▼'; }
#left::after { content: '◀'; }
#right::after { content: '▶'; }

/* 左Joy-Con方向按钮位置 */
#joycon-l .main-buttons #up {
  left: 19px;
  top: 0;
}

#joycon-l .main-buttons #down {
  left: 19px;
  bottom: 0;
}

#joycon-l .main-buttons #left {
  top: 19px;
  left: 0;
}

#joycon-l .main-buttons #right {
  top: 19px;
  right: 0;
}

/* 右Joy-Con功能按钮文字 */
#y::after { content: 'Y'; }
#x::after { content: 'X'; }
#a::after { content: 'A'; }
#b::after { content: 'B'; }

/* 右Joy-Con功能按钮位置 */
#joycon-r .main-buttons #y {
  top: 19px;
  left: 0;
}

#joycon-r .main-buttons #x {
  left: 19px;
  top: 0;
}

#joycon-r .main-buttons #a {
  top: 19px;
  right: 0;
}

#joycon-r .main-buttons #b {
  left: 19px;
  bottom: 0;
}

/* main-buttons按下效果 */
.joycon .main-buttons button.pressed {
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5) !important; /* 简化阴影 */
  transform: translateY(1px) !important;
  opacity: 0.8;
  background: linear-gradient(to top right, #111, #444) !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

/* ==================== +/- 按钮 ==================== */
.joycon span {
  position: absolute;
  top: 15px;
  width: 13px;
  height: 4px;
  background: #333;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

.joycon:nth-child(1) span {
  right: 8px;
}
.joycon:nth-child(2) span {
  left: 8px;
}
.joycon:nth-child(2) span:after {
  content: '';
  width: 4px;
  height: 13px;
  background: #333;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: -4px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}

/* ==================== Home & Capture 按钮 ==================== */
.joycon i {
  width: 15px;
  height: 15px;
  background: #333;
  position: absolute;
  top: 170px;
}
.joycon:nth-child(1) i {
  right: 15px;
  border-radius: 2px;
}

.joycon:nth-child(1) i:after {
  content: '';
  width: 65%;
  height: 65%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border-top: 1px solid rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
}
.joycon:nth-child(2) i {
  left: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  margin: -3px;
  box-shadow: 0px 0px 1px #000;
}

/* 为 'plus', 'home', 'minus', 'capture' 添加按下效果 */
.joycon span.pressed,
.joycon i.pressed {
  transform: translateY(1px) !important;
  box-shadow: none !important;
  opacity: 0.8 !important;
}

.joycon:nth-child(2) span.pressed:after,
.joycon:nth-child(2) span.pressed {
  background: #222 !important;
}


/* ==================== 肩部按钮 L/R/ZL/ZR ==================== */
.back-buttons {
  content: '';
  position: absolute;
  width: 140px;
  height: 90px;
  border-radius: 50px;
  border: 4px solid #333;
  transition: all 0.05s ease;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.joycon:nth-child(1) #l {
  transform: rotate(0deg);
  top: -8px;
  left: 0;
  clip-path: polygon(25% 0%, 25% 15%, 15% 35%, 0 35%, 0 0);
    display: block;
}

.joycon:nth-child(2) #r {
  transform: rotate(0deg);
  top: -8px;
  right: 0;
  clip-path: polygon(75% 0%, 75% 15%, 85% 35%, 100% 35%, 100% 0);
}

.joycon:nth-child(1) #zl {
  transform: rotate(0deg);
  top: -8px;
  left: 0;
  clip-path: polygon(25% 0, 50% 0, 50% 15%, 25% 15%);
    display: block;
}

.joycon:nth-child(2) #zr {
  transform: rotate(0deg);
  top: -8px;
  right: 0;
  clip-path: polygon(50% 0, 75% 0%, 75% 15%, 50% 15%);
}

.joycon .back-buttons.pressed {
  box-shadow: none !important;
  transform: translateY(1px) !important;
  opacity: 0.8 !important;
}


/* ==================== SL/SR 按钮 ==================== */

/* SL/SR按钮特殊位置和按下效果 */
.joycon .in-buttons button {
  width: 30px;
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(to top right, #333, #666);
  border: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

/*位置设置*/
/* SL/SR按钮位置设置 */
.joycon:nth-child(1) #lsl {
  position: absolute;
  top: 55px;
  left: 120%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center center;
}

.joycon:nth-child(1) #lsr {
  position: absolute;
  top: 155px;
  left: 120%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center center;
}

.joycon:nth-child(2) #rsl {
  position: absolute;
  top: 155px;
  left: -20%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center center;
}

.joycon:nth-child(2) #rsr {
  position: absolute;
  top: 55px;
  left: -20%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center center;
}

/* 为LSL、LSR、RSL 和 RSR按钮指定文本 */
.joycon:nth-child(1) #lsl:after {
  content: 'SL';
}
.joycon:nth-child(1) #lsr:after {
  content: 'SR';
}
.joycon:nth-child(2) #rsl:after {
  content: 'SL';
}
.joycon:nth-child(2) #rsr:after {
  content: 'SR';
}

/* 按钮内的文字 */
.in-buttons button:after {
  content: attr(id);
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  color: #bbb;
}

/* SL/SR按钮的按下效果 */
.joycon .in-buttons button.pressed {
  box-shadow: none !important;
  background: linear-gradient(to top right, #111, #444) !important;
  opacity: 0.8 !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}

/* 第一组按钮 (LSL, LSR) 按下时的效果 */
.joycon:nth-child(1) .in-buttons button.pressed {
  transform: translateY(1px) translateX(-50%) rotate(90deg) !important;
}

/* 第二组按钮 (RSL, RSR) 按下时的效果 */
.joycon:nth-child(2) .in-buttons button.pressed {
  transform: translateY(1px) translateX(-50%) rotate(-90deg) !important;
}
/*===================SL SR===================*/


/* ==================== 侧面滑块 ==================== */
.joycon:before {
  content: '';
  width: 5px;
  height: 90%;
  background: #333;
  position: absolute;
  top: 6%;
}
.joycon:nth-child(1):before {
  right: -5px;
}
.joycon:nth-child(2):before {
  left: -5px;
}


/* ==================== 辅助样式 ==================== */
figure {
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
}

/* 按钮聚焦状态 */
.joycon button:focus {
  outline: 0;
}