/* ==========================================================================
   暑假安全大侦探 —— 样式主文件
   采用 基础重置 → 全局容器 → 页面分区 → 动画 → 响应式 的分层结构组织
   所有类名 / ID 均与 index.html 和 main.js 中的引用严格对应
   ========================================================================== */

/* =========================================
   1. 全局重置：通配符统一盒模型与内外边距
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   2. 根元素与页面基础样式
   ========================================= */
html, body {
    width: 100%;
    height: 100%;
    /* 禁止页面滚动：游戏使用全屏容器承载，不允许页面级滚动 */
    overflow: hidden;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 16px;
    /* 移动端禁止文字缩放（竖横屏切换时字号不变）*/
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    /* iOS Safari 惯性滚动体验（当内容可滚动时生效）*/
    -webkit-overflow-scrolling: touch;
    /* 移动端点击去除蓝色高亮与长按菜单 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    /* 全局禁止文字选中（避免游戏中长按造成干扰）*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =========================================
   3. 应用根容器（区分独立访问 / iframe 访问）
   ========================================= */
#app {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 真实桌面设备（含 iframe 嵌套场景）：限定最大尺寸并水平居中，
   保持移动竖屏比例，避免在大宽屏下拉伸变形 */
#app.desktop-mode {
    max-width: 420px;
    max-height: 820px;
    margin: 0 auto;
}

/* =========================================
   4. 页面基础结构（四个页面通用）
   所有页面统一使用 absolute + active 切换机制
   ========================================= */
.page {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page.active {
    display: flex;
    flex-direction: column;
}

/* =========================================
   5. 封面页（PC / 移动 两套封面视觉，通过 pc-mode 切换）
   ========================================= */
#coverPage {
    position: relative;
    overflow: hidden;
}

/* 5.1 封面通用组件（移动 + PC 共享，减少重复声明）
   --------------------------------------------------- */
/* 封面背景层：两端完全一致 */
.cover-mob .cover-bg,
.cover-pc .cover-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 封面按钮（两个端 HTML 都带 class="cover-play-btn"，公共属性抽离） */
.cover-play-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 封面按钮内图片（两端填充规则一致） */
.cover-mob .cover-play-btn img,
.cover-pc .cover-play-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 封面 GIF：去除行内图片的 4px 基线空隙 */
.cover-mob .cover-bg-gif,
.cover-pc .cover-bg-gif {
    display: block;
}

/* 5.2 移动端封面
   --------------------------------------------------- */
.cover-mob {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 默认显示移动端封面（不加 pc-mode 类即走此规则） */
#coverPage:not(.pc-mode) .cover-mob {
    display: flex;
}

.cover-mob .cover-bg img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: top center;
}

/* 移动端按钮：底部居中横向 */
.cover-mob .cover-play-btn {
    position: absolute;
    bottom: 22vh;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 50px;
}

.cover-mob .cover-play-btn:hover {
    transform: translateX(-50%) scale(1.05);
}

/* 5.3 PC 端封面
   --------------------------------------------------- */
.cover-pc {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cover-pc .cover-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* PC 端按钮：左侧纵向垂直居中 */
.cover-pc .cover-play-btn {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 200px;
}

.cover-pc .cover-play-btn:hover {
    transform: translateY(-50%) scale(1.05);
}

/* 5.4 pc-mode：切换到 PC 端封面（隐藏移动、显示 PC） */
#coverPage.pc-mode .cover-mob {
    display: none;
}

#coverPage.pc-mode .cover-pc {
    display: flex;
}

/* =========================================
   6. 关键帧动画（按使用就近分组）
   ========================================= */

/* 6.1 通用弹出动画：弹窗、关卡标记、结束图标通用 */
@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 6.2 游戏中点击正确后的标记弹出（带位移补偿，marker 自己有 translate -50% -50%） */
@keyframes markerPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* 6.2b 解析页「下一关独立按钮」专用弹出动画
   —— 按钮基础 transform 是 translateX(-50%)，因此关键帧内必须始终保留 translateX(-50%)，
      防止动画播放期间 transform 被通用 popIn 的「纯 scale(...)」覆盖导致"先放大偏位再跳回正确位置"的视觉闪烁 */
@keyframes popInXCentered {
    0% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) scale(1.2);
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes popInXCentered {
    0% {
        -webkit-transform: translateX(-50%) scale(0);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateX(-50%) scale(1.2);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

/* 6.2c 解析页「倒计时覆盖层」专用弹出动画
   —— 倒计时基础 transform 是 translate(-50%, -50%)，关键帧全程保留该平移，
      同样避免动画期间 transform 被覆盖导致的尺寸/位置跳闪 */
@keyframes popInCentered {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes popInCentered {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* 6.3 BGM 图标旋转：360° 无限循环 */
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* =========================================
   7. 游戏找茬页面
   ========================================= */

/* 游戏页 active 时覆盖通用 .page.active 的 column 布局，
   使用 row + 居中确保横竖屏下画布都能按比例显示 */
#gamePage {
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#gamePage.active {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* 7.1 游戏画布容器：3:4 竖屏比例，横屏自动切换为 16:9
   坐标按百分比计算，需保证宽高比例与关卡设计图一致 */
#gameCanvas {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
}

/* 横屏方向（屏幕宽 > 高）：改用 16:9 比例，只覆盖与竖屏不同的属性 */
@media (orientation: landscape) {
    #gameCanvas {
        aspect-ratio: 16 / 9;
    }
}

/* 7.2 游戏背景图：填满画布，接收用户点击（坐标计算容器） */
#gameImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* 7.3 标记层：覆盖全屏，不接收点击（穿透到下层 #gameImage） */
.markers-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* 单个已找出标记：使用百分比定位，点击点居中对齐 */
.marker {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    animation: markerPop 0.5s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 7.4 进度显示："已找出 X/Y" 数字卡片，跟随画布容器定位 */
.progress-display {
    position: absolute;
    /* 与关卡设计图中的标题文字对齐，保持百分比不随屏幕尺寸偏移 */
    top: 60%;
    right: 7.4%;
    z-index: 10;
    pointer-events: none;
    transform-origin: center;
}

/* 数字背景图容器：背景图自带"已找出"文字，数字显示在下部 */
.num-bg {
    width: 40px;
    height: 153px;
    background-image: url('../images/num-bg.png?v=1');
    /* 精确 100%×100% 确保背景图比例与设计稿匹配 */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* 底部内边距决定数字距离"已找出"文字的间距 */
    padding-bottom: 26px;
    pointer-events: none;
}

/* 进度计数器整体：旋转 90° 横排显示在数字区 */
.num-bg .progress-counter {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #8B4513;
    /* 旋转后尺寸与背景图数字区域尺寸对应 */
    width: 52px;
    height: 28px;
}

.num-bg .counter-sep {
    margin: 0 2px;
}

/* 已找出数量：红色，醒目提示进度 */
#foundCount {
    color: #E74C3C;
}

/* 目标总数：保持与父级棕色调一致，语义上为"分母" */
#totalCount {
    color: #8B4513;
}

/* =========================================
   8. 问题解析 / 结果页（过关后弹出解析图 + 温馨提示弹窗）
   ========================================= */

/* 结果页背景图：object-fit: cover 保证无黑边，与解析图视觉一致 */
.result-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    z-index: 0;
}

/* resultPage.active：居中显示温馨提示弹窗 */
#resultPage.active {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* 8.1 温馨提示弹窗：使用 tips 图片本身作为弹窗内容
   除最后一关统一 58% 宽，最后一关维持 44% 且不可点击 */
.tip-modal {
    position: relative;
    z-index: 10;
    width: 58%;
    max-width: 280px;
    /* 非最后一关：点击弹窗进入下一关，显示手型光标 */
    cursor: pointer;
    animation: popIn 0.5s ease-out;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

.tip-modal-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* 保持图片方向（含 EXIF 信息时）不被浏览器自动旋转 */
    image-orientation: from-image;
    /* 弹窗图片阴影，提升层次感 */
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.2));
}

/* 8.2 倒计时覆盖层（前6关强制5秒学习时间）
   —— 独立于 tips 图片的第二层，放在弹窗中部偏下的空白区域，避开文字讲解区；
   —— 显示 countdown5→countdown4→countdown3→countdown2→countdown1 每秒切换；
   —— 倒计时期间整个弹窗加 .counting 类，禁用全部交互，防止用户提前跳关
   —— 尺寸从 36% 缩小到 16%，避免遮挡 tips 图中的文字内容
   —— ★ 重要：此元素本身**无任何 transform 位移、无任何进场动画**：
         1) transform 被去掉是因为用户手动调整的 left/top 已和设计稿完全对齐，
            再叠加 translate(-50%,-50%) 会造成位置偏移；
         2) 进场动画也去掉，因为父级 #tipModal 本身已经有 popIn 弹窗弹出动画，
            倒计时作为弹窗子节点会跟随父节点一起弹出，不再需要额外的进场动画。 */
.tip-countdown {
    position: absolute;
    /* 放弹窗 left:14% / top:32% 处：根据设计稿精准位置，不遮挡文字（无 transform）*/
    left: 14%;
    top: 34%;
    width: 14%;
    max-width: 56px;
    height: auto;
    display: block;
    z-index: 20;
    object-fit: contain;
    image-orientation: from-image;
    /* 禁止用户长按/拖选 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* 8.3 下一关独立按钮（已从 tips 背景图层分离为独立元素）
   —— 放在弹窗底部，水平居中；倒计时期间隐藏，倒计时结束后显示；
   —— 按钮点击有高亮缩放反馈，与整页交互风格一致；
   —— z-index:19 高于 tips 图(无)但低于倒计时(20)，保证倒计时在按钮上方显示
   —— 动画同样通过 .animate-pop 独立类触发，与倒计时保持同样的零闪烁机制 */
.tip-next-btn {
    position: absolute;
    left: 22%;
    bottom: 32%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 18%;
    max-width: 118px;
    height: auto;
    display: block;
    z-index: 19;
    object-fit: contain;
    image-orientation: from-image;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 下一关按钮进场动效：使用带 translateX(-50%) 补偿的 popInXCentered
   —— 通过 .animate-pop 独立类触发，popInXCentered 关键帧全程带 translateX(-50%) */
.tip-next-btn.animate-pop {
    animation: popInXCentered 0.4s ease-out;
    -webkit-animation: popInXCentered 0.4s ease-out;
}

/* 下一关按钮点击态：微微缩小，符合"点击了有视觉反馈"的设计规范 */
.tip-next-btn:active {
    -webkit-transform: translateX(-50%) scale(0.96);
    transform: translateX(-50%) scale(0.96);
    transition: transform 0.12s ease;
}


/* 倒计时中：整个弹窗禁用所有交互，cursor 改回默认，不再显示缩放反馈
   —— 这是"禁止用户任何方式提前跳关"的核心保障 */
.tip-modal.counting {
    pointer-events: none;
    cursor: default;
}

.tip-modal.counting:active {
    transform: none;
    transition: none;
}

/* 点击态反馈：轻微缩放，给用户明确交互感 */
.tip-modal:active {
    transform: scale(0.98);
    transition: transform 0.15s ease;
}

/* 最后一关：更小、不可交互（提示图中不再包含下一关按钮） */
.tip-modal.last-level {
    width: 44%;
    max-width: 220px;
    cursor: default;
	margin-left: 60px;
    pointer-events: none;
}

.tip-modal.last-level:active {
    transform: none;
    transition: none;
}

/* =========================================
   9. BGM 音乐图标（右上角悬浮，可点击切换播放状态）
   ========================================= */
#bgm {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 2vh;
    right: 2vw;
    cursor: pointer;
    z-index: 9;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
}

#bgm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================
   10. 响应式字体：<html> 根字号随屏宽阶梯式递增
   若组件内部使用 rem 单位即会随此处联动
   ========================================= */
@media screen and (min-width: 320px) {
    html { font-size: 12px; }
}
@media screen and (min-width: 360px) {
    html { font-size: 13px; }
}
@media screen and (min-width: 375px) {
    html { font-size: 14px; }
}
@media screen and (min-width: 414px) {
    html { font-size: 15px; }
}
@media screen and (min-width: 480px) {
    html { font-size: 16px; }
}
@media screen and (min-width: 640px) {
    html { font-size: 18px; }
}
@media screen and (min-width: 768px) {
    html { font-size: 20px; }
}

/* =========================================
   11. 小屏适配（≤480px）：数字卡片、标记、弹窗同步等比缩小
   ========================================= */
@media (max-width: 480px) {
    .num-bg {
        /* 保持 40:153 ≈ 1:3.825 的基础比例 */
        width: 36px;
        height: 138px;
    }

    .num-bg .progress-counter {
        font-size: 11px;
        width: 46px;
        height: 24px;
    }

    #foundCount, #totalCount {
        font-size: 13px;
    }

    .marker {
        width: 40px;
        height: 40px;
    }

    .tip-modal.last-level {
        max-width: 200px;
    }
}

/* =========================================
   12. 极小屏适配（≤360px）：封面按钮、弹窗进一步收敛
   ========================================= */
@media (max-width: 360px) {
    .cover-mob .cover-play-btn {
        width: 140px;
        height: 45px;
        bottom: 50px;
    }

    .num-bg {
        width: 32px;
        height: 122px;
    }

    .num-bg .progress-counter {
        font-size: 10px;
        width: 40px;
        height: 22px;
    }

    #foundCount, #totalCount {
        font-size: 11px;
    }

    .marker {
        width: 35px;
        height: 35px;
    }

    .tip-modal.last-level {
        max-width: 160px;
    }
}

/* =========================================
   13. 矮屏适配（≤400px 高度）：针对横屏手机 / 折叠屏小窗
   只压缩垂直空间相关尺寸，宽度规则保留
   ========================================= */
@media (max-height: 400px) {
    .cover-mob .cover-play-btn {
        width: 150px;
        height: 45px;
        bottom: 50px;
    }

    .tip-modal {
        max-width: 230px;
    }
}

/* 13.1 极矮屏（≤350px 高度）：仅微调封面按钮底边距 */
@media (max-height: 350px) {
    .cover-mob .cover-play-btn {
        bottom: 40px;
    }
}