/* ============================================================
   粤掂 JyutDim · 站点级设计系统（电车绿·怀旧极简）
   - 只含：设计变量、站点页面组件（首页/粤拼/声调/复习）
   - 顶部导航另见 assets/site-header.css（7 页共用）
   - 类名带 .page 前缀，避免污染游戏内部样式
   ============================================================ */

:root{
  /* 电车绿·怀旧极简 色板 */
  --neon-red:      #006938;   /* 电车绿（主色） */
  --neon-red-deep: #004a27;   /* 深绿 */
  --tea-green:     #166d40;   /* 答对绿 */
  --neon-gold:     #c9a24a;   /* 金（奖励点缀） */
  --danger:        #b03028;   /* 答错红 */
  --ink:           #232323;   /* 墨黑 */
  --ink-soft:      #4a4740;
  --paper:         #f5f0e6;   /* 米白 */
  --paper-warm:    #ece6d6;
  --paper-card:    #fbf8f1;
  --line:          #dfd8c8;
  --muted:         #6f6a5f;
  --green-soft:    #d9e8df;

  /* 字体：香港繁体优先，简体模式仍按同一栈自然回退 */
  --font-display: "Songti TC","Songti SC","STSong","Noto Serif CJK TC","Noto Serif CJK HK","Source Han Serif TC","Source Han Serif HK","SimSun",serif;
  --font-body: "PingFang HK","PingFang TC","Noto Sans CJK HK","Noto Sans CJK TC","Microsoft JhengHei","Microsoft YaHei",sans-serif;
  --font-mono: ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;

  /* 阴影（极简，无霓虹光晕） */
  --glow-red:  0 2px 10px rgba(0,105,56,.18);
  --glow-gold: 0 2px 10px rgba(201,162,74,.20);
}

/* 顶部导航（.site-nav）已抽到 assets/site-header.css，
   由 assets/site-header.js 注入，7 页共用一套。 */

/* ============================================================
   站点页面通用（首页 / 粤拼 / 声调 / 复习 共用）
   ============================================================ */
.site-page{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.site-page *{ box-sizing: border-box; }

.page{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 56px;
}

/* 内页刊头：和首页同一套骨架——左标题 / 竖线 / 右导语 / 上下横线。
   竖线的横向位置与首页刊头一致（258px），翻页时它不会跳。
   用 body.site-page 提权，压过各页内联的 .page-head{padding:28px 0 4px}。 */
body.site-page .page-head{
  display: grid;
  grid-template-columns: 258px 1fr;
  gap: 38px;
  align-items: center;
  margin: 34px 0 0;
  padding: 24px 0 22px;
  border-top: 1px solid rgba(0,74,39,.30);
  border-bottom: 1px solid rgba(0,74,39,.30);
}
body.site-page .page-head h1{
  margin: 0;
  font-size: clamp(28px, 4.6vw, 38px);
  line-height: 1.15;
}
body.site-page .page-head .sub{
  position: relative;
  margin: 0;
  padding-left: 38px;
  max-width: 470px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}
body.site-page .page-head .sub::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 56px;
  transform: translateY(-50%);
  background: rgba(0,74,39,.16);
}

/* 标题 */
.neon-title{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--neon-red);
  margin: 0;
}
.neon-sub{
  font-family: var(--font-display);
  color: var(--neon-red-deep);
  letter-spacing: 2px;
}

/* 标题回首页：和三个游戏页同一套约定（.home-link + .home-mark）。
   放在这里，粤拼 / 声调 / 复习三页的刊头标题都能直接用。 */
.home-link{ color: inherit; text-decoration: none; }
.home-link:hover{
  text-decoration: underline;
  text-underline-offset: .14em;
  text-decoration-thickness: 2px;
}
.home-link .home-mark{
  font-size: .38em;
  vertical-align: .75em;
  margin-left: .4em;
  opacity: .38;
  transition: opacity .18s ease;
}
.home-link:hover .home-mark{ opacity: .85; }

/* 手绘图标（assets/icons.js 生成）：尺寸由外层容器控制 */
.yd-ico{ display: block; width: 100%; height: 100%; }

/* 绿方块印章 */
.stamp{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--neon-red);
  color: #fbf8f1;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 900;
  /* 压印：上缘一线高光、下缘一道暗影，像盖下去吃进纸里 */
  text-shadow: none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12);
}

/* 通用按钮 */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(35,35,35,.12); }
.btn--neon{
  background: var(--neon-red);
  border-color: transparent;
  color: #fbf8f1;
  box-shadow: var(--glow-red);
}
.btn--neon:hover{ background: var(--neon-red-deep); }
.btn--gold{
  background: var(--neon-gold);
  border-color: transparent;
  color: #3a2c00;
}
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* TTS 降级提示条 */
.tts-banner{
  display: none;
  margin: 14px auto 0;
  max-width: 960px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(176,48,40,.4);
  background: rgba(176,48,40,.07);
  color: #8b1e1e;
  font-size: 13.5px;
  line-height: 1.6;
}
.tts-banner.show{ display: block; }
.tts-banner b{ color: #8b1e1e; }

/* 纸卡片 */
.panel{
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(35,35,35,.06);
}

/* 页脚 */
.site-footer{
  margin-top: 44px;
  padding-top: 22px;
  /* 印刷双线：2px 粗线 + 3px 空隙 + 1px 细线，比虚线更像排出来的版 */
  border-top: none;
  background-image:
    linear-gradient(90deg, rgba(0,74,39,.28), rgba(0,74,39,.28)),
    linear-gradient(90deg, rgba(0,74,39,.13), rgba(0,74,39,.13));
  background-size: 100% 2px, 100% 1px;
  background-position: top left, left 5px;
  background-repeat: no-repeat, no-repeat;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.site-footer p{ margin: 0; }

/* 响应式 */
@media (max-width: 720px){
  body.site-page .page-head{
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 22px 0 0;
    padding: 18px 0 16px;
  }
  body.site-page .page-head .sub{
    padding-left: 0;
    max-width: none;
  }
  body.site-page .page-head .sub::before{ display: none; }

  .page{ padding: 0 16px 40px; }
}