/* =========================================
   移动端全屏适配 - 手机浏览器统一体验
   横屏游戏自动旋转 / 竖屏页面响应式适配
   ========================================= */

/* 基础重置（仅移动端） */
.is-mobile {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* iOS 安全区域适配 */
@supports (padding: env(safe-area-inset-top)) {
  .is-mobile body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* =========================================
   横屏游戏 - 竖屏时显示旋转提示
   ========================================= */

/* 关键修复: 阻止双击缩放 (替代之前 user-scalable=no, 那个会在 Android 锁死视口) */
.is-mobile.landscape-game,
.is-mobile.landscape-game * {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}

/* 旧的强制遮罩已弃用 - 用 .landscape-hint 轻量提示条替代 */
.rotate-overlay {
  display: none !important;
}

/* =========================================
   ★ 新方案: 轻量横屏提示条 (不阻挡操作)
   ========================================= */
.landscape-hint {
  display: none;
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(135deg, rgba(16,185,129,0.95), rgba(5,150,105,0.95));
  color: #fff;
  padding: 8px 14px;
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(16,185,129,0.4);
  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  animation: hint-bounce 2s ease-in-out infinite;
}
.landscape-hint.visible {
  display: inline-flex;
}
.landscape-hint .hint-icon {
  font-size: 16px;
  animation: hint-rotate 1.5s ease-in-out infinite;
  display: inline-block;
}
.landscape-hint .hint-text {
  white-space: nowrap;
}
.landscape-hint .hint-btn {
  background: #fff;
  color: #10b981;
  border: none;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  -webkit-tap-highlight-color: transparent;
}
.landscape-hint .hint-btn:active {
  transform: scale(0.95);
  background: #f0fdf4;
}
@keyframes hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes hint-rotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* =========================================
   ★ CSS 旋转兜底: 用户点"旋转"按钮后强制横屏显示
   ========================================= */
/* 仅在竖屏且用户主动触发时才旋转 body */
.is-mobile.landscape-game.css-rotated body {
  position: fixed;
  top: 0;
  left: 100%;
  width: 100vh;
  height: 100vw;
  max-height: 100vw;
  transform: rotate(90deg);
  transform-origin: top left;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* 横屏时不旋转 */
.is-mobile.landscape-game[data-orientation="landscape"] body {
  transform: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* 横屏时强制隐藏 (虽然 JS 也设了 display:none, 这里作为 CSS 兜底) */
.is-mobile.landscape-game[data-orientation="landscape"] .rotate-overlay,
.is-mobile.landscape-game[data-orientation="landscape"] .landscape-hint {
  display: none !important;
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* =========================================
   竖屏页面 - 响应式缩放
   ========================================= */

/* 竖屏游戏自动缩放标记 */
.is-mobile.portrait-game body {
  overflow: hidden;
}

.is-mobile.portrait-game .table-container {
  transform-origin: top left;
}

/* 横屏游戏容器弹性适配 */
.is-mobile.landscape-game .game-area {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.is-mobile.landscape-game .table-container {
  flex-shrink: 0;
}

/* 小屏手机 (< 375px) */
@media screen and (max-width: 374px) {
  .is-mobile.portrait-page { font-size: 13px; }
}

/* 标准手机 (375px - 414px) */
@media screen and (max-width: 414px) {
  .is-mobile.portrait-page { font-size: 14px; }
}

/* 大屏手机 (414px+) */
@media screen and (min-width: 415px) and (max-width: 768px) {
  .is-mobile.portrait-page { font-size: 15px; }
}

/* iOS 独立模式 */
.mobile-standalone {
  position: fixed;
  width: 100%;
  height: 100%;
}

/* =========================================
   PWA 独立模式（添加到主屏幕后）
   ========================================= */
.is-pwa body {
  /* PWA 模式下使用全部高度 */
  min-height: 100vh;
  min-height: 100dvh;
}

.is-pwa {
  /* PWA 状态栏背景 */
  --pwa-status-h: env(safe-area-inset-top, 0px);
}

.is-pwa .pwa-statusbar-spacer {
  height: var(--pwa-status-h);
  width: 100%;
  background: var(--theme-color, #10b981);
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* PWA 模式下底部导航栏适配 */
.is-pwa .bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* PWA 模式下隐藏 URL 栏模拟控件 */
.is-pwa .bottom-actions {
  display: none !important;
}

/* =========================================
   增强型响应式（适配各种屏幕）
   ========================================= */

/* 折叠屏 / 大屏手机横屏 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .is-mobile .table-container {
    transform-origin: center center;
  }
}

/* 平板竖屏 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .is-mobile .container {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* 超小屏 (iPhone SE 1代等) */
@media screen and (max-width: 320px) {
  .is-mobile.portrait-page { font-size: 12px; }
  .is-mobile .game-img { height: 90px !important; }
  .is-mobile .func-icon { width: 36px; height: 36px; font-size: 18px; }
}

/* 全面屏安全区域适配 */
@supports (padding: max(0px)) {
  .is-mobile .bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .is-mobile .float-buttons {
    bottom: max(90px, calc(90px + env(safe-area-inset-bottom)));
  }
}

/* 横屏时游戏的 iPhone 刘海适配 */
@supports (padding: env(safe-area-inset-left)) and (orientation: landscape) {
  .is-mobile.landscape-game .rotate-overlay {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}