/* ============================================
   Mobile Responsive - Complete Adaptation
   ============================================ */

/* --- Disable hover effects on touch devices --- */
@media (hover: none) {
  .card:hover {
    transform: none;
    border-color: var(--card-border);
    box-shadow:
      0 2px 8px var(--card-shadow),
      0 0 1px var(--border-accent),
      var(--glass-inset);
  }
  .card.selected {
    transform: translateY(-12px);
  }
  /* 手牌 .hand-card 的 hover 抬升已在 card-kit.css 用 @media (hover:hover) 包起，触屏天然不触发，
     无需再压平；旧 .blt-hand-row 兜底规则已随 S8 砍旧 .blt-* 一并删除。 */
  .btn:hover {
    transform: none;
  }
  .btn:hover::before {
    left: -75%;
  }
  .theme-toggle:hover {
    transform: none;
  }
}

/* --- Active states for touch feedback --- */
@media (hover: none) {
  .card:active {
    transform: scale(0.95);
    transition: transform 0.1s;
  }
  .card.selected:active {
    transform: translateY(-12px) scale(0.95);
  }
  .btn:active:not(:disabled) {
    transform: scale(0.96);
    filter: brightness(0.9);
    transition: all 0.1s;
  }
}

/* --- Global touch optimization --- */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* 对局屏 .blt-game 已改 width:100%，html 再禁横向滚动，彻底杜绝手机右溢出横滑 */
  overflow-x: hidden;
}

button, .card, .jcard,
.btn {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* ====== Tablet & Large Phone (<=768px) ====== */
@media (max-width: 768px) {
  .reveal-sides {
    flex-direction: column;
    align-items: center;
  }
  .reveal-side {
    max-width: 100%;
    width: 100%;
  }

  .draft-collections {
    flex-direction: column;
    align-items: center;
  }
  .draft-collection {
    max-width: 100%;
    width: 100%;
  }
}

/* ====== Phone (<=600px) ====== */
@media (max-width: 600px) {
  #app {
    padding: 8px 10px;
  }

  /* --- Top bar compact --- */
  .top-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 12px;
  }
  .top-bar .title {
    font-size: 16px;
    width: 100%;
    text-align: center;
  }
  .top-bar .info-group {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }
  .info-item .label { font-size: 11px; }
  .info-item .value { font-size: 14px; }

  /* --- Game title/lobby --- */
  .game-title { font-size: 32px; }
  .game-subtitle {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .lobby-container {
    padding: 24px 20px;
    width: 95%;
  }
  .lobby-room-code {
    font-size: 40px;
    letter-spacing: 6px;
  }

  /* --- Mode tabs --- */
  .mode-desc { font-size: 12px; }

  /* --- Opponent bar --- */
  .opponent-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12px;
    justify-content: center;
  }

  /* --- Joker area horizontal scroll --- */
  .joker-area {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 8px;
    gap: 6px;
  }
  .joker-area::-webkit-scrollbar { display: none; }

  /* --- Cards smaller --- */
  .card {
    width: 60px;
    height: 88px;
  }
  .card .card-center { font-size: 26px; }
  .card .card-corner,
  .card .card-corner-br { font-size: 10px; }

  /* --- Hand area --- */
  .hand-area {
    overflow: visible;
    justify-content: center;
    padding: 8px 4px;
    min-height: 120px;
  }
  .hand-area .card {
    margin: 0 -8px;
  }

  /* --- Joker cards 与普通牌等尺寸（用户要求统一） --- */
  .joker-slot-empty { width: 60px; height: 88px; }

  /* --- Score display compact --- */
  .score-display {
    gap: 8px;
    min-height: 44px;
    flex-wrap: wrap;
  }
  .score-display .hand-name { font-size: 14px; padding: 4px 10px; }
  .score-display .chips-val { font-size: 20px; padding: 3px 10px; }
  .score-display .mult-val { font-size: 20px; padding: 3px 10px; }
  .score-display .times { font-size: 18px; }

  /* --- Action buttons --- */
  .actions {
    gap: 8px;
    flex-wrap: wrap;
  }
  .btn {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  /* --- Draft --- */
  .draft-container { padding: 0 4px; }
  .draft-title { font-size: 20px; }
  .draft-subtitle { font-size: 12px; }
  .draft-turn-indicator { font-size: 15px; padding: 6px 14px; }
  .draft-pool {
    gap: 6px;
    padding: 10px;
  }

  /* --- Reveal --- */
  .reveal-container { padding: 0 4px; }
  .reveal-title { font-size: 18px; }
  .reveal-sides {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .reveal-side {
    max-width: 100%;
    width: 100%;
    padding: 12px;
  }
  .reveal-total { font-size: 20px; }
  .reveal-winner-banner { font-size: 16px; padding: 10px; }
  .reveal-play .play-cards { flex-wrap: wrap; }

  /* --- Result --- */
  .result-container {
    padding: 24px 20px;
    width: 95%;
  }
  .result-title { font-size: 28px; }

  /* --- Shop --- */
  .shop-container { gap: 10px; }
  .shop-section { padding: 10px; }
  .shop-section-title { font-size: 14px; }
  .shop-items { gap: 8px; }
  /* .shop-item* 响应式规则已删除：货架统一为 .shop-cell/.shop-card（尺寸固定 78×112）。 */
  .sell-btn { font-size: 8px; padding: 2px 6px; }

  /* --- Theme toggle: move below top bar on mobile --- */
  .theme-toggle {
    width: 36px;
    height: 36px;
    font-size: 16px;
    top: auto;
    bottom: 12px;
    right: 12px;
    z-index: 500;
    box-shadow: 0 2px 12px var(--card-shadow);
  }
}

/* ====== Small Phone (<=420px) ====== */
@media (max-width: 420px) {
  .card {
    width: 52px;
    height: 76px;
    border-radius: 8px;
  }
  .card .card-center { font-size: 22px; }
  .card .card-corner,
  .card .card-corner-br { font-size: 9px; }
  .card .card-value-chip {
    width: 16px; height: 16px;
    font-size: 8px;
    bottom: -4px; right: -4px;
  }
  .card .enhancement-badge {
    width: 14px; height: 14px;
    font-size: 10px;
    top: -3px; right: -3px;
  }

  .hand-area .card { margin: 0 -10px; }
  .hand-area { min-height: 110px; overflow: visible; }

  .joker-slot-empty { width: 52px; height: 76px; font-size: 18px; }

  .top-bar .title { font-size: 14px; }
  .info-item .label { font-size: 10px; }
  .info-item .value { font-size: 13px; }

  .game-title { font-size: 26px; }
  .game-subtitle { font-size: 12px; margin-bottom: 16px; }

  .lobby-room-code {
    font-size: 32px;
    letter-spacing: 4px;
    margin: 16px 0;
  }

  .mode-desc { font-size: 11px; }

  .score-display .hand-name { font-size: 12px; padding: 3px 8px; }
  .score-display .chips-val { font-size: 16px; padding: 2px 8px; }
  .score-display .mult-val { font-size: 16px; padding: 2px 8px; }
  .score-display .times { font-size: 14px; }

  .btn { padding: 8px 12px; font-size: 13px; }

  .reveal-play .mini-card {
    width: 30px; height: 42px;
    font-size: 9px; border-radius: 3px;
  }
  .reveal-title { font-size: 16px; }

  /* .shop-item / .consumable-card* / .curse-card 及 .curse-icon/.curse-name/.curse-desc
     响应式规则已全部删除：货架统一为 .shop-cell/.shop-card。 */
}

/* ====== Very Small Phone (<=375px, iPhone SE) ====== */
@media (max-width: 375px) {
  #app { padding: 6px 6px; }

  .card {
    width: 46px;
    height: 68px;
    border-radius: 6px;
  }
  .card .card-center { font-size: 20px; }
  .card .card-corner {
    font-size: 8px;
    top: 3px; left: 4px;
  }
  .card .card-corner-br {
    font-size: 8px;
    bottom: 3px; right: 4px;
  }
  .card .card-value-chip {
    width: 14px; height: 14px; font-size: 7px;
  }

  .hand-area .card { margin: 0 -12px; }
  .hand-area { min-height: 95px; padding: 6px 2px; overflow: visible; }

  .joker-slot-empty { width: 46px; height: 68px; font-size: 16px; }

  .game-title { font-size: 22px; }
  .lobby-container { padding: 18px 14px; }
  .lobby-input { padding: 10px 12px; font-size: 14px; }
  .lobby-room-code { font-size: 28px; letter-spacing: 3px; }

  .opponent-bar { font-size: 11px; padding: 5px 8px; }

  .btn { min-height: 40px; font-size: 12px; padding: 7px 10px; }

  .draft-title { font-size: 18px; }
  /* .shop-item* 响应式规则已删除：货架统一为 .shop-cell/.shop-card。 */
}

/* ====== Scoring animation mobile tweaks ====== */
@media (max-width: 420px) {
  .sa-hand-type { font-size: 18px; }
  .sa-chips, .sa-mult { font-size: 22px; padding: 3px 12px; min-width: 55px; }
  .sa-times { font-size: 18px; }
  .sa-step { padding: 4px 8px; }
  .sa-step-icon { font-size: 14px; width: 22px; }
  .sa-step-label { font-size: 11px; }
  .sa-step-val { font-size: 12px; }
  .sa-total { font-size: 26px; }
}

/* ====== Safe area ======
   旧的 body{padding:env(...)} 已删：全屏画面都是 position:fixed; inset:0，相对视口、
   无视 body padding → 那圈避让从来没生效。改由各全屏容器/贴边内容用 --sa-* 令牌
   (theme.css) 以 max(原值, var(--sa-*)) 各自避让，背景仍铺满到物理边缘。 */

/* ====== 地址栏 100vh 修复已退役 ======
   原规则 `@supports(100dvh){ .screen-overlay{ height:100dvh } }` 在所有现代浏览器（含桌面）
   都生效，把遮罩钉死成视口高 —— 结算/揭晓页一旦塞入 Boss/攻击牌/诅咒结算行，撑高的内容只能
   溢出居中而非撑高 #app，Fit Stage 量不到真实高 → 按钮被顶出屏外点不到（结算卡死）。
   现已删除：.screen-overlay 改普通流（base.css min-height:var(--logical-h)），随内容自由增高 →
   撑高 #app → stage 整体缩小 → 按钮恒在屏内。视口铺满 + 地址栏伸缩由 .stage-viewport(fixed inset0) 兜。 */

/* ====== 触屏操作体验修复（所有触摸设备）====== */
@media (hover: none) {
  /* 排序按钮触点：基础 34px → 触屏抬到 ≥40px（tile 重构后类名为 .sort-btn，旧 .blt-sort-btn 已删）。
     出牌/弃牌按钮 .btn-action 基础已 46px（screens.css），无需再抬，旧 .blt-bottom-btn 一并删。 */
  .sort-btn {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* Joker tooltip / 底部抽屉样式已移除：点击小丑改用 info-overlay 只读详情弹窗（.sa-overlay）。 */

/* 侧栏紧凑断点已删：对局屏侧栏改由 --sidebar-w + --ui-scale 连续缩放，再按 max-width 写死会盖掉
   令牌、与 fit-scale 打架。手牌扇形横滚兜底（旧 .blt-hand-fan）也已删：Fit Stage 把逻辑宽夹钳在
   [1000,1780] 后整屏等比缩放，手牌恒在逻辑世界内不溢出物理窄屏，max-width 断点对其无意义。 */

/* ====== 计分弹窗（移动端收紧，保留血条可见）====== */
@media (max-width: 600px) {
  .sa-panel {
    max-width: 94vw;
    max-height: 65vh;
    padding: 14px 12px;
    border-radius: 12px;
  }
}
@media (max-width: 420px) {
  .sa-panel {
    max-height: 60vh;
    padding: 10px 8px;
  }
}

/* ====== Landscape phone ====== */
@media (max-height: 500px) and (orientation: landscape) {
  /* 旧 fitScreens(zoom) 时代为「缩放偶尔量错→按钮顶出屏」准备的 overflow-y:auto 兜底已删：
     Fit Stage 用 offsetH/scrollH 量真实盒、无上限缩放，撑高内容必被整体缩进屏内，不再需要内部
     滚动（内部滚动反而让 stage 量不到溢出、与「绝不滚动」铁律冲突）。安全区让位也已上移到
     .stage-viewport 的 padding，这里再 padding 一次会双重内缩 → 一并撤掉，遮罩回归 base.css 普通流。 */

  .game-title { font-size: 24px; margin-bottom: 4px; }
  .game-subtitle { margin-bottom: 10px; }
  .lobby-container { padding: 16px 20px; }

  .hand-area { min-height: 90px; }
  .card { width: 52px; height: 76px; }
  .card .card-center { font-size: 22px; }
  /* 横屏小卡（52×76）：J/Q/K 人头框等比缩小，SVG width:100% 自动跟随，不溢出卡宽 */
  .card .pc-face { width: 34px; height: 42px; }
  .card .pc-face-letter { font-size: 20px; }

  /* 旧横屏侧栏收紧（.blt-game .blt-sidebar/.blt-sb-section/.blt-blind-head/.blt-confirm-btn/
     .blt-roomcode）已随 S8 砍旧 .blt-* 一并删除：tile 重构后侧栏改 screens.css 的 .sidebar，
     矮横屏纵向压缩统一交给 Fit Stage 整屏等比缩放（同 balatro.css 已删的 max-height 断点）。 */

  .joker-area { min-height: 60px; padding: 6px; }

  /* 横屏弹窗：限高到可用视口内 + 让出 safe-area，内容超出则内部滚动，
     杜绝塔罗/幻灵/消耗品/开包说明「一打开就顶出屏幕、读不完」。 */
  .sa-overlay, .pack-overlay {
    padding:
      max(10px, var(--sa-top, 0px))
      max(10px, var(--sa-right, 0px))
      max(10px, var(--sa-bottom, 0px))
      max(10px, var(--sa-left, 0px));
  }
  .sa-panel {
    width: min(92vw, 460px);
    max-width: min(92vw, 460px);
    max-height: calc(100dvh - max(20px, var(--sa-top, 0px)) - max(20px, var(--sa-bottom, 0px)));
  }
  /* info-panel 平时是 block（覆盖了 sa-panel 的 flex）；横屏改回 flex 列，让 body 占余高滚动、head 固定 */
  .info-panel {
    display: flex;
    flex-direction: column;
  }
  .info-panel .info-body {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .pack-overlay-panel {
    width: min(94vw, 720px);
    max-height: calc(100dvh - max(20px, var(--sa-top, 0px)) - max(20px, var(--sa-bottom, 0px)));
  }
}

/* ====== 竖屏请横屏遮罩（炉石做法：触摸设备全程横屏优先）====== */
/* 默认隐藏；只有 ui-scale.js 在触摸设备(pointer:coarse)给 <html> 打 force-landscape 类、
   且当前竖屏时才显示 → 桌面鼠标拉窄成竖条也绝不触发。用 100dvh 兜 iOS 地址栏伸缩。 */
.rotate-overlay { display: none; }

@media (orientation: portrait) {
  html.force-landscape .rotate-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 2000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding:
      max(24px, var(--sa-top, 0px))
      max(24px, var(--sa-right, 0px))
      max(24px, var(--sa-bottom, 0px))
      max(24px, var(--sa-left, 0px));
    text-align: center;
    pointer-events: auto;
    background:
      radial-gradient(ellipse 120% 90% at 50% 40%, #2a0512 0%, #120208 60%, #050204 100%);
    color: var(--text-primary);
  }
  /* 遮罩显示时锁住下层滚动，避免竖屏下还能滑动露出半个对局屏 */
  html.force-landscape, html.force-landscape body { overflow: hidden; }
}

.rotate-overlay-icon {
  font-size: 64px;
  line-height: 1;
  animation: rotateHint 2.4s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 30% { transform: rotate(0deg); }
  55%, 75% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
.rotate-overlay-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 0 0 14px var(--accent-gold-glow);
  letter-spacing: 1px;
}
.rotate-overlay-sub {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 280px;
  line-height: 1.5;
}