/* responsive.css - Responsive adaptations */
/* Cell sizing is handled by JS (MS.Renderer.autoSizeBoard) */

/* Prevent zoom and touch callout */
html {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* ===== Mobile (max-width: 600px) ===== */
@media (max-width: 600px) {
    body {
        /* 安全区适配：刘海/底部圆角避开（viewport-fit=cover 已设）；无刘海设备 env()=0 回退 5px */
        padding: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right))
                 max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
    }

    .game-window {
        max-width: 100vw;
        padding: 3px;
        border-width: 2px;
    }

    .game-container {
        padding: 3px;
    }

    .board-container {
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .menu-bar {
        font-size: 11px;
        flex-wrap: nowrap;   /* 竖屏菜单文字不换行 */
        gap: 2px;            /* 按钮间距合理 */
    }

    .menu-btn {
        padding: 2px 6px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 1;
    }

    .status-bar {
        padding: 3px 4px;
        margin-bottom: 4px;
        min-height: 44px;    /* 容纳 ≥40px 触控按钮 */
        gap: 2px;
    }

    .digit {
        font-size: 18px;
        width: 11px;
    }

    /* 状态栏按钮触控区 ≥40px（Apple HIG 折中）；.status-bar 前缀提高特异性，
       覆盖 main.css 34px 与 app.js 动态注入的 .pause-btn 34px */
    .status-bar .smiley-btn,
    .status-bar .flag-mode-btn,
    .status-bar .pause-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .status-bar .flag-mode-btn {
        display: flex;
    }
}

/* ===== Tablet portrait (601px - 1024px) ===== */
/* 平板竖屏是扫雷最佳形态：专家局 30x16 完整可见。格子尺寸由 JS
   (MS.Renderer.autoSizeBoard) 按可视区域自适应（含 24px 触控下限），
   CSS 端不加宽度约束，保证容器不裁切、不产生 body 级横向滚动条。 */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
    body {
        padding: 10px;
    }

    .flag-mode-btn {
        display: flex;
    }

    /* 状态栏触控友好：按钮 ≥40px（Apple HIG），并拉开间距便于双手拇指 */
    .status-bar {
        gap: 12px;
    }

    .status-bar .smiley-btn,
    .status-bar .flag-mode-btn,
    .status-bar .pause-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* 菜单按钮触控友好（竖屏平板手指命中目标 ≥40px） */
    .menu-btn {
        min-height: 40px;
    }
}

/* ===== Tablet landscape (601px - 1180px) ===== */
/* 横屏平板：棋盘优先占满可用高度，菜单/状态栏紧凑，支持双手横握操作。
   断点连续性：本段(601-1180 横屏) 与下方手机横屏段(max-height:500px)
   重叠时后者覆盖(更紧凑)，与 main.css >1181px 桌面段无缝衔接——三段连续
   （手机横屏 ≤500px 高 / 平板横屏 601-1180 / 桌面 >1180），无缝隙。 */
@media (min-width: 601px) and (max-width: 1180px) and (orientation: landscape) {
    body {
        padding: 6px;
    }

    .game-window {
        padding: 4px;
    }

    .game-container {
        padding: 4px;
    }

    .menu-bar {
        margin-bottom: 3px;
    }

    .status-bar {
        padding: 3px 6px;
        margin-bottom: 4px;
        min-height: 40px;
        gap: 10px;
    }

    .flag-mode-btn {
        display: flex;
    }
}

/* ===== Landscape mobile ===== */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        /* 横屏刘海在左右两侧，安全区适配 */
        padding: max(2px, env(safe-area-inset-top)) max(2px, env(safe-area-inset-right))
                 max(2px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left));
    }

    .status-bar {
        padding: 2px 4px;
        margin-bottom: 3px;
        min-height: 28px;
    }

    .menu-bar {
        margin-bottom: 2px;
    }

    .game-container {
        padding: 3px;
    }

    .game-window {
        padding: 3px;
    }
}

/* ===== Touch device detection ===== */
@media (hover: none) and (pointer: coarse) {
    .flag-mode-btn {
        display: flex;
    }

    /* 触屏设备按钮 ≥40px（覆盖平板 601-1024px 区间；手机端由 600px 段保证） */
    .status-bar .smiley-btn,
    .status-bar .flag-mode-btn,
    .status-bar .pause-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Prevent overscroll bounce */
    .board-container {
        overscroll-behavior: contain;
    }
}

/* ===== Very small screens (< 360px) ===== */
@media (max-width: 360px) {
    .game-window {
        padding: 2px;
        border-width: 1px;
    }

    .game-container {
        padding: 2px;
    }

    .digit {
        font-size: 16px;
        width: 10px;
    }

    /* 极窄屏仍保 ≥40px 触控高，宽度略收以省横向空间 */
    .status-bar .smiley-btn,
    .status-bar .flag-mode-btn,
    .status-bar .pause-btn {
        width: 36px;
        height: 40px;
        font-size: 18px;
    }
}

/* ===== Portrait orientation - maximize vertical space ===== */
@media (orientation: portrait) and (max-width: 600px) {
    body {
        /* 竖屏安全区：顶部避开刘海，底部避开 Home 条 */
        padding: max(2px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right))
                 max(2px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
        align-items: flex-start;
    }
}

/* ===== 暂停遮罩（T15 逻辑 + T17 样式）：半透明覆盖棋盘，中央"已暂停"提示 =====
   三端通用：.paused 由 app.js setPaused 加到 .board，此遮罩仅视觉提示，
   输入已由 Input.setGameActive(false) 隔离，不拦截点击 */
.board.paused {
    position: relative;
}

.board.paused::after {
    content: '已暂停';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    z-index: 5;
    pointer-events: none;
}