/* 手机首页样式 —— 独立文件（2026-10-08，CMD_mobile_homepage_v1）
 *
 * 为什么单独一份：
 *   公共样式表 src/style.css 是 HUD / 商店 / 结算那条线的属主文件（另一路已交频），首页规则往里加迟早撞车。
 *   本文件只作用于 #menu（首页）下的 .hm-* 节点，一个字母都不改 style.css。
 *   命名统一 hm- 前缀；首页不引用 .panel / .cls / .spec 这些公共类，避免互相牵制。
 *
 * 三条硬约束（设计草案 + 用户验收项）：
 *   1. 触控目标 ≥ 44 CSS px —— 每个可点元素都写死 min-height/min-width，不靠内容撑。
 *   2. 安全区 —— 四边 padding 全部 max(基准, env(safe-area-inset-*))，刘海/小白条/手势条都不压字。
 *   3. 文字靠"局部蒙版"承载 —— 背景图是底，.hm-veil 只压文字那块，不是全屏纯黑挡图。
 *
 * 背景图接口（本批不生成图）：
 *   #hm-bg 的背景图由 JS 通过 HomeMenu.setBackground(url) 写入 --hm-bg-image，
 *   没设置时就用下面 .hm-bg 的渐变底 —— 那只是"占位底色"，不是新背景图，别当成图已交付。
 */
#menu.hm-screen {
    display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
    padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* 覆盖公共 .screen 的 place-items:start center —— 首页要自己占满，不是居中一块面板 */
    place-items: initial;
}
/* ⚠ 这条不能省（2026-10-08 实测踩到）：上面那条是「ID + 类」，比公共样式表里的
   `.screen[hidden] { display: none }`（类 + 属性）**权重更高** —— 于是 #menu 被 hidden 之后
   依然 display:flex，首页会盖在战斗画面上，看起来像"打不起来"，其实状态早就是 playing。
   截图一眼就看出来了，DOM 断言（state/hudHidden）却全都通过。切状态全靠 hidden 属性，所以必须显式盖回去。 */
#menu.hm-screen[hidden] { display: none; }

/* ---------- 背景层（可替换资源接口） ---------- */
.hm-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--hm-bg-image, none);
    background-position: center; background-size: cover; background-repeat: no-repeat;
    /* 占位底色：地牢入口的冷紫夜色。等 Root 出图后由 --hm-bg-image 覆盖，这层渐变只负责没图时不白屏 */
    background-color: #0b0c12;
}
.hm-bg::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(120% 85% at 50% 8%, rgba(90, 52, 150, .40) 0%, rgba(11, 12, 18, .30) 55%, rgba(6, 6, 10, .72) 100%),
        linear-gradient(180deg, #171233 0%, #0d0c17 58%, #08080d 100%);
}
/* 局部蒙版：只压住要放字的那一块，保证高对比；四周留给背景图透出来 */
.hm-veil {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 6, 10, .70) 0%, rgba(6, 6, 10, .28) 26%, rgba(6, 6, 10, .30) 58%, rgba(6, 6, 10, .82) 100%);
}

/* ---------- 骨架 ---------- */
.hm-shell {
    position: relative; z-index: 1; flex: 1 1 auto;
    display: flex; flex-direction: column; min-height: 100%;
    padding:
        max(10px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
}

/* 角落设置入口：44×44 起步，图标居中，不和标题抢位置 */
.hm-icon {
    position: absolute; z-index: 3;
    top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    min-width: 44px; min-height: 44px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid rgba(236, 227, 207, .28); border-radius: 12px;
    background: rgba(10, 9, 16, .55); color: #ece3cf; font-size: 16px;
    touch-action: manipulation;
}
.hm-icon[aria-expanded="true"] { border-color: #ffd100; color: #ffd100; }
.hm-icon:focus-visible { outline: 2px solid #ffd100; outline-offset: 2px; }
.hm-icon-label { font-size: 13px; }
@media (max-width: 359px) { .hm-icon-label { display: none; } }

/* ---------- 标题区 ---------- */
.hm-head { flex: 0 0 auto; text-align: center; padding: 4px 56px 10px 8px; }
/* 标题是 <h1>，所以要压过公共样式表里的 `#menu h1 { font-size: 4.4em }` / `.mobile #menu h1 { font-size: 3em }`
   —— 那两条是「ID + 元素」，这里用「ID + 类 + 元素」才赢。LOGO 资产就绪后 setLogo() 会把文字换成 <img>，外框尺寸不变。 */
#menu .hm-logo-title {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; margin: 0; text-align: center;
    font-family: var(--serif, "Songti SC", serif); font-weight: 900;
    font-size: clamp(30px, 9.4vw, 52px); line-height: 1.06; letter-spacing: .16em; color: #ffd100;
    text-shadow: 0 2px 0 #7a5a00, 0 6px 18px rgba(0, 0, 0, .85); text-wrap: balance;
}
#menu .hm-logo-title img { max-width: min(78vw, 340px); max-height: 22vh; object-fit: contain; }
.hm-sub {
    margin: 8px 0 0; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.5;
    color: #d8d0e2; text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

/* ---------- 入口区 ---------- */
.hm-nav {
    flex: 0 0 auto; margin-top: auto; display: flex; flex-direction: column; gap: 10px;
    padding-top: 12px;
}
.hm-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 100%; min-height: 52px; padding: 10px 14px;
    border: 1px solid rgba(236, 227, 207, .22); border-radius: 14px;
    background: linear-gradient(180deg, rgba(38, 32, 60, .92), rgba(18, 15, 28, .92));
    color: #ece3cf; font-size: clamp(16px, 4.4vw, 19px); font-weight: 700; letter-spacing: .08em;
    text-align: center; touch-action: manipulation;
}
.hm-card:active { transform: translateY(1px); }
.hm-card:focus-visible { outline: 2px solid #ffd100; outline-offset: 2px; }
.hm-card .hm-meta { font-size: clamp(12px, 3.2vw, 14px); font-weight: 500; letter-spacing: .02em; color: #bdb4cc; }
.hm-card[disabled] { opacity: .55; }

/* 主按钮：新游戏 —— 全屏最强视觉 */
.hm-main {
    min-height: 68px; font-size: clamp(21px, 6vw, 26px); font-weight: 900; letter-spacing: .22em;
    color: #1a1200; border-color: #ffd100;
    background: linear-gradient(180deg, #ffe066 0%, #f0b400 52%, #b87f00 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.hm-main .hm-meta { color: rgba(26, 18, 0, .78); font-weight: 700; }

/* 继续冒险：只有真有存档时才出现，且排在所有入口最前面 */
.hm-continue {
    min-height: 60px; border-color: rgba(125, 255, 138, .5);
    background: linear-gradient(180deg, rgba(26, 52, 34, .95), rgba(12, 26, 18, .95));
}
.hm-continue .hm-lead { font-size: clamp(18px, 5vw, 22px); color: #b6ffc0; letter-spacing: .12em; }
.hm-continue .hm-meta { color: #cfe9d4; }
.hm-continue[hidden] { display: none !important; }

.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-grid .hm-card { min-height: 56px; }
.hm-grid .hm-card:first-child { grid-column: 1 / -1; }   /* 排行榜单独占满一行，"未开放"要说清楚 */

.hm-tag {
    font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(236, 227, 207, .35); color: #cfc6b4;
}

/* 二级入口：每日挑战这类真能用但不该抢主入口的功能 */
.hm-more { display: flex; justify-content: center; padding-top: 2px; }
.hm-more-btn {
    min-height: 44px; padding: 8px 18px; border-radius: 999px;
    border: 1px solid rgba(236, 227, 207, .20); background: rgba(14, 12, 22, .78);
    color: #d8d0e2; font-size: clamp(13px, 3.5vw, 15px); text-align: center; touch-action: manipulation;
}
.hm-more-btn b { color: #ffd100; }
.hm-more-btn:focus-visible { outline: 2px solid #ffd100; outline-offset: 2px; }

/* ---------- 页脚：玩法说明 / 真实版本 / 内测反馈 ---------- */
.hm-foot {
    flex: 0 0 auto; margin-top: 12px; padding-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
    border-top: 1px solid rgba(236, 227, 207, .12);
}
.hm-link {
    min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: none;
    color: #b6adc6; font-size: clamp(12px, 3.2vw, 14px); text-decoration: underline; touch-action: manipulation;
}
.hm-link:focus-visible { outline: 2px solid #ffd100; outline-offset: 1px; }
.hm-version { font-size: clamp(11px, 2.9vw, 13px); color: #8f8ba3; font-variant-numeric: tabular-nums; }

/* ---------- 弹层（设置 / 玩法说明 / 排行榜预留 / 覆盖确认） ---------- */
.hm-scrim {
    position: absolute; inset: 0; z-index: 2; background: rgba(4, 4, 8, .68);
    -webkit-tap-highlight-color: transparent;
}
.hm-scrim[hidden] { display: none; }
.hm-sheet {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    max-height: min(86%, 720px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding:
        18px
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    border-top: 1px solid rgba(255, 209, 0, .35); border-radius: 18px 18px 0 0;
    background: #14121f; color: #ece3cf;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .6);
}
.hm-sheet[hidden] { display: none; }
.hm-sheet h3 { margin: 0 44px 4px 0; font-family: var(--serif, serif); font-size: 21px; color: #ffd100; letter-spacing: .06em; }
.hm-sheet .hm-sheet-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #cfc6b4; }
.hm-sheet .hm-sheet-lead b { color: #ffd100; }
.hm-sheet .hm-sheet-body { font-size: 14px; line-height: 1.75; color: #d8d0e2; }
.hm-sheet .hm-sheet-body p { margin: 0 0 10px; }
.hm-sheet .hm-sheet-body ul { margin: 0 0 10px; padding-left: 20px; }
.hm-sheet .hm-sheet-body li { margin: 0 0 6px; }
.hm-sheet-close {
    position: absolute; top: 8px; right: max(10px, env(safe-area-inset-right));
    min-width: 44px; min-height: 44px; border: 1px solid rgba(236, 227, 207, .25); border-radius: 12px;
    background: rgba(10, 9, 16, .7); color: #ece3cf; font-size: 18px; touch-action: manipulation;
}
.hm-sheet-close:focus-visible { outline: 2px solid #ffd100; outline-offset: 2px; }

/* 设置行：开关本体就是 <button role=switch>，44px 起步 */
.hm-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 52px; padding: 10px 14px; margin: 0 0 8px;
    border: 1px solid rgba(236, 227, 207, .2); border-radius: 12px;
    background: #1a1626; color: #ece3cf; font: inherit; text-align: left; touch-action: manipulation;
}
.hm-row:focus-visible { outline: 2px solid #ffd100; outline-offset: 2px; }
.hm-row .hm-ico { flex: 0 0 auto; width: 22px; text-align: center; font-size: 17px; }
.hm-row .hm-name { flex: 1 1 auto; font-size: 15px; }
.hm-row .hm-hint { display: block; margin-top: 3px; font-size: 12px; color: #8f8ba3; line-height: 1.45; }
.hm-row .hm-state { flex: 0 0 auto; min-width: 44px; text-align: right; font-weight: 700; font-size: 14px; color: #8f8ba3; }
.hm-row[aria-checked="true"] { border-color: rgba(125, 255, 138, .55); background: #16241a; }
.hm-row[aria-checked="true"] .hm-state { color: #9fe3a0; }
.hm-row[aria-checked="false"] .hm-ico { opacity: .5; }
.hm-row.hm-info { cursor: default; }
.hm-row.hm-info .hm-state { color: #b6adc6; font-weight: 500; }

/* 弹层按钮：每个都 ≥44px，主次分明 */
.hm-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hm-btn {
    flex: 1 1 auto; min-height: 48px; padding: 10px 16px; border-radius: 12px;
    border: 1px solid rgba(236, 227, 207, .25); background: #221d33; color: #ece3cf;
    font: inherit; font-size: 15px; touch-action: manipulation;
}
.hm-btn:focus-visible { outline: 2px solid #ffd100; outline-offset: 2px; }
.hm-btn.hm-primary { background: linear-gradient(#ffe066, #c99a00); border-color: #ffd100; color: #1a1200; font-weight: 800; }
.hm-btn.hm-danger { background: linear-gradient(#ff8a80, #b3342c); border-color: #e0413b; color: #2a0b0b; font-weight: 800; }
.hm-report {
    margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(236, 227, 207, .3);
    background: #100e1a; font-size: 13px; line-height: 1.7; color: #cfc6b4; word-break: break-all; user-select: text;
}

/* ---------- 横屏：主体在左、功能区在右（避开刘海与手势条） ---------- */
@media (orientation: landscape) and (max-height: 560px) {
    /* ⚠ 这里**不能**只把 .hm-shell 改成 flex-direction:row：head / nav / foot 是三个兄弟节点，
       一转成 row 就排成**三列**，footer 会被挤到功能区右边、功能区本身被压窄，
       于是"排行榜"被断成"排行 / 榜"、"图鉴"说明竖着断行（2026-10-08 844×390 截图实见）。
       用 grid 明确"两列两行"：标题占满左列（跨两行），功能区右上、页脚右下。 */
    #menu.hm-screen .hm-shell {
        display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 56%);
        grid-template-rows: minmax(0, 1fr) auto; align-content: center;
        column-gap: max(12px, env(safe-area-inset-left));
    }
    /* 角落设置按钮挪到**左上**：横屏时右上角被"新游戏"占着（844×390 实见压住主按钮一角）。
       左列标题是垂直居中的，上角是空的；给 .hm-head 留出这一块高度，两者就不会打架。 */
    .hm-icon { left: max(12px, env(safe-area-inset-left)); right: auto; }
    .hm-head {
        grid-column: 1; grid-row: 1 / -1;
        display: flex; flex-direction: column; justify-content: center;
        text-align: left; padding: 52px 8px 4px 4px; margin: 0; min-width: 0;
    }
    /* nowrap：横屏左列就那么宽，标题再窄也别断成"秘境 / 旅团" */
    #menu .hm-logo-title { justify-content: flex-start; font-size: clamp(26px, 5vw, 42px); white-space: nowrap; }
    .hm-sub { margin-top: 6px; }
    .hm-nav {
        grid-column: 2; grid-row: 1;
        margin: 0; padding-top: 0; min-width: 0;
        display: flex; flex-direction: column; justify-content: center; gap: 8px;
    }
    .hm-foot { grid-column: 2; grid-row: 2; margin-top: 8px; padding-top: 6px; }
    .hm-main { min-height: 58px; }
    .hm-grid { grid-template-columns: 1fr 1fr; }
    .hm-sheet { left: auto; width: min(560px, 62%); border-radius: 18px 0 0 0; max-height: 100%; }
}

/* 矮屏兜底：横屏 390 高时把间距再收一收，保证不用缩放就能点完 */
@media (max-height: 430px) {
    .hm-head { padding-bottom: 4px; }
    .hm-nav { gap: 7px; }
    .hm-card { min-height: 48px; padding: 8px 12px; }
    .hm-grid .hm-card { min-height: 48px; }
    .hm-main { min-height: 54px; }
}

/* 系统字体放大 / 长文案：按钮不能被挤没，文字不能出框（min-height 兜底 + 允许断行） */
.hm-card .hm-lead, .hm-more-btn, .hm-row .hm-name { overflow-wrap: anywhere; }

/* 首页自己的轻提示（不借用战斗 HUD 的横幅，那条线是别人的属主文件） */
.hm-toast {
    position: absolute; z-index: 4; left: 50%; bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
    transform: translateX(-50%) translateY(6px);
    max-width: min(88%, 420px); margin: 0; padding: 10px 16px; border-radius: 999px;
    background: rgba(12, 10, 20, .94); border: 1px solid rgba(255, 209, 0, .45); color: #ece3cf;
    font-size: 13px; line-height: 1.5; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.hm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .hm-toast { transition: none; } }

/* ---------- 专精选（#specselect，2026-10-08 从主菜单里独立出来的一页） ----------
   它沿用公共样式表里的 .panel / .cls / .spec / #diffs 那一套（那些是现成的，一行没改），
   但原先挂在 #menu 上的三条覆盖（面板宽度、标题字号、小屏说明字号）跟着首页一起搬走了，
   所以在**自己的文件里**补回等价的四条 —— 公共样式表一个字母都不动。 */
#specselect .panel { width: min(94%, 88em); }
#specselect .lede { font-size: 1em; line-height: 1.6; margin-bottom: 1.2em; }
.mobile #specselect .panel { width: 100%; }
.mobile #specselect h2 { font-size: 3em; }
.mobile #specselect .keystone small { font-size: 11px; }

/* 电脑版：舞台是 16:9 信箱，首页跟着舞台居中，控件不铺满整个浏览器窗口 */
#menu.hm-screen { font-size: 16px; }
.hm-shell { width: min(100%, 720px); margin: 0 auto; }
@media (min-width: 900px) {
    #menu .hm-logo-title { font-size: 46px; }
    .hm-main { min-height: 64px; }
}
/* 根AI背景：保留层级与文字遮罩，避免旧不透明占位覆盖真实背景。 */
.hm-bg[style*="--hm-bg-image"]::before { opacity: .22; }