/* ============ 坦克大战 - 复古游戏机风格 (2560x2000 超清大屏版) ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #000;
  --bezel: #161616;
  --bezel-edge: #3a3a3a;
  --accent: #ffd700;      /* 金色标题 */
  --accent2: #ff5722;     /* 橙红 */
  --cursor: #ff3b30;      /* 经典红色光标 */
  --text: #f0f0f0;
  --dim: #8a8a8a;
  --panel: #101010;
}

html, body {
  height: 100%;
  background: #050505;
  font-family: "Courier New", "Consolas", monospace;
  color: var(--text);
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #1a1a1a 0%, #050505 75%);
}

/* 游戏机外壳 (由 JS 按窗口大小整体缩放, 保持 1920x1080 设计稿) */
#wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bezel);
  border: 4px solid var(--bezel-edge);
  box-shadow:
    0 0 0 4px #000,
    0 24px 80px rgba(0, 0, 0, 0.85),
    inset 0 0 0 2px #000;
  padding: 14px;
  transform-origin: center center;
  flex: none;
}

/* 顶栏 */
#topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 3px solid #2c2c2c;
  font-size: 34px;
}
#topbar .logo {
  color: var(--accent);
  font-weight: bold;
  letter-spacing: 8px;
  text-shadow: 3px 3px 0 #7a5c00;
}
#topbar .logo i {
  color: var(--dim);
  font-style: normal;
  font-size: 24px;
  margin-left: 14px;
  letter-spacing: 3px;
}

.mini-btn {
  background: #1c1c1c;
  color: var(--text);
  border: 3px solid #4a4a4a;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 26px;
  cursor: pointer;
  margin-left: 14px;
  letter-spacing: 2px;
  transition: none;
}
.mini-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #241f00;
}
.mini-btn:active { transform: translateY(2px); }

/* 游戏区域 (屏幕) 2560x2000 */
#game-area {
  position: relative;
  width: 2560px;
  height: 2000px;
  border: 4px solid #000;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9);
  background: #000;
  overflow: hidden;
}

#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CRT 扫描线效果 */
#game-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0.16) 4px,
    rgba(0, 0, 0, 0) 6px
  );
  z-index: 5;
}

/* 覆盖层 */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  z-index: 10;
}
#overlay.hidden { display: none; }

/* 页面加载启动期 (JS 尚未初始化): 隐藏覆盖层, 避免大字体标题界面闪烁
   (body.boot 由 index.html 初始设置, js/game.js init() 完成后移除) */
body.boot #overlay { display: none !important; }

html.touch-device body.demo-on #overlay { background: rgba(0, 0, 0, 0.94); }
.demo-hint {
  margin-top: 26px;
  color: var(--accent);
  font-size: 30px;
  letter-spacing: 6px;
  animation: demoBlink 1.2s infinite;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}
@keyframes demoBlink { 50% { opacity: 0.35; } }

/* ============================================================
 * DEMO 模式顶栏: 演示中隐藏全部菜单覆盖层, 仅保留顶部信息栏
 * "DEMO 模式 · 第 N 关 · 按回车开始游戏" (body.state-demo 由 JS 切换)
 * ============================================================ */
body.state-demo #overlay { display: none !important; }

/* DEMO 信息栏: 作为 #topbar 的中部 flex 子元素 (space-between 自动居中),
   置于"坦克大战"标题行的中间空白处, 不再覆盖游戏画布 */
#demo-bar {
  display: none;
  align-items: center;
  gap: 26px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
body.state-demo #demo-bar { display: flex; }

/* 顶栏按钮隐藏: 不占空间、不可见, 保留 DOM (便于一行恢复) */
.mini-btn.hidden { display: none; }

#demo-bar .db-demo {
  color: var(--accent);
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 6px;
  text-shadow: 2px 2px 0 #7a5c00;
}
#demo-bar .db-sep {
  color: #4a4a4a;
  font-size: 26px;
}
#demo-bar .db-stage {
  color: #fff;
  font-size: 28px;
  letter-spacing: 5px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}
#demo-bar .db-hint {
  color: var(--accent);
  font-size: 26px;
  letter-spacing: 5px;
  animation: demoBlink 1.2s infinite;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.screen.hidden { display: none !important; }

/* 标题 */
.title-logo { text-align: center; }
.logo-tank { display: flex; justify-content: center; margin-bottom: 10px; }
.logo-tank canvas {
  image-rendering: pixelated;
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.4));
}
.title-logo h1 {
  font-size: 130px;
  color: var(--accent);
  letter-spacing: 34px;
  text-shadow: 6px 6px 0 #b8860b, 10px 10px 0 rgba(0, 0, 0, 0.7);
  margin-left: 34px; /* 补偿 letter-spacing */
  font-weight: bold;
}
.title-logo h2 {
  font-size: 40px;
  color: var(--accent2);
  letter-spacing: 24px;
  margin: 12px 0 4px 24px;
  text-shadow: 3px 3px 0 #5c1a00;
}
.subtitle { color: var(--dim); font-size: 30px; margin-top: 12px; letter-spacing: 4px; }

/* 菜单 (经典红色光标) */
.menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
  min-width: 900px;
}
.menu-item {
  padding: 16px 44px;
  font-size: 40px;
  cursor: pointer;
  color: var(--text);
  letter-spacing: 4px;
  user-select: none;
  text-align: left;
  position: relative;
  transition: none;
}
.menu-item::before {
  content: "▶";
  position: absolute;
  left: 4px;
  color: var(--cursor);
  opacity: 0;
}
.menu-item small { color: var(--dim); font-size: 26px; margin-left: 18px; letter-spacing: 1px; }
.menu-item:hover, .menu-item.active {
  color: var(--accent);
  transform: translateX(18px);
}
.menu-item:hover::before, .menu-item.active::before { opacity: 1; }
.menu-item.selected {
  color: var(--accent);
}
.menu-item.selected::before { opacity: 1; }

.title-footer {
  display: flex;
  gap: 72px;
  margin-top: 32px;
  color: var(--dim);
  font-size: 28px;
  letter-spacing: 3px;
}
.copyright {
  margin-top: 18px;
  color: #555;
  font-size: 22px;
  letter-spacing: 3px;
}

/* 选关 / 难度 / 帮助 / 模式 标题 */
#screen-mode h3 {
  color: var(--accent);
  font-size: 60px;
  letter-spacing: 12px;
  margin-bottom: 16px;
  text-shadow: 3px 3px 0 #7a5c00;
}
#screen-stages h3, #screen-difficulty h3, #screen-help h3, #screen-achievements h3 {
  color: var(--accent);
  font-size: 52px;
  letter-spacing: 10px;
  margin-bottom: 16px;
  text-shadow: 3px 3px 0 #7a5c00;
}
.stage-grid {
  display: grid;
  grid-template-columns: repeat(7, 140px);
  gap: 14px;
  margin: 18px 0;
}
.stage-cell {
  width: 140px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #181818;
  border: 3px solid #3a3a3a;
  font-size: 40px;
  cursor: pointer;
  color: var(--text);
  transition: none;
}
.stage-cell:hover, .stage-cell.active { border-color: var(--accent); color: var(--accent); background: #241f00; }
.stage-cell.cleared { background: #10241a; border-color: #2e7d32; color: #66bb6a; }
.stage-cell.cleared.active { border-color: #66bb6a; color: #a5ffc0; background: #16301f; }
.stage-cell.locked { opacity: 0.4; cursor: not-allowed; border-color: #4a3a14; color: #8a7a3a; }
.stage-cell.locked:hover, .stage-cell.locked.active { border-color: #4a3a14; color: #8a7a3a; background: #181818; }

/* 解锁完整版界面 */
.unlock-price { color: var(--accent); font-size: 34px; margin-top: 10px; }
#btn-unlock-buy { color: #ffd700; }
#btn-unlock-buy:hover, #btn-unlock-buy.active { color: #ffe45e; }

/* 帮助 */
.help-box {
  background: rgba(255, 255, 255, 0.04);
  border: 3px solid #2c2c2c;
  padding: 28px 44px;
  font-size: 30px;
  line-height: 1.7;
  text-align: left;
  max-height: 920px;
  overflow-y: auto;
  width: 1500px;
}
.help-box b { color: var(--accent); }
.help-box p { margin: 3px 0; }

/* 状态文字 */
#screen-clear h3, #screen-gameover h3, #screen-victory h3 {
  font-size: 72px;
  letter-spacing: 12px;
  margin-bottom: 16px;
}
#screen-clear h3 { color: var(--accent); text-shadow: 3px 3px 0 #b8860b; }
.gameover-text { color: #e53935 !important; text-shadow: 3px 3px 0 #7f0000; animation: blink 1s infinite; }
.victory-text { color: #66bb6a !important; text-shadow: 3px 3px 0 #1b5e20; }
#screen-clear p, #screen-gameover p, #screen-victory p { color: var(--dim); font-size: 36px; }

@keyframes blink { 50% { opacity: 0.4; } }

/* 底栏 */
#bottombar {
  text-align: center;
  color: var(--dim);
  font-size: 28px;
  padding: 16px 8px 4px;
  letter-spacing: 3px;
}

/* 全站导航栏 (随 #wrap 整体缩放, 游戏机外壳风格) */
#site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  background: var(--panel);
  border: 3px solid #2c2c2c;
  padding: 8px 24px;
  margin-bottom: 14px;
  font-size: 22px;
}
#site-nav .site-logo {
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 1px;
}
#site-nav .site-logo i { font-style: normal; color: var(--dim); font-size: 16px; }
#site-nav .nav-links { display: flex; gap: 4px 2px; }
#site-nav .nav-links a {
  color: var(--dim);
  text-decoration: none;
  padding: 2px 12px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 20px;
}
#site-nav .nav-links a:hover { color: var(--text); border-color: #3a3a3a; }
#site-nav .nav-links a.active { color: var(--accent); border-color: var(--accent); }

/* 站点页脚 */
#site-footer {
  margin-top: 14px;
  text-align: center;
  background: var(--panel);
  border: 3px solid #2c2c2c;
  padding: 14px 20px 16px;
}
#site-footer .footer-links a {
  color: var(--dim);
  text-decoration: none;
  font-size: 20px;
  margin: 0 14px;
  border-bottom: 2px solid transparent;
}
#site-footer .footer-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
#site-footer .footer-copy {
  color: #666;
  font-size: 16px;
  margin-top: 8px;
  letter-spacing: 2px;
}

/* Google AdSense 广告位: 局间展示, 居中且不遮挡游戏 (默认隐藏, game.js 控制) */
#ad-slot {
  display: none;
  width: 100%;
  max-width: 970px;
  margin: 10px auto;
  min-height: 0;
  text-align: center;
  overflow: hidden;
}
#ad-slot .adsbygoogle {
  display: block;
  width: 100%;
  max-width: 970px;
  min-height: 90px; /* 自适应广告可自定高度, 不固定裁剪 */
}
#ad-slot.visible { display: block; }

/* 左右墙纸广告: 固定在视口两侧垂直居中, 宽屏有留白时才由 JS 显示 */
.side-ad {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  z-index: 9000;
  display: none; /* 默认隐藏, js/game.js updateSideAds 按可用空间控制 */
  text-align: center;
}
#ad-left  { left: 8px; }
#ad-right { right: 8px; }
.side-ad .adsbygoogle {
  display: block;
  width: 160px;
  min-height: 600px;
}

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #444; }

/* ============================================================
 * 移动端触控支持 (js/touch.js 在 <html> 加 touch-device 类后启用)
 * 横屏: 游戏画面居中, 方向键左下 / ESC·回车·开火右下, 左右上角广告
 * 竖屏: 游戏画面居中, 方向键左下 / 功能键右下, 顶部横幅广告
 * ============================================================ */

/* ---- 移动端外壳: 隐藏桌面导航/顶栏/页脚/底栏, 让游戏画面最大化 ----
   (顶栏按钮会随 #wrap 等比缩放成像素级不可用, 移动端暂停走 ESC 虚拟键,
    音效开关在标题菜单中, 语言切换暂由桌面版提供) */
html.touch-device #site-nav,
html.touch-device #topbar,
html.touch-device #bottombar,
html.touch-device #site-footer { display: none !important; }

html.touch-device #wrap { padding: 8px; }

/* ---- 覆盖层菜单: touch.js 已把 #overlay 移到 body 直属, 全屏 fixed,
        菜单等 UI 元素约束在游戏画面缩放后尺寸内 (--game-w / --game-h,
        由 js/game.js fitScale 设置), 视觉上像在游戏画面内部, 而非铺满手机屏 */
html.touch-device body > #overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2vmin;
}
/* 覆盖层隐藏: 优先级必须压过上面的 display:flex (特异性竞争), 否则游戏中
   #overlay 半透明黑层一直罩在画面上, 游戏画面会非常暗淡 */
html.touch-device body > #overlay.hidden { display: none !important; }
html.touch-device body > #overlay .screen {
  flex: none; /* flex 不收缩/拉伸: 强制按 width 渲染, 否则 overlay 的 align-items:center 会按内容收缩 */
  width: var(--game-w, 90vw);
  height: var(--game-h, 80vh);
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 2.5vmin 4vmin 3vmin;
  gap: 6px;
  overflow-y: auto;
  background: rgba(8, 8, 12, 0.78);
  border: 2px solid rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6), inset 0 0 32px rgba(0, 0, 0, 0.4);
}
html.touch-device body > #overlay .title-logo,
html.touch-device body > #overlay h1,
html.touch-device body > #overlay h2,
html.touch-device body > #overlay h3,
html.touch-device body > #overlay p,
html.touch-device body > #overlay .subtitle,
html.touch-device body > #overlay .demo-hint,
html.touch-device body > #overlay .title-footer,
html.touch-device body > #overlay .copyright { text-align: center; }
html.touch-device body > #overlay .title-logo { margin-top: 0; }
html.touch-device body > #overlay .logo-tank canvas { width: 56px; height: 56px; }
html.touch-device body > #overlay h1 { font-size: clamp(16px, 3.6vmin, 32px); letter-spacing: 4px; margin-left: 4px; text-shadow: none; }
html.touch-device body > #overlay h2 { font-size: clamp(11px, 2.4vmin, 18px); letter-spacing: 4px; margin-left: 4px; text-shadow: none; }
html.touch-device body > #overlay h3 { font-size: clamp(22px, 5.5vmin, 42px); letter-spacing: 4px; margin-bottom: 4px; text-shadow: none; }
html.touch-device body > #overlay .subtitle { font-size: clamp(10px, 2vmin, 15px); margin-top: 2px; }
html.touch-device body > #overlay .demo-hint { font-size: clamp(10px, 2.2vmin, 16px); margin-top: 4px; }
html.touch-device body > #overlay .menu { min-width: 0; width: 92%; max-width: 92%; margin-top: 4px; gap: 3px; }
html.touch-device body > #overlay .menu-item { font-size: clamp(11px, 2.4vmin, 18px); padding: 5px 10px; }
/* 移动端隐藏 ▶ 光标 (桌面 left:4px 与文字重叠), 选中只靠金色高亮 + 轻微缩进 */
html.touch-device body > #overlay .menu-item::before { content: none; }
/* 移动端选中项: 减小桌面版 translateX(18px) 的缩进幅度 (小字号下太夸张) */
html.touch-device body > #overlay .menu-item:hover,
html.touch-device body > #overlay .menu-item.active { transform: translateX(4px); }
html.touch-device body > #overlay .menu-item small { font-size: clamp(9px, 1.7vmin, 13px); margin-left: 4px; }
html.touch-device body > #overlay .title-footer { gap: 10px; margin-top: 6px; font-size: clamp(9px, 1.8vmin, 13px); flex-wrap: wrap; justify-content: center; }
html.touch-device body > #overlay .copyright { font-size: clamp(8px, 1.4vmin, 11px); }
html.touch-device body > #overlay .help-box { width: 92%; font-size: clamp(10px, 2vmin, 15px); padding: 8px 12px; max-height: 60%; }
html.touch-device body > #overlay .stage-grid { grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 5px; width: 92%; margin: 6px 0; }
html.touch-device body > #overlay .stage-cell { width: auto; height: 32px; font-size: clamp(10px, 2.2vmin, 16px); padding: 0; }
html.touch-device body > #overlay .screen p { font-size: clamp(10px, 2vmin, 15px); }
html.touch-device body > #overlay #screen-clear h3,
html.touch-device body > #overlay #screen-gameover h3,
html.touch-device body > #overlay #screen-victory h3 { font-size: clamp(16px, 4vmin, 30px); margin-bottom: 2px; }

/* ---- 虚拟按键层 (容器不拦截事件, 仅按键可点) ---- */
#touch-ui {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  display: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.touch-device #touch-ui { display: block; }

#touch-ui .tk {
  pointer-events: auto;
  touch-action: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  color: #f0f0f0;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.08s, transform 0.08s;
}
#touch-ui .tk.pressed { background: rgba(255, 255, 255, 0.32); transform: scale(0.92); }

#touch-dpad {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
}
#touch-dpad .tk-up    { grid-area: 1 / 2; }
#touch-dpad .tk-left  { grid-area: 2 / 1; }
#touch-dpad .tk-right { grid-area: 2 / 3; }
#touch-dpad .tk-down  { grid-area: 3 / 2; }

#touch-actions { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#touch-actions .tk-fire {
  background: rgba(216, 90, 48, 0.45);
  border-color: #d85a30;
  color: #ffe3d6;
  font-weight: 500;
}
#touch-actions .tk-fire.pressed { background: rgba(216, 90, 48, 0.78); }
#touch-actions .tk-fs.active { background: rgba(255, 215, 0, 0.55); border-color: #ffd700; color: #fff3c4; }
/* 声音开关: 静音时图标划掉 + 变灰 */
#touch-actions .tk-sound { font-size: 16px; }
#touch-actions .tk-sound.muted { color: #999; text-decoration: line-through; border-color: #666; }

/* ---- 横屏: 方向键左下 / 功能键右下 / 左右上角广告 ---- */
@media (orientation: landscape) {
  #touch-dpad { left: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 168px; height: 168px; }
  #touch-dpad .tk { font-size: 30px; border-radius: 12px; }

  /* 横屏功能键 3 行网格 (压矮, 总高 < 半屏, 上半部留白放广告):
     [全屏] [声音]  (36px)
     [    开火     ]  (54px, 通栏, 位置比 5 键竖排时高约一格半, 拇指更顺手)
     [ESC]  [回车]  (36px) */
  #touch-actions {
    right: 14px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 6px;
  }
  #touch-actions .tk { width: 56px; height: 36px; font-size: 13px; }
  #touch-actions .tk-fire { grid-column: 1 / -1; grid-row: 2; width: auto; height: 54px; font-size: 17px; }
  #touch-actions .tk-fs,
  #touch-actions .tk-sound { height: 36px; font-size: 15px; }

  /* 侧边广告上移到左上/右上 (避开状态栏), 自适应容器.
     容器固定 160x150 (高于此会被 overflow 裁剪): 广告区 y 40-190,
     左侧方向键顶 204 / 右侧功能键顶 228, 物理上不遮挡按键 */
  html.touch-device .side-ad { top: 40px; transform: none; width: 160px; height: 150px; overflow: hidden; }
  html.touch-device #ad-left  { left: 6px; }
  html.touch-device #ad-right { right: 6px; }
  html.touch-device .side-ad .adsbygoogle { min-height: 0; height: auto; }
}

/* ---- 竖屏: 方向键左下 / 功能键右下 / 顶部横幅广告常驻 ---- */
@media (orientation: portrait) {
  /* 竖屏 390px 宽度紧张: dpad 与 actions 必须水平互不重叠.
     dpad 130px (left:10) 占 [10,140], actions 240px (right:10) 占 [140, 380] 正好衔接 */
  #touch-dpad { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 130px; height: 130px; }
  #touch-dpad .tk { font-size: 22px; border-radius: 10px; }

  /* 竖屏功能键 2 行网格: [全屏][声音][ESC][回车] / [开火(大)]
     避免底部 Android 手势条/导航栏压住最下方的开火键
     (原竖排 4 键时开火在最底, 被系统"三"状按钮遮挡) */
  #touch-actions {
    right: 10px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 240px;
  }
  #touch-actions .tk { width: auto; height: 40px; font-size: 13px; }
  #touch-actions .tk-fire { grid-column: 1 / -1; height: 56px; font-size: 17px; }
  #touch-actions .tk-fs,
  #touch-actions .tk-sound { height: 40px; font-size: 15px; }

  /* 顶部横幅广告: 固定视口顶部常驻 (复用局间广告单元, 不新开 slot) */
  html.touch-device #ad-slot {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9500;
    margin: 0;
    max-width: none;
    display: block !important;
  }
  html.touch-device #ad-slot .adsbygoogle { max-width: none; min-height: 50px; }
}

/* 移动端全屏时浏览器安全区/地址栏残留: 页面背景统一纯黑, 消除白边感 */
html.touch-device,
html.touch-device body { background: #000; }

/* ============================================================
 * 成就系统 (趣味性四件套)
 * ============================================================ */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: min(1400px, 92%);
  max-height: 70vh;
  overflow-y: auto;
  margin: 12px 0 8px;
}
.ach-cell {
  background: #151515;
  border: 2px solid #3a3a3a;
  border-radius: 10px;
  padding: 14px 12px 12px;
  text-align: center;
}
.ach-cell .ach-icon { font-size: 56px; line-height: 1.2; }
.ach-cell .ach-name { color: #eee; font-size: 32px; margin: 6px 0 4px; letter-spacing: 2px; }
.ach-cell .ach-desc { color: #8a8a8a; font-size: 19px; line-height: 1.5; }
.ach-cell.unlocked { border-color: #ffd700; background: #241f00; }
.ach-cell.unlocked .ach-name { color: #ffd54d; }
.ach-cell.locked { opacity: 0.45; }
.ach-cell.locked .ach-desc { color: #666; }

/* 移动端: 成就网格自适应列数 */
html.touch-device body > #overlay .ach-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  width: 96%;
}
html.touch-device body > #overlay .ach-cell { padding: 10px 8px; }
html.touch-device body > #overlay .ach-cell .ach-icon { font-size: 34px; }
html.touch-device body > #overlay .ach-cell .ach-name { font-size: 18px; letter-spacing: 1px; }
html.touch-device body > #overlay .ach-cell .ach-desc { font-size: 12px; }