/* ==========================================================================
   智绘三夏·丰收接力闯关 —— 样式主文件
   分层：全局重置 → 根容器 → 页面基类 → Loading → 封面 → BGM → 游戏页HUD+Canvas
         → 失败遮罩 → 过关解析页 → 陀螺仪提示 → 响应式阶梯字号 → 小屏适配
   注意：按需求，所有按钮/游戏元素直接显示原图，不添加装饰阴影或滤镜
   ========================================================================== */

/* =========================================
   1. 全局重置
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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;
    -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;
}

/* =========================================
   2. 根容器：移动端全屏；桌面端 420×820 居中
   ========================================= */
#app {
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 用户只保留这 1 项 PC 端差异化：桌面端显示 420 宽（420×820 居中 + 浅灰背景），其他 PC/移动分离全部去除 */
#app.desktop-mode {
    max-width: 420px;
    max-height: 820px;
    margin: 0 auto;
    background: #ECEFF1;
}



/* =========================================
   3. 页面切换基类 .page
   ========================================= */
.page {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page.active {
    display: block;
}

/* 所有 page 内的 img 默认不允许拖拽，避免长按保存菜单干扰 */
.page img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    user-drag: none;
    pointer-events: none;   /* 默认图片不接收事件，按钮单独覆盖 */
}

/* button 基础：去边框、去背景，让里面的 img 直接显示 */
button {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button > img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* =========================================
   4. Loading 预加载页
   ========================================= */
#loadingPage {
    background: #FFF8E1;
    display: none;    /* 由 .active 切换 */
    z-index: 100;      /* Loading 要盖过所有页面 */
}
#loadingPage.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container {
    width: 75%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.loading-title {
    font-size: 20px;
    color: #E65100;
    letter-spacing: 2px;
    font-weight: bold;
}

.loading-bar {
    width: 100%;
    height: 14px;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

.loading-bar-inner {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #FFB74D, #FF7043);
    border-radius: 10px;
    transition: width 0.2s linear;
}

.loading-percent {
    font-size: 18px;
    color: #6D4C41;
    font-weight: bold;
}

.loading-skip-btn {
    margin-top: 6px;
    padding: 8px 20px;
    border: 1px solid #FF8A65;
    color: #E64A19;
    font-size: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.6);
}
.loading-skip-btn:active {
    background: rgba(255,255,255,1);
}

/* =========================================
   5. 封面页：背景 cover.png / 标题 title.png / 按钮 btn_start.png
   ========================================= */
#coverPage {
    background: #FFF8E1;
}

/* 背景图铺满 */
.cover-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 标题图：默认移动端居中靠上 —— 带 zoomIn 入场动画（用户要求优先 zoomIn） */
.cover-title-img {
    position: absolute;
    top: 12%;
    left: 5%;
    width: 88%;
    z-index: 2;
    opacity: 0;                       /* 初始隐藏，动画开始时变可见 */
    transform-origin: center;
    animation: titleZoomIn 0.6s ease-in-out forwards;
}
/* —— 封面标题 zoomIn 入场：0.3 缩放 + 透明 → 1.0 缩放 + 不透明（比纯淡入更有品牌"弹入"感） */
@keyframes titleZoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }
    100% {
        opacity: 1;
    }
}

/* 开始按钮：单按钮统一（不分PC/移动），底部居中 + 呼吸缩放 + 高光扫过 */
.cover-start-btn {
    position: absolute;
    left: 50%;
    bottom: 18%;
    transform: translateX(-50%);
    width: 52%;
    max-width: 220px;
    height: auto;
    z-index: 3;
    overflow: hidden;
    -webkit-animation: 2.6s ease-in-out infinite timeBtnBreath;
    animation: 2.6s ease-in-out infinite timeBtnBreath;
}
.cover-start-btn::after {
    content: "";
    pointer-events: none;
    will-change: background-position;
    background-image: linear-gradient(115deg, rgba(0, 0, 0, 0) 42%, rgba(255, 255, 255, 0.55) 47%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0.55) 53%, rgba(0, 0, 0, 0) 58%);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    position: absolute;
    background-position: 100% 0;
    border-radius: 999px;
    inset: 0;
    -webkit-animation: timeBtnShimmer 3.2s ease-in-out infinite;
    animation: timeBtnShimmer 3.2s ease-in-out infinite;
}
.cover-start-btn:active {
    opacity: 0.85;
}

@keyframes timeBtnBreath {
  0%, 100% { -webkit-transform: translateX(-50%) scale(1);    transform: translateX(-50%) scale(1);    }
  50%      { -webkit-transform: translateX(-50%) scale(1.06); transform: translateX(-50%) scale(1.06); }
}
@keyframes timeBtnShimmer {
  0%            { background-position: 100% 0; }
  35%, 100%    { background-position: 0 0; }
}


/* =========================================
   6. BGM 音乐图标（右上角旋转）
   ========================================= */
#bgm {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 2vh;
    right: 15px;
    cursor: pointer;
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
    animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
}
#bgm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

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

/* =========================================
   7. 游戏主页：HUD（关卡标识+分数背景+数字） + Canvas
   ========================================= */
#gamePage {
    /* 背景图 content_bg.jpg 铺满整页（Canvas 会透明显示它） */
    background-image: url('../images/content_bg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #87CEEB;  /* 图还没加载出来时的兜底色 */
}

/* 左上角：关卡标识 levelX.png */
.hud-level-img {
    position: absolute;
    top: 2%;
    left: 6%;
    width: 28%;
    max-width: 130px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}

/* ===================== 分数 HUD：img（背景）+ 数字盖层（absolute 铺在 img 上面） =====================
   用户最新要求："不好适配就用 img，不用 padding 撑开，就用 img 的高度，分数在 img 的层级上面"
   适配性说明：
     · 外层 .hud-score-wrap 只负责"定位（top/right）+ 宽（屏幕 44%）"
     · img 宽度 100%、高度 auto → 自动按 score_bg.png 的原始比例撑开整个盒子高度
     · .hud-score-num-wrap 用 position:absolute inset:0 完整覆盖在 img 上面，
       再用 display:flex + align-items:center → 文字永远垂直居中（QQ/微信老浏览器也稳定）
     · 比 background 方案更直观：img 加载后高度立刻有，不存在比例估算误差
   ===================================================================================================== */
.hud-score-wrap {
    position: absolute;
    top: 3.4%;
    right: 4%;
    width: 44%;
    max-width: 170px;
    z-index: 11;
}
/* 背景图：决定整个容器高度（关键点：不设 height，用 auto 跟随图片） */
.hud-score-wrap .hud-score-bg-img {
    display: block;
    width: 100%;
    height: auto;            /* 关键：不写死高度，跟随 score_bg.png 原始比例 */
    pointer-events: none;
}
/* 数字盖层：严格铺在 img 的 4 条边上（img 多高这个就多高） */
.hud-score-num-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;     /* 铺满外层 = 铺满 img */
    display: flex;
    align-items: center;                      /* 垂直居中（用户要求） */
    justify-content: flex-end;                /* 数字槽靠右对齐，对应素材图上的位置 */
    padding-right: 10%;                       /* 距右边缘 10% 内边距，视觉居中 */
    gap: 2px;
}
.hud-score-num {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1;
}
.hud-score-divider {
    font-size: 16px;
    color: #fff;
    opacity: 0.85;
    line-height: 1;
}
.hud-score-total {
    font-size: 16px;
    color: #fff;
    opacity: 0.85;
    line-height: 1;
}

/* Canvas：铺满剩余空间 */
#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;   /* 关键：禁止浏览器默认触摸行为（如滚动），消除触摸延迟 */
    z-index: 1;
}

/* =========================================
   8. 失败遮罩（黑色半透明 + 居中 btn-restart）
   ========================================= */
.game-over-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    /* 黑色半透明：75% 透明度，符合需求 0.7-0.8 */
    background: rgba(0, 0, 0, 0.75);
    z-index: 50;
    display: none;   /* 默认隐藏，失败时加 .show 类显示 */
    align-items: center;
    justify-content: center;
}
.game-over-mask.show {
    display: flex;
}

.game-over-mask-inner {
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-restart {
    width: 75%;
    height: auto;
    margin-top: -50%;
}
.btn-restart:active {
    opacity: 0.85;
}

/* =========================================
   9. 过关解析页（cover.jpg 为底 + 60% 黑遮罩 + explanation1.png + countdown1-5 + next 按钮）
   ========================================= */
#levelClearPage {
    background-image: url('../images/cover.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #FFF3E0;
    /* 默认不显示（避免 id 选择器优先级高于 .page { display:none }，出现"一上来就是解析页"） */
    display: none;
}
#levelClearPage.active {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 60% 黑色遮罩层（整页覆盖在背景之上、内容之下） */
.level-clear-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

/* ========== 解析页相对内容容器：解析图 + 倒计时 + 按钮 垂直排列 ==========
   解析图换短/换宽后，倒计时和按钮会自动紧贴解析图下方，不再依赖屏幕 bottom 硬值 */
.clear-content-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    z-index: 3;
    margin-top: 2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/* 兼容旧QQ/微信/UC浏览器的 flex 间距：gap 用兄弟选择器 margin-top 等价替换，数值与原gap保持一致 */
.clear-content-wrap > * + * {
    margin-top: 1.4rem;
}

/* 解析图：用户已换短、宽度也改小，限制最大高度避免顶出屏幕 */
.analysis-img {
    width: auto;
    height: auto;
    max-width: 88%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

/* 倒计时：紧贴解析图下方（gap控制距离），无需再 bottom:clamp 定位 */
.clear-countdown {
    width: 32%;
    max-width: 120px;
    height: auto;
    z-index: 5;
}
.clear-countdown.hide {
    display: none;
}
.clear-countdown img {
    width: 100%;
    height: auto;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

/* 下一关按钮（第 1/2 关）：紧贴倒计时下方；用 is-shown 类统一控显隐 + 弹入动画
   —— display:block 与 popIn 写在同一个选择器下，保证显示与动画发生在同一渲染帧，
      不会出现"先按真实大小闪一下再重新弹入"的卡顿感 */
.clear-next-btn {
    display: none;          /* 默认隐藏，由 JS 加 is-shown 切到显示 */
    width: 44%;
    max-width: 220px;
    height: auto;
    z-index: 6;
    border: 0;
    background: transparent;
    padding: 0;
}
/* 显示态：加这一个类就够了 —— 显示 + 弹入动画在同一选择器里，时序原子化 */
.clear-next-btn.is-shown {
    display: block;
    -webkit-animation: popIn 0.35s ease-out both;
    animation: popIn 0.35s ease-out both;
}
.clear-next-btn img {
    width: 100%;
    height: auto;
    display: block;
}
.clear-next-btn:active { opacity: 0.85; }

/* 第 3 关结束图 end.png：独立 img，不用 button，天然不能点击（继承 .page img{pointer-events:none}）
   尺寸与下一关按钮一致，用同样的 is-shown 类控显隐 + 弹入动画，保证三关动画一致 */
.clear-end-img {
    display: none;          /* 默认隐藏，第 3 关由 JS 加 is-shown 控制显示 */
    width: 44%;
    max-width: 220px;
    height: auto;
    z-index: 6;
}
.clear-end-img.is-shown {
    display: block;
    -webkit-animation: popIn 0.35s ease-out both;
    animation: popIn 0.35s ease-out both;
}

/* 通关结束页专用（end.png 整图覆盖在解析页内容层之上） */
.end-game-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
    pointer-events: none;
}

/* 通用弹出动画（popIn）：flex 列居中时不再需要 translateX(-50%)，纯 scale */
@keyframes popIn {
    0%   { -webkit-transform: scale(0);   transform: scale(0);   opacity: 0; }
    60%  { -webkit-transform: scale(1.08); transform: scale(1.08); }
    100% { -webkit-transform: scale(1);   transform: scale(1);   opacity: 1; }
}

/* ===== 解析页入场动画：pageZoomIn（弹入式，比单纯淡入更有"闯关成功"庆祝感） ===== */
#levelClearPage.active {
    animation: pageZoomIn 0.48s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
@keyframes pageZoomIn {
    0%   { opacity: 0; transform: scale(0.86); }
    55%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================
   10. 陀螺仪横屏提示（用户要求恢复：横屏+不锁屏时全屏浅色纯色+上下左右居中显示rotate_tip.png）
   ========================================= */
.rotate-tip-layer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    /* 浅色纯色背景（与Loading/封面一致的米黄色，视觉柔和） */
    background: #FFF8E1;
    z-index: 9999;
    display: none;
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
}
.rotate-tip-layer.show { display: flex; }

.rotate-tip-img {
    /* 图片比例自适应，宽度不超过屏幕的 60%，最大 280px，高度 auto 不拉伸 */
    width: 36%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =========================================
   11. 响应式阶梯字号（方便 rem 扩展；本项目主要用 px + %）
   ========================================= */
@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. ≤360px 小屏微调
   ========================================= */
@media (max-width: 360px) {
    .cover-start-btn { width: 56%; }
    .hud-score-num { font-size: 16px; }
    .hud-score-total, .hud-score-divider { font-size: 12px; }
    /* 小屏：解析内容间距仍与视觉一致；clearCountdown/clearNextBtn在flex容器内通过margin-top保持相对间距 */
    .clear-content-wrap > * + * { margin-top: 0.9rem; }
    .clear-countdown { width: 56px; }
    .clear-next-btn  { width: 54%; }
}

/* =========================================
   12. 矮屏（≤480px 高度：小尺寸设备）微调
   ========================================= */
@media (max-height: 480px) {
    .cover-title-img { width: 70%; top: 8%; }
    .cover-start-btn { bottom: 12%; width: 44%; }
    .hud-level-img { width: 22%; top: 6px; left: 6px; }
    .hud-score-wrap { width: 38%; top: 6px; right: 6px; }    /* 宽度/定位改在外层 wrap，img/数字层自动跟随 */

    /* 矮屏：padding收窄，解析图最大宽度调小，间距同步压缩；保持用户已主规则里"不限死max-height"的意图 */
    #levelClearPage { padding: 4%; }
    .analysis-img { max-width: 72%; }
    .clear-content-wrap > * + * { margin-top: 0.7rem; }
    .clear-countdown { width: 52px; }
    .clear-next-btn  { width: 40%; }
}