/* ---------- 虚拟手柄 ---------- */
:root {
  --pad-size: clamp(128px, 40vmin, 200px);
  --btn: clamp(58px, 17vmin, 86px);
  --pad-color: #2c313d;
  --pad-hi: var(--accent);
}

#pad { display: none; }

body.pad-on #pad {
  flex: 1 1 auto;
  min-height: 190px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "dpad . ab" "meta meta meta";
  align-items: center;
  padding: 10px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l));
  touch-action: none;
}
.dpad { grid-area: dpad; }
.ab { grid-area: ab; }
.meta-keys { grid-area: meta; }
/* 竖屏：画面在上，手柄在下 */
body.pad-on #stage {
  flex: 0 0 auto;
  height: min(calc(100vw * 0.9375), 58vh);
  height: min(calc(100vw * 0.9375), 58dvh);
}

/* 十字键 */
.dpad {
  position: relative;
  width: var(--pad-size);
  height: var(--pad-size);
  justify-self: start;
  touch-action: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.dpad .arm, .dpad .hub { position: absolute; background: var(--pad-color); }
.dpad .up, .dpad .down { left: 33.3%; width: 33.4%; height: 34%; }
.dpad .left, .dpad .right { top: 33.3%; height: 33.4%; width: 34%; }
.dpad .up { top: 0; border-radius: 12px 12px 0 0; }
.dpad .down { bottom: 0; border-radius: 0 0 12px 12px; }
.dpad .left { left: 0; border-radius: 12px 0 0 12px; }
.dpad .right { right: 0; border-radius: 0 12px 12px 0; }
.dpad .hub { left: 33%; top: 33%; width: 34%; height: 34%; }
.dpad .hub::after {
  content: ""; position: absolute; inset: 28%;
  border-radius: 50%; background: #232733;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}
.dpad .arm::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; border: 8px solid transparent;
}
.dpad .up::after { border-bottom-color: #8b93a7; transform: translate(-50%, -80%); }
.dpad .down::after { border-top-color: #8b93a7; transform: translate(-50%, -20%); }
.dpad .left::after { border-right-color: #8b93a7; transform: translate(-80%, -50%); }
.dpad .right::after { border-left-color: #8b93a7; transform: translate(-20%, -50%); }
.dpad.p-up .up, .dpad.p-down .down, .dpad.p-left .left, .dpad.p-right .right { background: var(--pad-hi); }
.dpad.p-up .up::after { border-bottom-color: #fff; }
.dpad.p-down .down::after { border-top-color: #fff; }
.dpad.p-left .left::after { border-right-color: #fff; }
.dpad.p-right .right::after { border-left-color: #fff; }

/* A / B 键：两键中间区域可同时按下 A+B */
.ab {
  position: relative;
  width: calc(var(--btn) * 2.45);
  height: calc(var(--btn) * 1.9);
  justify-self: end;
  touch-action: none;
}
.round {
  position: absolute;
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: calc(var(--btn) * .36);
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff7a63, #cf301c 70%);
  box-shadow: 0 4px 0 #86200f, 0 10px 18px rgba(0, 0, 0, .45);
  transition: transform .04s;
}
.round.b { left: 0; bottom: 0; }
.round.a { right: 0; top: 0; }
.round.pressed { transform: translateY(3px) scale(.97); box-shadow: 0 1px 0 #86200f, 0 4px 8px rgba(0, 0, 0, .4); filter: brightness(1.18); }

/* SELECT / START */
.meta-keys {
  display: flex;
  gap: 16px;
  align-self: end;
  justify-content: center;
  padding-bottom: 4px;
}
.meta {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 2px; background: none; border: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--muted);
  touch-action: none;
}
.meta i {
  display: block; width: 50px; height: 16px; border-radius: 999px;
  background: #3a4051; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.meta.pressed i { background: var(--accent-2); }

/* 横屏：手柄浮在画面两侧 */
@media (orientation: landscape) {
  :root {
    --pad-size: clamp(116px, 34vmin, 160px);
    --btn: clamp(52px, 15vmin, 68px);
  }
  body.pad-on #stage { flex: 1 1 auto; height: auto; }
  body.pad-on #pad {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: calc(var(--safe-t) + var(--bar-h));
    display: block;
    min-height: 0;
    padding: 0;
    pointer-events: none;
    z-index: 4;
  }
  body.pad-on .dpad, body.pad-on .ab, body.pad-on .meta { pointer-events: auto; opacity: .9; }
  body.pad-on .dpad { position: absolute; left: calc(20px + var(--safe-l)); bottom: calc(22px + var(--safe-b)); }
  body.pad-on .ab { position: absolute; right: calc(20px + var(--safe-r)); bottom: calc(22px + var(--safe-b)); }
  body.pad-on .meta-keys {
    position: absolute;
    top: 14px; left: calc(20px + var(--safe-l)); right: calc(20px + var(--safe-r));
    justify-content: space-between;
    pointer-events: none;
  }
}