/* ===== NES/FC 游戏合集 新版样式 ===== */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overscroll-behavior: none; }

body {
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  background: #1c1a1a;
  color: #ccc;
  -webkit-tap-highlight-color: transparent;
}

/* 屏蔽长按呼出菜单/选择（手机浏览器长按画布会弹"倍速"等提示） */
body, canvas, button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 顶部横幅 ---------- */
.topbar { width: 100%; }
.banner {
  height: 150px;
  background: #232020 url(../images/templatemo_banner_bg.jpg) center top no-repeat;
  background-size: cover;
  border-bottom: 1px solid #000;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 12px 30px;
}

/* ---------- 游戏卡片 ---------- */
.game-card {
  background: #262323;
  border: 1px solid #3a3636;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}

/* 画面容器：初始约 700px 宽（80% 大小），居中 */
.game-shell {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  aspect-ratio: 256 / 240;
  background: #000;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
}

#screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 系统全屏（手机端自动进入）时画面铺满视口 */
html:fullscreen .game-shell,
html:-webkit-full-screen .game-shell {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: none;
  border-radius: 0;
}

/* 放大：在页面内放大到接近全屏的尺寸（不进入全屏，不遮浏览器界面） */
.game-shell.stage-zoom {
  width: 96%;
  max-width: 1100px;
}

/* 浏览器内全屏：画面铺满窗口，但保留浏览器界面 */
.game-shell.stage-fs {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border: none;
  border-radius: 0;
  background: #000;
}
body.stage-fs-lock { overflow: hidden; }

/* 浏览器内全屏时的关闭按钮 */
.fs-exit {
  display: none;
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  width: 40px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.game-shell.stage-fs .fs-exit { display: block; }

/* ---------- 控制条 ---------- */
.controls-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

.controls-bar select {
  min-width: 220px;
  max-width: 100%;
  padding: 6px 8px;
  background: #191717;
  color: #eee;
  border: 1px solid #4a4646;
  border-radius: 5px;
  font-size: 14px;
}

.controls-bar button {
  padding: 6px 14px;
  background: linear-gradient(#3c3838, #2b2828);
  color: #eee;
  border: 1px solid #555;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.controls-bar button:hover:not(:disabled) { background: linear-gradient(#4a4545, #353131); }
.controls-bar button:disabled { opacity: .45; cursor: default; }

#status {
  text-align: center;
  color: #8f8a8a;
  font-size: 13px;
  margin: 10px 0 0;
}

#shellHome[hidden] { display: none; }

/* ---------- 说明面板（游戏下方） ---------- */
.info-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 20px;
}
.panel {
  flex: 1 1 320px;
  max-width: 460px;
  background: #262323;
  border: 1px solid #3a3636;
  border-radius: 10px;
  padding: 12px 16px;
}
.panel-title {
  font-size: 16px;
  color: #ffd24a;
  margin-bottom: 8px;
  border-bottom: 1px solid #3a3636;
  padding-bottom: 6px;
}
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li {
  padding: 5px 8px;
  margin: 3px 0;
  background: #1e1c1c;
  border-radius: 4px;
  font-size: 13px;
  color: #bbb;
}

.footer {
  text-align: center;
  padding: 14px 0 20px;
  color: #666;
  font-size: 13px;
}
.footer a { color: #999; }

/* ---------- 手机端：暂停后的中央菜单 ---------- */
#mobileMenu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(0,0,0,.45);
}
#mobileMenu[hidden] { display: none; }
.pick-btn {
  padding: 14px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #ffd24a;
  background: rgba(0,0,0,.65);
  border: 2px solid #ffd24a;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  pointer-events: auto;
}
.pick-btn.resume { color: #7CFC9A; border-color: #7CFC9A; }
.pick-btn:active { background: rgba(255,210,74,.25); }

/* ---------- 手机虚拟按键（游戏中显示） ---------- */
/* 条带模式：按键区在画面下方，不遮挡游戏画面（兼容老内核：不用 grid/max/aspect-ratio） */
#touchUI {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 5;
}
.game-shell.stage-fs.with-touch {
  background: #0a0a0a;
  touch-action: none; /* 游戏中彻底禁用浏览器手势（滑动/下拉刷新等） */
  -ms-touch-action: none;
}
/* 画面尺寸由 JS 按像素精确计算（高度铺满、宽度等比），CSS 只负责定位方式 */
.game-shell.stage-fs.with-touch #screen {
  position: absolute;
  pointer-events: none; /* 触摸不落在画布上：部分浏览器不再把长按画布当视频处理（倍速提示） */
  -webkit-user-drag: none;
}
#touchUI.strip {
  top: auto;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  background: #0a0a0a;
  border-top: 1px solid #2c2c2c;
}
/* 横屏时：按键层透明覆盖整个屏幕，十字键/AB 落在画面两侧黑边区 */
@media (orientation: landscape) {
  #touchUI.strip {
    top: 0;
    height: auto;
    background: transparent;
    border-top: none;
  }
}
/* 伪横屏（浏览器不支持横屏锁定时，内容旋转90°模拟）：同横屏布局 */
.game-shell.fake-ls #touchUI.strip {
  top: 0;
  height: auto;
  background: transparent;
  border-top: none;
}
.game-shell.fake-ls #touchUI .mid-btns {
  bottom: 14px;
  top: auto;
  margin-left: -84px;
}
#touchUI .ctl {
  pointer-events: auto;
  position: absolute;
  border: 2px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.42);
  color: rgba(255,255,255,.9);
  font-size: 15px;
  font-weight: bold;
  border-radius: 10px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 0;
  margin: 0;
}
#touchUI .ctl.active {
  background: rgba(255,210,74,.55);
  border-color: #ffd24a;
}

/* 方向键（左下，绝对定位十字布局） */
#touchUI .dpad {
  position: absolute;
  left: 14px;
  bottom: 16px;
  width: 138px;
  height: 138px;
  pointer-events: none;
}
#touchUI .dpad .ctl {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  border-radius: 8px;
}
#touchUI .dp-up    { left: 47px;  top: 0; }
#touchUI .dp-left  { left: 0;     top: 47px; }
#touchUI .dp-right { left: 94px;  top: 47px; }
#touchUI .dp-down  { left: 47px;  top: 94px; }

/* A / B（右下） */
#touchUI .ab {
  position: absolute;
  right: 14px;
  bottom: 30px;
}
#touchUI .ab .round {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 58px;
  text-align: center;
}
#touchUI .ab .round.btn-b { right: 74px; bottom: 0; }

/* 选择 / 开始（中下；竖屏时移到条带顶部，避免被手机浏览器底部工具栏挡住） */
#touchUI .mid-btns {
  position: absolute;
  left: 50%;
  margin-left: -84px;
  bottom: 14px;
  width: 168px;
  height: 34px;
}
/* 竖屏时：选择 / 开始 放到画面与按键条之间的黑缝里，与十字键隔开 */
@media (orientation: portrait) {
  #touchUI .mid-btns {
    bottom: 158px;
    margin-left: -84px;
  }
}
#touchUI .mid {
  position: absolute;
  bottom: 0;
  width: 76px;
  height: 34px;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  border-radius: 17px;
}
#touchUI .mid.btn-select { left: 0; }
#touchUI .mid.btn-start  { left: 92px; }

/* 退出按钮（左上角） */
.exit-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  padding: 8px 14px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 横屏/竖屏切换按钮（退出键右侧） */
.orient-btn {
  position: absolute;
  top: 10px;
  left: 108px;
  z-index: 6;
  padding: 8px 14px;
  background: rgba(0,0,0,.55);
  color: #ffd24a;
  border: 1px solid rgba(255,210,74,.6);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 电脑端全屏按钮（横竖屏键右侧） */
.full-btn {
  position: absolute;
  top: 10px;
  left: 108px;
  z-index: 6;
  padding: 8px 14px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 手机游玩时隐藏桌面用的 ✕（避免误触破坏布局） */
.game-shell.with-touch .fs-exit { display: none; }

/* ---------- 手机竖屏时画面保持可见 ---------- */
@media (max-width: 560px) {
  .game-shell { width: 100%; }
  .controls-bar select { flex: 1 1 100%; }
}

/* ---------- 手机端：隐藏顶部横幅，直接显示游戏区 ---------- */
@media (max-width: 900px) {
  .topbar { display: none; }
}