:root {
  /* 原型整图尺寸：1122 x 1402（竖屏） */
  --stage-w: 1122;
  --stage-h: 1402;
  --bg-deep: #00111f;
  /* 首页固定底部导航条高度（按横版内容宽度的比例） */
  --navbar-h: calc(min(100vw, 100dvh * 1402 / 1122) * 0.1);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg-deep);
  color: #fff;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}

button {
  font: inherit;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 设备容器：把舞台居中、上下/左右留黑（letterbox） */
.device {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* 首页固定底部导航：绝对定位于视口底部，内容在其上方滚动，始终可点。仅首页显示。 */
.home-navbar {
  display: none;
}

.device:has(.page[data-page="home"].is-active) .home-navbar {
  display: flex;
}

.home-navbar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100vw, calc(100dvh * 1402 / 1122));
  height: var(--navbar-h);
  z-index: 5;
}

.home-navbar > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.home-navbar__btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  background: transparent;
  transition: background-color 140ms ease;
}

.home-navbar__btn:active {
  background: rgba(255, 255, 255, 0.12);
}

/* 页面切换 */
.page {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
}

.page.is-active {
  display: grid;
  animation: pageIn 280ms ease both;
}

/* 首页为竖长内容，统一按横版宽度显示，超出高度部分上下滚动 */
.page.is-active[data-page="home"] {
  display: block;
  overflow-y: auto;
  scrollbar-width: none;
}

/* 占位元素：撑出底部滚动空间（= 固定导航条高度 + 少量余量），
   使最底部内容能滚动到固定导航条上方而不被遮挡 */
.home-spacer {
  height: calc(var(--navbar-h) + 16px);
}

.page.is-active[data-page="home"]::-webkit-scrollbar {
  display: none;
}

/*
 * 缩放舞台：锁定原型宽高比，按视口等比缩放。
 * 手机（窄）按宽度缩，iPad（宽/高）按高度缩——内容始终 1:1。
 */
.stage {
  position: relative;
  width: min(100vw, calc(100dvh * var(--stage-w) / var(--stage-h)));
  height: min(100dvh, calc(100vw * var(--stage-h) / var(--stage-w)));
  aspect-ratio: var(--stage-w) / var(--stage-h);
  overflow: hidden;
}

.stage__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 横版页面统一 1402x1122：打卡/成功/课堂/急救/画像/大哭闹详情。 */
.stage--checkin,
.stage--success,
.stage--lesson,
.stage--aid,
.stage--profile,
.stage--cry,
.stage--companion {
  --stage-w: 1402;
  --stage-h: 1122;
}

/* 首页（竖长图 1122x1402）：宽度与横版页一致，高度取自然值，整页随 .page 上下滚动 */
.stage--home {
  width: min(100vw, calc(100dvh * 1402 / 1122));
  height: auto;
  aspect-ratio: auto;
  margin: 0 auto;
}

.stage--home .stage__bg {
  height: auto;
}

/* 透明热区：百分比定位，缩放后位置不变 */
.hotspot {
  position: absolute;
  border-radius: 999px;
  background: transparent;
  transition: background-color 140ms ease, transform 140ms ease;
}

.hotspot:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.14);
}

@media (hover: hover) {
  .hotspot:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ============ 首页热区坐标（基于 首页.png） ============ */
.hs-home-checkin {
  left: 29.5%;
  top: 40%;
  width: 27%;
  height: 6%;
}

.hs-home-lesson-1 {
  left: 2.5%;
  top: 52.5%;
  width: 46.5%;
  height: 19.5%;
  border-radius: 24px;
}

.hs-home-lesson-2 {
  left: 51%;
  top: 52.5%;
  width: 46.5%;
  height: 19.5%;
  border-radius: 24px;
}

/* 整张卡片可点（不再只压在按钮上） */
.hs-home-interaction {
  left: 2%;
  top: 80%;
  width: 46.5%;
  height: 19%;
  border-radius: 20px;
}

.hs-home-emotion {
  left: 51.5%;
  top: 80%;
  width: 46.5%;
  height: 19%;
  border-radius: 20px;
}

/* ============ 每日打卡热区（基于横版 每日打卡.png 1402x1122） ============ */
.hs-back {
  left: 1.5%;
  top: 6%;
  width: 6.5%;
  height: 8%;
}

.hs-checkin-confirm {
  left: 21.5%;
  top: 77%;
  width: 55.5%;
  height: 8.5%;
}

/* ============ 打卡成功热区（基于横版 打卡成功.png 1402x1122） ============ */
.hs-success-home {
  left: 21%;
  top: 79%;
  width: 27%;
  height: 9%;
}

.hs-success-study {
  left: 52%;
  top: 79%;
  width: 27%;
  height: 9%;
}

/* ============ 急救页「大哭大闹」卡片 → 大哭闹详情 ============ */
.hs-aid-cry {
  left: 3%;
  top: 22%;
  width: 30%;
  height: 28%;
  border-radius: 20px;
}

/* ============ 大哭闹详情页左上角返回 ============ */
.hs-cry-back {
  left: 1%;
  top: 2%;
  width: 9%;
  height: 7%;
}

/* ============ 陪伴课堂页（基于 陪伴课堂.png）============ */
.hs-companion-back {
  left: 1%;
  top: 2%;
  width: 9%;
  height: 7%;
}

.hs-companion-ganen {
  left: 2%;
  top: 16.5%;
  width: 46.5%;
  height: 17%;
  border-radius: 20px;
}

.hs-companion-limao {
  left: 51.5%;
  top: 16.5%;
  width: 46.5%;
  height: 17%;
  border-radius: 20px;
}

/* ============ 课堂页·小小童心卡片（看短剧学美德第一行第一个）============ */
.hs-lesson-tongxin {
  left: 1.5%;
  top: 17%;
  width: 23%;
  height: 23%;
  border-radius: 18px;
}

/* ============ 课堂页·心怀感恩卡片（听故事学美德第二行第一个）============ */
.hs-lesson-xinhuai {
  left: 1.5%;
  top: 49.5%;
  width: 23%;
  height: 19%;
  border-radius: 18px;
}

/* ============ 课堂页·学会感恩卡片（幸福格言手语操第三行第一个）============ */
.hs-lesson-ganen {
  left: 1.5%;
  top: 76.5%;
  width: 23%;
  height: 16%;
  border-radius: 18px;
}

/* ============ tab 页左上角返回 ============ */
.hs-tab-back {
  left: 1.5%;
  top: 1.5%;
  width: 8%;
  height: 6%;
}

/* ============ 底部导航（所有页通用，5 等分覆盖整条导航栏） ============ */
.stage__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 7%;
}

/* 部分图导航行不在图片最底部（下方有留白），需上移定位 */
.stage--checkin .stage__nav,
.stage--success .stage__nav {
  top: 88.5%;
  bottom: auto;
  height: 10%;
}

.stage__nav-btn {
  flex: 1 1 0;
  background: transparent;
  transition: background-color 140ms ease;
}

.stage__nav-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

@media (hover: hover) {
  .stage__nav-btn:hover {
    background: rgba(255, 255, 255, 0.07);
  }
}

/* ============ 视频弹窗 ============ */
.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 40px;
  background: rgba(0, 7, 16, 0.76);
  backdrop-filter: blur(10px);
  z-index: 20;
}

.video-modal.is-open {
  display: grid;
}

.video-modal__panel {
  position: relative;
  width: min(920px, 86vw);
  border-radius: 32px;
  background: #00162b;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  animation: modalIn 260ms ease both;
}

.video-close {
  position: absolute;
  right: -18px;
  top: -18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: #102238;
  font-size: 38px;
  z-index: 2;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}

.video-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 22px 20px;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
}

.video-caption__time {
  color: var(--gold, #ffc037);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.video-frame video,
.video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-frame video {
  object-fit: contain;
}

/* 竖屏视频：播放器改为按高度约束，宽度由视频真实比例决定，避免裁切/过高 */
.video-modal__panel.is-portrait {
  width: auto;
  max-width: 92vw;
}

.video-modal__panel.is-portrait .video-frame {
  height: min(78dvh, 760px);
  width: auto;
}

.video-fallback {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px;
  text-align: center;
  background:
    linear-gradient(0deg, rgba(0, 18, 36, 0.56), rgba(0, 18, 36, 0.56)),
    url("img/ChatGPT Image 2026年5月29日 00_32_53 (6).png") center / cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.video-fallback.is-visible {
  opacity: 1;
}

.video-fallback strong {
  align-self: end;
  font-size: clamp(28px, 4vw, 44px);
}

.video-fallback span {
  align-self: start;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 2vw, 22px);
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}