/* ============================================================
   星火征途·正当红 H5 —— 全局样式（红金长征风）
   色板取自小程序 app.wxss
   ============================================================ */
:root{
  --red-900:#7a1010;
  --red-800:#9e1b1b;
  --red-700:#c0392b;
  --gold:#d4a017;
  --gold-lt:#e8c766;
  --gold-pale:#f6e3b0;
  --cream:#faf3e3;
  --cream-2:#f4e8cf;
  --line:#dcc9a6;
  --ink:#2c1810;
  --ink-2:#5c4433;
  --muted:#8a6a3a;
  --white:#fffdf8;
  --ok:#2f7d3a;
  --warn:#b36b00;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fdf6e7,#f6ecd6);
  background-attachment:fixed;
  font-size:15px;line-height:1.6;
  overscroll-behavior-y:none;          /* 禁下拉回弹 */
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select{font-family:inherit;font-size:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}

/* ---------- 横屏提示（仅横屏时显示，竖屏时不占任何空间） ---------- */
.rotate-tip{display:none;}
@media (orientation: landscape){
  .rotate-tip{
    display:flex;position:fixed;inset:0;z-index:9999;
    flex-direction:column;align-items:center;justify-content:center;gap:16px;
    background:#7a1010;color:#ffe9b0;text-align:center;padding:24px;
  }
  .rotate-tip .rt-icon{font-size:56px;animation:rot 1.6s ease-in-out infinite;}
  @keyframes rot{0%,40%{transform:rotate(0);}60%,100%{transform:rotate(90deg);}}
  .rotate-tip .rt-t1{font-size:20px;font-weight:800;letter-spacing:2px;color:#fff;}
  .rotate-tip .rt-t2{font-size:14px;color:#ffdbb0;}
}

/* ---------- 页面容器 ---------- */
.page{
  max-width:480px;margin:0 auto;min-height:100vh;
  padding:18px 16px 40px;position:relative;
}
.page-bg{
  position:fixed;inset:0;z-index:-1;
  background-size:cover;background-position:center;
}
.page-bg::after{content:"";position:absolute;inset:0;background:rgba(250,243,227,.55);}

/* ---------- 顶部条 ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.topbar .back{
  width:34px;height:34px;border-radius:50%;background:rgba(122,16,16,.1);
  display:flex;align-items:center;justify-content:center;color:var(--red-900);font-size:18px;
}
.topbar .title{font-size:17px;font-weight:800;color:var(--red-900);letter-spacing:1px;}
.topbar .spacer{flex:1;}
.topbar .score-chip{
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--red-900);font-weight:800;font-size:13px;
  padding:5px 13px;border-radius:999px;box-shadow:0 2px 8px rgba(212,160,23,.35);
}

/* ---------- 卡片 ---------- */
.card{
  background:var(--white);border:1.5px solid var(--line);border-radius:14px;
  padding:18px;box-shadow:0 4px 16px rgba(122,16,16,.07);margin-bottom:14px;
}
.card-title{font-size:16px;font-weight:800;color:var(--red-900);margin-bottom:12px;}

/* ---------- 按钮 ---------- */
.btn{
  width:100%;padding:14px;border-radius:12px;font-size:16px;font-weight:800;
  letter-spacing:2px;transition:.15s;user-select:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--red-800),var(--red-700));
  color:#ffe9b0;box-shadow:0 6px 16px rgba(158,27,27,.3);
}
.btn-primary:active{transform:translateY(1px);}
.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--red-900);box-shadow:0 6px 16px rgba(212,160,23,.35);
}
.btn-ghost{background:rgba(122,16,16,.08);color:var(--red-900);}
.btn:disabled{opacity:.5;filter:grayscale(.3);}

/* ---------- 表单 ---------- */
.field{margin-bottom:16px;}
.field-label{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:7px;display:block;}
.field-input{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;
  background:rgba(255,253,248,.9);font-size:16px;outline:none;transition:.15s;
}
.field-input:focus{border-color:var(--red-700);box-shadow:0 0 0 3px rgba(192,57,43,.12);}
.picker-wrap{position:relative;}
.picker-wrap .arrow{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;pointer-events:none;
}
.ph{color:#b9a47e;}

/* ---------- 徽标 ---------- */
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;}
.tag-red{background:rgba(192,57,43,.12);color:var(--red-700);}
.tag-gold{background:rgba(212,160,23,.18);color:#8a5a00;}
.tag-ok{background:rgba(47,125,58,.12);color:var(--ok);}
.tag-gray{background:rgba(138,106,58,.12);color:var(--muted);}

/* ---------- 弹层 ---------- */
.modal{
  position:fixed;inset:0;background:rgba(44,24,16,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:.2s;
}
.modal.show{opacity:1;pointer-events:auto;}
.modal-box{
  width:100%;max-width:340px;background:var(--white);border-radius:18px;
  padding:26px 22px;text-align:center;border:2px solid var(--gold);
  box-shadow:0 12px 40px rgba(0,0,0,.3);transform:scale(.92);transition:.2s;
}
.modal.show .modal-box{transform:scale(1);}
.modal-box .big{font-size:46px;line-height:1.1;margin-bottom:10px;}
.modal-box h3{font-size:19px;color:var(--red-900);margin-bottom:8px;}
.modal-box p{font-size:14px;color:var(--ink-2);margin-bottom:18px;}

/* ---------- 加载/空态 ---------- */
.loading{padding:50px 0;text-align:center;color:var(--muted);font-size:14px;}
.loading .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);
  margin:0 3px;animation:bounce .9s infinite ease-in-out;}
.loading .dot:nth-child(2){animation-delay:.15s;}
.loading .dot:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,80%,100%{transform:scale(.6);opacity:.4;}40%{transform:scale(1);opacity:1;}}
.empty{text-align:center;padding:60px 20px;color:#b9a47e;}
.empty .big{font-size:48px;margin-bottom:10px;}
.empty .t{font-size:16px;font-weight:700;color:#a08760;}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.9);
  background:rgba(44,24,16,.92);color:#ffe9b0;padding:12px 22px;border-radius:12px;
  font-size:14.5px;font-weight:600;z-index:200;opacity:0;pointer-events:none;
  transition:.2s;max-width:80%;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------- 首页 hero ---------- */
.hero{text-align:center;padding:26px 0 18px;}
.hero .star{font-size:44px;color:var(--red-700);}
.hero h1{font-size:26px;color:var(--red-900);letter-spacing:4px;margin-top:6px;}
.hero .sub{font-size:13px;color:var(--muted);letter-spacing:2px;margin-top:6px;}
.hero .line{width:60px;height:3px;background:var(--gold);margin:14px auto 0;border-radius:2px;}

/* ============================================================
   底部导航（贯穿所有页面，固定屏幕底部）
   ============================================================ */
.bottom-nav{
  display:flex;justify-content:space-around;
  background:transparent;                    /* 透明背景 */
  border-top:0;                              /* 去掉顶部分隔线 */
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  max-width:480px;margin:0 auto;
  box-shadow:none;                           /* 去掉阴影 */
  overflow:visible;                          /* 让选中项的凸起半圆能溢出到条外 */
}
.bottom-nav a{position:relative;text-align:center;font-size:14px;color:#fff;flex:1;padding:13px 0 8px;
  text-shadow:0 1px 4px rgba(0,0,0,.55);     /* 白字加深色描边阴影，透底也能看清 */
}
.bottom-nav a .ic{display:block;font-size:20px;margin-bottom:2px;}
.bottom-nav a.on{color:#fff;font-weight:800;}
/* 选中项：向上三角（▲，指向导航条上方） */
.bottom-nav a.on::before{
  content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:7px solid #ffe9b0;           /* ▲ 金色三角（白字底色上更醒目） */
}
/* 有底部导航的页面，内容留出底部空间（含选中项凸起半圆的高度） */
.page.has-nav{padding-bottom:96px;}

/* ---------- 超矮屏兜底（如 iPhone SE 667px / 安卓小屏）----------
   底部导航固定高度约 72px + 安全区；内容区用 dvh 动态视口高度避免被浏览器地址栏挤压 */
@supports (min-height: 100dvh){
  .page{min-height:100dvh;}
}