/* ========== 首页：bg 图片作为背景图，等比铺满屏幕 ==========
   背景图 499x1080 作为 CSS 背景，等比铺满整个视口（不变形、不补色、无滚动）：
   用 cover + 顶部对齐，屏幕比例与图不同时只裁掉底部多出的一小部分。
   （499:1080 ≈ 19.5:9，主流全面屏手机比例一致，实际只裁极少或几乎不裁）
   宫格按百分比定位在图片中部空白带，随屏等比缩放。 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 字体：Oswald（无中文 glyph，中文自动回退 PingFang/雅黑）----
   优先可变字体（200–700 字重一个文件），不支持的浏览器回退到 Regular 静态字体。 */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Oswald-Regular.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: none; /* 不使用其它颜色补边，全部由背景图铺满 */
  color: #fff;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

.page {
  height: 100%;
  /* height: 100dvh; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 背景：整图 cover 等比铺满 ===== */
/* 舞台铺满整个视口：背景图用 cover 等比放大铺满，顶部对齐、水平居中，
   屏幕比例与图不同时只裁掉底部/两侧多出的部分，绝不被拉伸变形。 */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../images/home-bg.png") no-repeat;
  background-size: 100% 100%;
}

/* 与背景图 cover 后「实际渲染区域」严格重合的容器：
   cover 缩放比 = max(vw/图宽, vh/图高)，故渲染尺寸为
   max(100vw, 100vh × 图宽/图高) × max(100vh, 100vw × 图高/图宽)，顶部对齐、水平居中。
   换背景图时只需改下面两个变量（填图片的原始像素尺寸）。
   宫格按百分比定位在其中，因此任意屏幕比例下都与画面中部空白带对齐。 */
.stage-inner {
  /* ↓↓↓ 背景图原始像素尺寸：home-bg.png 当前为 750 × 1623 ↓↓↓ */
 /* --bg-w: 750;
  --bg-h: 1623;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 视口比图「更高瘦」→ 裁两侧；比图「更矮胖」→ 裁底部 */
 /* width: max(100vw, calc(100vh * var(--bg-w) / var(--bg-h)));
  height: max(100vh, calc(100vw * var(--bg-h) / var(--bg-w))); */
  /* 支持动态视口的浏览器按可见区域计算，避免移动端工具栏挤压可见高度 */
 /* width: max(100vw, calc(100dvh * var(--bg-w) / var(--bg-h)));
  height: max(100dvh, calc(100vw * var(--bg-h) / var(--bg-w))); */
}

/* 宫格：居中放在图片中部空白带（标题止于 23%，地球辉光起于 70.3%）。
   百分比相对 .stage-inner（即背景图实际渲染区域）计算。 */
.nav-grid {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 30%;
  height: 39%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3.5% 6%;
}

/* 方块内容：参考站样式 —— 图标在上、文字在下，整体居中 */
.nav-tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7%;
  /* background: url("../images/navbg.png") center / 100% 100% no-repeat; */
  background:rgba(215, 220, 235, 0.75);
  border-radius: 10px;
  font-size: clamp(10px, 3.2vw, 20px);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 6px rgba(8, 30, 90, 0.55);
  padding: 0 6%;
}

/* 图标：描边色继承文字颜色，随屏宽等比缩放 */
.nav-icon {
  width: clamp(18px, 7vw, 34px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 2px 5px rgba(8, 30, 90, 0.45));
}

.nav-label {
  text-align: center;
  line-height: 1.15;
}

/* ---- 底部日期 / 地点 ---- */
.home-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(3.5% + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(8, 30, 90, 0.6);
  pointer-events: none;
}

.home-date span {
  display: block;
  white-space: nowrap;
}

.nav-item:active .nav-tile {
  transform: scale(0.94);
}

/* 字号统一使用 .nav-tile 上的 clamp()；
   如需跟随舞台宽度缩放，可取消下面注释配合 container-type: inline-size 使用：
   .nav-tile { font-size: 4.6cqw; } */