/* ============================================================================
 * home.css —— 介绍页＋游戏大厅（看板 R2-8；原型 docs/prototypes/ww-entry/home.css 定稿后翻来）
 * ----------------------------------------------------------------------------
 * ⭐为什么不直接 <link> 游戏那份 theme.css：它 141 KB，且第 1 节把 body 做成一屏不滚的版面。
 *   ⇒ 颜色与字体变量**逐个照抄** theme.css（数值一字不改），首页单独一份小样式表。
 * 版面：介绍页＝8 屏分屏（scroll-snap，每屏正好一屏高，⛔内容溢出就是 bug，走查脚本逐屏量）；
 *       游戏大厅＝普通页面（标签＋大图／视频）。输码、排队都是弹窗（在屏里展开会把那一屏撑破）。
 * 单一暗色主题是有意的：这是雾里的村子，⛔不做亮色版。
 * ========================================================================== */
:root {
  /* 颜色：全部照抄 theme.css 同名变量 */
  --ink:       #090b0c;
  --ink-2:     #0d1213;
  --slate:     #1a2022;
  --paper:     #ded9cd;
  --paper-dim: #b3ae9f;
  --fog:       #7f8f88;
  --fog-deep:  #55605c;
  --candle:    #b8945c;
  --candle-hi: #d9bd8a;
  --moon:      #f2c274;   /* 月亮、「可以玩」、真人席 */
  --wolf:      #9a6055;
  --wolf-hi:   #c08a7e;
  --ok:        #8aa892;
  --seal:      #f4ecdc;   /* 天将胸口那块发光圆盘 */
  --line:      rgba(190, 200, 194, .10);
  --line-2:    rgba(190, 200, 194, .18);
  --glass:     rgba(12, 17, 17, .92);

  --serif: "Songti SC", "STSong", SimSun, "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans:  "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans CJK SC", system-ui, sans-serif;
  --latin: Georgia, "Times New Roman", "Noto Serif", serif;
  /* 标题：Georgia 在前 ⇒ 拉丁字母和数字用 Georgia，中文落到宋体（宋体的拉丁字形很难看） */
  --display: Georgia, "Songti SC", "STSong", SimSun, "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --mono:  Consolas, "Cascadia Mono", "SF Mono", "Noto Sans Mono CJK SC", monospace;

  --fs-hero: clamp(36px, min(6vw, 8.5vh), 76px);
  --fs-h2:   clamp(24px, min(3.2vw, 5vh), 40px);
  --fs-body: 15.5px;
  --fs-sm:   13.5px;
  --fs-xs:   12px;

  --gutter: clamp(16px, 4vw, 44px);
  --maxw: 1180px;
  --r: 10px;
  --nav-h: calc(64px + env(safe-area-inset-top, 0px));   /* 顶栏占的高＝字那一行＋状态栏（加到主屏幕、状态栏透明时才有；Safari 里是 0） */
  --vh: 100vh;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--candle); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 400; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================== 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 6px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
  color: var(--paper); font-size: 15px; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: rgba(222, 217, 205, .35); background: rgba(255, 255, 255, .07); }
.btn-primary { background: rgba(184, 148, 92, .22); border-color: rgba(184, 148, 92, .6); color: var(--candle-hi); font-weight: 600; }
.btn-primary:hover { background: rgba(184, 148, 92, .32); border-color: var(--candle); color: #ecd3a4; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.text-link { display: inline-block; margin-top: 16px; font-size: var(--fs-sm); color: var(--paper-dim); letter-spacing: .06em; text-underline-offset: 4px; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.text-link::after { content: " →"; }
.text-link:hover { color: var(--paper); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; letter-spacing: .06em; white-space: nowrap; }
.chip.is-live { border-color: rgba(242, 194, 116, .45); color: var(--moon); }
.chip.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--moon); }
.chip.is-soon { color: var(--fog); }

/* ============================================================== 顶栏（固定，两个页面共用） */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, rgba(6, 9, 10, .82) 0%, rgba(6, 9, 10, .4) 70%, transparent 100%);
}
.site-nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 22px; height: 22px; flex: none; }
.brand-mark { font-family: var(--latin); font-size: 17px; letter-spacing: .16em; color: var(--paper); }
.brand-mark.mark-cjk { font-family: var(--serif); letter-spacing: .3em; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-link { padding: 6px 10px; font-size: var(--fs-sm); color: var(--paper); text-decoration: none; letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }

/* ============================================================== 介绍页：分屏 */
.screens { height: var(--vh); overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scroll-behavior: smooth; }
.screen {
  position: relative; isolation: isolate; height: var(--vh); overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--nav-h) + 8px) 28px;
}
.screen:nth-child(even) { background: var(--ink-2); }
.eyebrow { margin: 0 0 12px; font-size: var(--fs-xs); letter-spacing: .26em; color: var(--candle); }
.sec-title { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.32; letter-spacing: .04em; }
.sec-sub { margin: 12px 0 0; max-width: 38em; color: var(--paper-dim); }
.sec-sub b { color: var(--moon); font-weight: 400; }

/* ---- 1 首屏：一个人对天上 8 个 AI ---- */
.hero { justify-content: flex-end; padding-bottom: clamp(40px, 9vh, 96px); background: #14181a; }
/* hero-bg 是尺寸容器 ⇒ 舞台用 cqw／cqh 自己算 cover：比屏幕宽就裁上下，比屏幕高就裁左右 */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }
.stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
         width: max(100cqw, 150cqh); height: max(100cqh, 66.667cqw); container-type: inline-size; }
.stage picture, .stage img { display: block; width: 100%; height: 100%; }
.stage img { object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 9, 10, .78) 0%, rgba(6, 9, 10, .5) 28%, rgba(6, 9, 10, 0) 52%),
    linear-gradient(180deg, rgba(6, 9, 10, .5) 0%, transparent 18%, transparent 80%, rgba(6, 9, 10, .7) 100%);
}
.foes { position: absolute; inset: 0; z-index: 1; }
.foe { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%); }
.foe .seal {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fffdf7 0%, var(--seal) 58%, #e3cfa4 100%);
  box-shadow: 0 0 0 1px rgba(242, 194, 116, .75), 0 0 calc(var(--d) * .45) rgba(255, 228, 168, .85), 0 0 calc(var(--d) * 1.3) rgba(242, 194, 116, .38);
  animation: breathe 5.5s ease-in-out infinite alternate; animation-delay: var(--delay, 0s);
}
.foe img { width: 60%; height: 60%; object-fit: contain; }
.foe .label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(var(--d) * .2);
  font-family: var(--latin); font-size: clamp(10px, .95cqw, 14px); letter-spacing: .14em; white-space: nowrap;
  color: #efe6d2; text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
@keyframes breathe {
  from { box-shadow: 0 0 0 1px rgba(242, 194, 116, .75), 0 0 calc(var(--d) * .35) rgba(255, 228, 168, .7), 0 0 calc(var(--d) * 1.1) rgba(242, 194, 116, .3); }
  to   { box-shadow: 0 0 0 1px rgba(242, 194, 116, .9), 0 0 calc(var(--d) * .6) rgba(255, 228, 168, .95), 0 0 calc(var(--d) * 1.6) rgba(242, 194, 116, .45); }
}
.hero-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: var(--fs-xs); letter-spacing: .24em; color: var(--paper-dim); }
.hero-kicker::before { content: ""; width: 34px; height: 1px; background: var(--candle); opacity: .8; }
.hero-title { font-family: var(--display); font-size: var(--fs-hero); line-height: 1.2; letter-spacing: .04em; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
.hero-sub { max-width: 30em; margin: 18px 0 0; font-size: 17px; line-height: 1.85; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

/* ---- 2 比线下局省事 ---- */
.edge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin-top: clamp(28px, 6vh, 56px); }
.edge-item { min-width: 0; padding-top: 16px; border-top: 1px solid rgba(184, 148, 92, .45); }
.edge-item h3 { font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .06em; }
.edge-item p { margin: 10px 0 0; font-size: clamp(13.5px, 1.1vw, 15.5px); line-height: 1.9; color: var(--paper-dim); }

/* ---- 3 怎么玩：电脑上文字＋海报并排，手机上海报铺满这一屏 ---- */
.what-bg { display: none; }
.what-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.what-body p { margin: 14px 0 0; max-width: 34em; color: var(--paper-dim); font-size: var(--fs-sm); line-height: 1.9; }
.poster { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--slate); }
.poster img { width: 100%; max-height: calc(var(--vh) - var(--nav-h) - 80px); object-fit: cover; }

/* ---- 4 牌桌上的嘴：左右翻 ---- */
.mouth-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.rail-arrows { display: flex; gap: 8px; flex: none; }
.arrow { min-width: 44px; padding: 0; font-family: var(--latin); }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.mcard {
  flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s, background .2s;
}
.bubble { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.face { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2);
        background-color: var(--slate); background-repeat: no-repeat; background-size: 250% auto; background-position: 50% 5%; }
.bubble-who { font-size: var(--fs-xs); color: var(--fog); letter-spacing: .06em; }
.bubble-who b { color: var(--paper-dim); font-weight: 600; margin-right: 6px; }
.bubble-text { margin: 6px 0 0; padding: 11px 13px; background: var(--glass); border: 1px solid var(--line);
               border-radius: 4px 12px 12px 12px; font-family: var(--serif); font-size: 15px; line-height: 1.8; }
.mflip { align-self: flex-start; margin-top: auto; }
.mreveal { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 10px 12px; border-radius: 0 6px 6px 0; border-left: 2px solid var(--fog-deep); background: rgba(255, 255, 255, .03); }
.mreveal-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--fog); letter-spacing: .06em; }
.kchip { padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; color: var(--paper); letter-spacing: .1em; }
.mreveal p { margin: 0; font-size: var(--fs-sm); line-height: 1.75; color: var(--paper-dim); }
.mreveal b { font-weight: 600; }
.mcard.is-wolf { border-color: rgba(154, 96, 85, .55); }
.mcard.is-wolf .mreveal { border-left-color: var(--wolf); background: rgba(154, 96, 85, .1); }
.mcard.is-wolf .mreveal b { color: var(--wolf-hi); }
.mcard.is-good { border-color: rgba(138, 168, 146, .45); }
.mcard.is-good .mreveal { border-left-color: var(--ok); background: rgba(138, 168, 146, .08); }
.mcard.is-human { border-color: rgba(242, 194, 116, .7); background: rgba(242, 194, 116, .05); }
.mcard.is-human .kchip { border-color: var(--moon); color: var(--moon); }

/* ---- 5 三张桌 ---- */
.tcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(22px, 4vh, 40px); }
.tcard { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); overflow: hidden;
         border: 1px solid var(--line); background: var(--slate); text-decoration: none; transition: border-color .15s; }
.tcard:hover { border-color: rgba(184, 148, 92, .6); }
.tcard img { width: 100%; aspect-ratio: 16 / 10; height: auto; max-height: 34vh; object-fit: cover; }
.tcard-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.tcard-name { font-family: var(--display); font-size: 20px; letter-spacing: .06em; }
.tcard-kind { display: block; font-size: var(--fs-xs); color: var(--fog); letter-spacing: .1em; }
.tables-cta { margin-top: clamp(20px, 4vh, 36px); }

/* ---- 6 多人模式 ---- */
.multi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.multi-cta { margin-top: 24px; }
.table { position: relative; width: min(100%, 400px, 52vh); aspect-ratio: 1; margin-inline: auto; }
.table-top { position: absolute; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(184, 148, 92, .22), rgba(26, 32, 34, .9) 70%);
  border: 1px solid rgba(184, 148, 92, .35); box-shadow: 0 0 60px rgba(184, 148, 92, .15) inset; }
.tseat { position: absolute; left: var(--x); top: var(--y); width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%);
         display: grid; place-items: center; border-radius: 50%; }
.tseat.is-ai { background: var(--seal); box-shadow: 0 0 0 1px rgba(242, 194, 116, .5), 0 0 18px rgba(242, 194, 116, .25); }
.tseat.is-ai img { width: 60%; height: 60%; object-fit: contain; }
.tseat.is-human { width: 18%; border: 1px dashed var(--moon); background: radial-gradient(circle, rgba(242, 194, 116, .25), rgba(9, 11, 12, .9) 70%);
                  font-family: var(--display); font-size: clamp(13px, 2vw, 20px); color: var(--moon); }

/* ---- 7 常见问题（一次只开一条，免得把这一屏撑破） ---- */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
                    padding: 14px 0; cursor: pointer; font-family: var(--display); font-size: 17px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--sans); color: var(--fog); font-size: 20px; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 14px; max-width: 34em; color: var(--paper-dim); font-size: var(--fs-sm); line-height: 1.85; }

/* ---- 8 页底 ---- */
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 60% at 85% 20%, rgba(242, 194, 116, .10), transparent 70%), radial-gradient(70% 50% at 20% 100%, rgba(127, 143, 136, .14), transparent 70%); }
.foot-title { font-family: var(--display); font-size: clamp(32px, 5vw, 56px); letter-spacing: .05em; }
.foot-sub { margin: 14px 0 0; color: var(--paper-dim); max-width: 34em; }
.foot-legal { margin: clamp(40px, 10vh, 90px) 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--fog-deep); letter-spacing: .08em; }

/* ---- 右边的上下翻屏 ---- */
.pager { position: fixed; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 50;
         display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pager-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(9, 11, 12, .6);
             color: var(--paper); font-family: var(--latin); font-size: 16px; display: grid; place-items: center; }
.pager-btn:hover { border-color: var(--candle); color: var(--candle-hi); }
.pager-btn:disabled { opacity: .3; cursor: default; }
.pager-dots { display: flex; flex-direction: column; gap: 8px; }
.pager-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--fog); background: transparent; }
.pager-dot.is-on { background: var(--moon); border-color: var(--moon); }

/* ============================================================== 游戏大厅 */
.hall { min-height: var(--vh); padding-block: calc(var(--nav-h) + 24px) 48px; }
.hall-head { margin-bottom: 26px; }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
       padding: 12px 18px 14px; background: none; border: 0; text-align: left; color: var(--fog); }
.tab::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: transparent; }
.tab[aria-selected="true"] { color: var(--paper); }
.tab[aria-selected="true"]::after { background: var(--candle); }
.tab-name { font-family: var(--display); font-size: clamp(18px, 2.2vw, 24px); letter-spacing: .06em; line-height: 1.3; }
.tab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); letter-spacing: .08em; }
.panel { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); padding-top: 26px; align-items: start; }
.panel-media { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); }
.panel-media > img, .panel-media > video { width: 100%; height: 100%; object-fit: cover; }
.panel-media > video { object-fit: contain; }
/* 雾隐村播放器正中的大播放键（原生控件那颗太小）：一播放就藏，播完再出来 */
.play-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%;
            border: 1px solid rgba(242, 194, 116, .7); background: rgba(9, 11, 12, .55); display: grid; place-items: center; }
.play-big::before { content: ""; border-left: 22px solid var(--moon); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.play-big:hover { background: rgba(9, 11, 12, .75); border-color: var(--moon); }
.play-big span { position: absolute; top: 100%; margin-top: 10px; white-space: nowrap; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--paper); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.ribbon { position: absolute; top: 14px; right: 14px; padding: 4px 12px; border-radius: 4px; background: rgba(9, 11, 12, .78);
          border: 1px solid var(--line-2); font-family: var(--latin); font-size: 13px; letter-spacing: .14em; }
.vtitle { position: absolute; left: 6%; top: 10%; writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(32px, 4.6vw, 58px);
          letter-spacing: .3em; color: #e9dfcb; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.vtitle small { display: block; margin-top: .6em; font-size: .3em; letter-spacing: .4em; color: var(--paper-dim); }
.crowd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; padding: 0 4%; }
.crowd img { width: 15%; height: auto; margin-inline: -1.2%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.panel-body { min-width: 0; }
.panel-kind { margin: 0 0 4px; font-size: var(--fs-xs); letter-spacing: .2em; color: var(--candle); }
.panel-name { font-family: var(--display); font-size: clamp(28px, 3.2vw, 38px); letter-spacing: .08em; line-height: 1.3; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tags li { padding: 2px 10px; border-radius: 4px; background: rgba(255, 255, 255, .05); font-size: var(--fs-xs); color: var(--paper-dim); }
.panel-blurb { margin: 16px 0 0; color: var(--paper-dim); }
.panel-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--fog); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hall-multi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px;
              padding: 14px 18px; border: 1px dashed rgba(242, 194, 116, .35); border-radius: var(--r); }
.hall-multi p { margin: 0; font-size: var(--fs-sm); color: var(--paper-dim); }
.hall-multi b { color: var(--moon); font-weight: 400; letter-spacing: .06em; }

/* ============================================================== 弹窗：输码／排队 */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 6, .78); }
.modal-card { position: relative; width: min(460px, 100%); max-height: calc(var(--vh) - 32px); overflow-y: auto;
              padding: 26px 22px 18px; background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--r);
              box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: none; color: var(--fog); font-size: 22px; line-height: 1; }
.modal-x:hover { color: var(--paper); }
.modal-title { font-family: var(--display); font-size: 22px; letter-spacing: .06em; margin: 0 0 16px; }
.gate-why { margin: 0 0 14px; padding: 9px 12px; background: rgba(0, 0, 0, .3); border-left: 2px solid #8c6f43; border-radius: 0 6px 6px 0;
            font-size: var(--fs-sm); line-height: 1.7; color: var(--paper-dim); }
.gate-label { display: block; margin: 0 0 8px; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--fog); }
.gate-row { display: flex; gap: 8px; }
.gate-input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; background: rgba(0, 0, 0, .42);
              border: 1px solid var(--line); border-radius: 6px; color: var(--paper); font-size: 16px; }
.gate-input:focus { outline: none; border-color: rgba(184, 148, 92, .5); }
.gate-input.is-code { font-family: var(--mono); font-size: 18px; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.gate-input::placeholder { color: var(--fog-deep); }
.gate-row .btn { flex: none; min-height: 48px; }
/* 〔R2-14〕输码框两格竖排（码／手机号），按钮整宽在下面（原型 docs/prototypes/ww-data-tracking/） */
#code-form .gate-input { width: 100%; }
#code-form .gate-label + .gate-input { margin-bottom: 16px; }
.gate-input.is-phone { font-family: var(--mono); font-size: 18px; letter-spacing: .08em; }
.gate-input.is-phone::placeholder, .gate-input.is-code::placeholder { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; }
.gate-note { margin: -8px 0 0; font-size: 14px; line-height: 1.65; color: var(--paper-dim); }
.btn-wide { width: 100%; min-height: 48px; margin-top: 18px; }
.chan-q { margin-top: 16px; }
.chans { display: flex; flex-wrap: wrap; gap: 6px; }
.chan { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; font-size: 13px; color: var(--paper-dim); }
.chan[aria-checked="true"] { border-color: var(--candle); color: var(--candle-hi); background: rgba(184, 148, 92, .12); }
.chan-other { margin-top: 8px; width: 100%; height: 40px; font-size: 14px; }
.gate-say { min-height: 26px; margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.6; }
.gate-say.is-bad { color: var(--wolf-hi); }
.gate-say.is-wait { color: #c9a771; }
.gate-say.is-ok { color: var(--ok); }
.gate-say b { color: var(--paper); font-weight: 600; }
.gate-foot { margin: 4px 0 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--fog-deep); }

/* ============================================================== 窄屏 */
@media (max-width: 860px) {
  .edge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel, .multi-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .mcard { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) {
  :root { --nav-h: calc(56px + env(safe-area-inset-top, 0px)); --fs-body: 14.5px; }
  .nav-link { display: none; }
  .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
  .btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; }

  /* 首屏：竖版图贴底（天将和崖上那个人在下半屏），字压在上面那片暗云里 */
  .hero { justify-content: flex-start; padding-bottom: 0; background: #26343b; }  /* ＝竖版图最上沿的平均色（量的） */
  .stage { left: 0; top: auto; bottom: 0; transform: none; width: 100%; height: auto; aspect-ratio: 2 / 3; }
  .stage img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
  .hero-bg::after { background: linear-gradient(180deg, rgba(6, 9, 10, .55) 0%, rgba(6, 9, 10, .25) 40%, transparent 55%); }
  .foe .label { display: none; }
  .hero-sub { font-size: 15px; margin-top: 12px; }
  .hero-actions { margin-top: 18px; gap: 8px; }
  .hero-actions .btn { flex: 1 1 0; }

  .edge-grid { gap: 16px 18px; }
  .edge-item { padding-top: 12px; }
  .edge-item h3 { font-size: 18px; }
  .edge-item p { font-size: 13px; line-height: 1.7; }

  .what-bg { display: block; position: absolute; inset: 0; z-index: -1; }
  .what-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
  .what-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 11, 12, .96) 0%, rgba(9, 11, 12, .88) 42%, rgba(9, 11, 12, .2) 70%, transparent 100%); }
  .s-what { justify-content: flex-start; }
  .what-grid { grid-template-columns: minmax(0, 1fr); }
  .poster { display: none; }
  .what-body p { font-size: 13px; line-height: 1.75; margin-top: 8px; }

  .mouth-head { margin-bottom: 14px; }
  .rail-arrows { display: none; }
  .mcard { flex-basis: 86%; padding: 16px; }

  .tcards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tcard { flex-direction: row; align-items: stretch; }
  .tcard img { width: 38%; aspect-ratio: auto; max-height: none; }
  .tcard-body { flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
  .tcard-name { font-size: 18px; }

  .table { width: min(62vw, 34vh); }
  .multi-grid { gap: 18px; }
  .multi-cta { margin-top: 16px; }

  .faq-item summary { padding: 11px 0; font-size: 15.5px; }

  .pager { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: none; right: 10px; gap: 6px; }
  .pager-dots { display: none; }
  .pager-btn { width: 36px; height: 36px; }

  .tabs { grid-template-columns: minmax(0, 1fr); border-bottom: 0; gap: 4px; }
  .tab { flex-direction: row; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
  .tab::after { display: none; }
  .tab[aria-selected="true"] { border-color: var(--candle); background: rgba(184, 148, 92, .08); }
  .gate-row { flex-direction: column; }

  /* 手机上能读的字一律 ≥14px（用户 10-04 真机：「最小的一号字体看着稍微有点费劲。老年人不友好」；R2-4 收尾定的口径，局内同改）。
     ⭐两个字号变量一抬，眉题／小标签／说明一起上来；下面几条是写死了小字号的。 */
  :root { --fs-xs: 14px; --fs-sm: 14px; }
  .btn-sm, .chip, .kchip, .chan, .ribbon, .edge-item p, .what-body p, .tseat.is-human { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .screens, .rail { scroll-behavior: auto; }
  .foe .seal { animation: none; }
  * { transition: none !important; }
}

/* ============================================================== 加到主屏幕（iOS，状态栏 black-translucent）
   页面画到屏幕顶时 WebKit 的布局视口忽高忽低（屏高 932 时 innerHeight 有时 873、有时 932；R2-4 10-04 真机）
   ⇒ 同对局页（theme.css 第 14 节）：整页按屏幕高 --app-h 排，钉在视口上的层一律从顶往下量（⛔bottom：贴的是那个会抖的视口底）。
   <html>.ios-standalone 与 --app-h 由 standalone.js 挂；状态栏不透明（页面从状态栏下面画）时不挂 ⇒ 下面一条都不生效、和 Safari 一样。
   顶栏让开状态栏不在这里：--nav-h 自己带着 env(safe-area-inset-top)。test_web_home H9 钉着。 */
html.ios-standalone { --vh: var(--app-h); }
html.ios-standalone:has(#intro:not([hidden])) { height: var(--app-h); overflow: hidden; }   /* 介绍页在 .screens 里翻，整页⛔再能拖 */
html.ios-standalone .modal { bottom: auto; height: var(--app-h); }
@media (max-width: 600px) {
  html.ios-standalone .pager { bottom: auto; top: calc(var(--app-h) - 14px - env(safe-area-inset-bottom, 0px)); transform: translateY(-100%); }
}