/**
 * 个人中心「修改键位」内嵌预览：与 play.html 竖屏 #wrap同一套比例、游戏区与按键皮肤（类名前缀 fj2me-pkv-）。
 */
.fj2me-play-keymap-preview {
  --gap: 8px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.fj2me-play-keymap-preview.fj2me-pkv-wrap {
  width: 100%;
  height: 420px;
  max-height: 58vh;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  border: none;
  box-sizing: border-box;
}

.fj2me-pkv-game-area {
  flex: 62 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: #000;
  padding: 0;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

.fj2me-pkv-screen-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 与 play.html一致：状态/说明叠在游戏区上方，不占竖向主画面高度 */
.fj2me-pkv-screen-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  max-height: 44%;
  overflow: auto;
  padding: 6px 8px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(18, 22, 30, 0.95), rgba(12, 14, 20, 0.72));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.fj2me-pkv-hud-line {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.35;
  color: #c5d4e0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  word-break: break-word;
}

.fj2me-pkv-hud-line:last-child {
  margin-bottom: 0;
}

.fj2me-pkv-hud-primary {
  font-size: 12px;
  color: #9fd2ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.fj2me-pkv-hud-status {
  font-size: 12px;
  color: #9fe7a4;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* 与 #screen-wrap 相同：整区居中承载「画面」 */
.fj2me-pkv-screen-inner {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: relative;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 与 #screen 一致：纯黑、等比限制在区域内（无装饰性渐变边框） */
.fj2me-pkv-screen-fake {
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 3 / 4;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.fj2me-pkv-pad-wrap {
  flex: 38 1 0;
  min-height: 0;
  padding: var(--gap);
  padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
  background: #1f2125;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  touch-action: none;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.fj2me-pkv-pad-wrap,
.fj2me-pkv-pad-wrap * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

.fj2me-pkv-center-col {
  display: none;
}

.fj2me-pkv-pad-main {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: var(--gap);
  min-height: 0;
}

.fj2me-pkv-pad-right-stack {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.fj2me-pkv-num-pad {
  flex: 1 1 auto;
  min-height: 0;
}

.fj2me-pkv-func-row {
  display: none !important;
}

.fj2me-pkv-nav-pad {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
}

.fj2me-pkv-num-pad,
.fj2me-pkv-nav-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
  min-height: 0;
}

/* 与 play.html .pad-btn 完全一致（竖屏） */
.fj2me-play-keymap-preview .pad-btn {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 1px solid #56595f;
  border-radius: 9px;
  background: linear-gradient(180deg, #3a3c41 0%, #2f3237 100%);
  color: #f2f2f2;
  font-weight: 700;
  font-size: clamp(19px, 2.4vh, 32px);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 3px rgba(0, 0, 0, 0.45);
  transition: transform 0.06s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  overflow: visible;
  white-space: normal;
  text-align: center;
  padding: 2px 3px;
  box-sizing: border-box;
}

.fj2me-play-keymap-preview .pad-btn .sub {
  font-size: clamp(10px, 1.2vh, 14px);
  color: #b9bcc2;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.fj2me-play-keymap-preview .pad-btn .keymap-bind-hint {
  font-size: 0.58em;
  font-weight: 600;
  color: #b9bcc2;
  line-height: 1.15;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.fj2me-play-keymap-preview .pad-btn.ok {
  font-size: clamp(17px, 2vh, 28px);
  background: linear-gradient(180deg, #4d5058 0%, #383b42 100%);
}

.fj2me-play-keymap-preview .pad-btn.text {
  font-size: clamp(14px, 1.7vh, 22px);
}

.fj2me-play-keymap-preview .pad-spacer {
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

.fj2me-play-keymap-preview .pad-btn:active {
  transform: translateY(1px) scale(0.98);
  background: linear-gradient(180deg, #474a51 0%, #35383e 100%);
}

.fj2me-play-keymap-preview .pad-btn.fj2me-pkv-vk--active {
  outline: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35) inset;
}

.fj2me-play-keymap-preview .fj2me-pkv-pad-wrap button[data-action="fullscreen"] {
  display: none !important;
}

@media (max-height: 760px) {
  .fj2me-play-keymap-preview {
    --gap: 6px;
  }
  .fj2me-pkv-game-area {
    flex: 60 1 0;
  }
  .fj2me-pkv-pad-wrap {
    flex: 40 1 0;
  }
}

/* 个人中心弹窗内：给足高度，使 62/38 分区接近游玩页观感 */
body.steam-store .fj2me-keymap-modal .fj2me-play-keymap-preview.fj2me-pkv-wrap {
  height: min(100dvh - 220px, 720px);
  min-height: min(480px, 52vh);
  max-height: min(100dvh - 160px, 92vh);
}