/*! 欣文游戏 双端适配层 v1.0 | 2026-09-18 | 回滚：删除本文件或页面内引用即失效 */
html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
canvas { max-width: 100%; }
.xw-fit { will-change: transform; }

/* 虚拟按键层（仅触摸设备/窄屏由 JS 注入） */
.xw-keys {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 10px 14px 16px; box-sizing: border-box; pointer-events: none;
}
.xw-pad {
  display: grid; pointer-events: auto;
  grid-template-areas: ". up ." "left down right";
  grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 54px); gap: 6px;
}
.xw-btn {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px; color: #fff; font: 600 18px/1 -apple-system, "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.xw-btn.xw-on { background: rgba(0, 0, 0, .55); }
.xw-up { grid-area: up; } .xw-left { grid-area: left; }
.xw-down { grid-area: down; } .xw-right { grid-area: right; }
.xw-act { pointer-events: auto; width: 76px; height: 76px; border-radius: 50%; }

/* 显示策略：由 JS 决定是否注入 .xw-keys（依据物理屏宽 + 触摸能力），
   CSS 不再用媒体查询二次过滤。
   原因：适配层 viewport 模式会把 documentElement.clientWidth 改成设计宽
   （如 960/1220），min-width:901px 这类媒体查询会随之误命中，
   导致手机上虚拟键被隐藏。这里改为注入即显示。 */
.xw-keys { display: flex; }

/* xw-rotatehint:start */
/* 横屏游戏在竖屏下的提示遮罩：<body data-adapt-orient="landscape">
   回滚：删除本段 + dual-adapt.js 中同名标记段 + 去掉 body 上的 data-adapt-orient */
.xw-rot {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 100000; display: none; box-sizing: border-box;
  background: rgba(10, 18, 26, .95); color: #fff; text-align: center;
  font: 400 15px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  align-items: center; justify-content: center; flex-direction: column;
  padding: 28px 24px; -webkit-tap-highlight-color: transparent;
}
.xw-rot.xw-on { display: flex; }
.xw-rot-ph {
  width: 104px; height: 62px; border: 3px solid #fff; border-radius: 12px;
  margin-bottom: 24px; position: relative; animation: xw-rot-anim 1.9s ease-in-out infinite;
}
.xw-rot-ph::after {
  content: ""; position: absolute; right: -15px; top: 50%; width: 5px; height: 18px;
  margin-top: -9px; background: #fff; border-radius: 3px;
}
@keyframes xw-rot-anim {
  0%, 28% { transform: rotate(90deg); }
  62%, 100% { transform: rotate(0deg); }
}
.xw-rot-t { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: .5px; }
.xw-rot-d { font-size: 14px; color: #b8c4d0; margin: 0 0 26px; }
.xw-rot-b {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 15px; padding: 11px 26px; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.xw-rot-b:active { background: rgba(255, 255, 255, .2); }
/* xw-rotatehint:end */