/* ================= 《陈泽的存折》· 游戏大厅板块 =================
   结构：标题与说明 → 右上一个「关卡选择 / 卧室大厅」切换 → 一块等比缩放的舞台（iframe）。
   舞台按游戏设计稿 1920×1080 排版，再整体 transform 缩放到容器宽度。

   与乐乐果园板块保持同一套版式语言：版心 1560、卷首小字用强调色、
   底部分隔线用 --border。 */

.gl-section{
  position:relative;
  padding:clamp(56px,7vh,104px) var(--gutter);
  background:var(--black-main);
  border-bottom:1px solid var(--border);
  z-index:5;
}
.gl-inner{max-width:1560px;margin:0 auto}

/* ---------- 标题区 ---------- */
.gl-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,72px);
  align-items:end;
  margin-bottom:clamp(24px,3.6vh,44px);
}
.gl-kicker{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
}
.gl-name{
  margin:0 0 14px;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(30px,3.2vw,50px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.gl-intro{
  max-width:62ch;
  margin:0 0 14px;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.85;
  color:var(--text-secondary);
}
.gl-intro strong{color:var(--text-primary);font-weight:600}
.gl-role{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--text-secondary);
  letter-spacing:.02em;
}
.gl-role b{color:var(--accent);font-weight:600;margin-right:.5em}

/* ---------- 两个场景按钮 ---------- */
.gl-actions{display:flex;gap:10px;flex-wrap:wrap}
.gl-btn{
  appearance:none;
  padding:11px 20px;
  border:1px solid var(--border);
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.gl-btn:hover{color:var(--text-primary);border-color:rgba(255,255,255,.28)}
.gl-btn[aria-pressed="true"]{
  color:var(--black-absolute);
  background:var(--accent);
  border-color:var(--accent);
}

/* ---------- 舞台 ---------- */
.gl-frame{
  position:relative;
  border:1px solid var(--border);
  border-radius:14px;
  background:#08090d;
  overflow:hidden;
}
.gl-stage{
  position:relative;
  width:100%;
  /* 高度由 JS 按 16:9 算出来写进 style；这里给个兜底，避免 JS 未跑时高度为 0 */
  aspect-ratio:1920/1080;
  overflow:hidden;
}
.gl-stage iframe{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
  border:0;
  transform-origin:0 0;
  display:block;
}

/* 加载态：盖在舞台上，游戏第一帧到了就撤掉 */
.gl-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#08090d;
  color:var(--text-secondary);
  font-size:14px;
  letter-spacing:.06em;
}
.gl-loading[hidden]{display:none}
.gl-loading p{margin:0}
.gl-loading-note{font-size:12px;opacity:.6}
.gl-loading-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  animation:gl-pulse 1.1s ease-in-out infinite;
}
@keyframes gl-pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- 关卡演示播放层 ----------
   盖在舞台上：舞台是 16:9，视频也是 16:9（1280×720），画面正好铺满，不会多出信箱边。
   标题与关闭键浮在画面上，配一层从上往下的渐变压暗 —— 亮画面里白字会糊掉。
   注意 head 是 pointer-events:none：那一条横带不许挡住视频的点击与原生控制条。 */
.gl-player{
  position:absolute;
  inset:0;
  z-index:3;
  background:#000;
  animation:gl-player-in .26s var(--ease-out);
}
.gl-player[hidden]{display:none}
@keyframes gl-player-in{from{opacity:0}to{opacity:1}}

.gl-player-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;   /* 视频比例与舞台一致时无感；万一将来换了别的比例也不裁切 */
  background:#000;
}

.gl-player-head{
  position:absolute;
  left:0;right:0;top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(10px,1.2vw,20px) clamp(12px,1.4vw,24px);
  background:linear-gradient(to bottom,rgba(4,5,8,.82),rgba(4,5,8,.42) 55%,rgba(4,5,8,0));
  pointer-events:none;
}
.gl-player-title{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:0;
  min-width:0;
}
.gl-player-num{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.22em;
  color:var(--accent);
}
.gl-player-title b{
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(15px,1.35vw,21px);
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.gl-player-close{
  pointer-events:auto;
  appearance:none;
  flex:none;
  padding:9px 18px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;                 /* 与板块里其它按钮同一套圆角语言 */
  background:rgba(8,9,13,.62);
  backdrop-filter:blur(6px);
  color:#fff;
  font-family:var(--font-ui);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  cursor:pointer;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out);
}
.gl-player-close:hover{background:rgba(8,9,13,.86);border-color:rgba(255,255,255,.56)}
.gl-player-close:active{transform:translateY(1px)}
.gl-player-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 加载中 / 放不出来 的说明：居中一行，别让人对着黑框猜 */
.gl-player-state{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:min(560px,80%);
  margin:0;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(4,5,8,.72);
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.7;
  text-align:center;
}
.gl-player-state[hidden]{display:none}

.gl-hint{
  margin:0;
  padding:12px clamp(14px,1.4vw,22px);
  border-top:1px solid var(--border);
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-secondary);
  background:rgba(255,255,255,.02);
}
.gl-hint b{color:var(--accent);font-weight:600;margin-right:.5em;letter-spacing:.08em}

/* 提示条两句话，按当前模式显示其中一句（data-mode 由 game-lobby.js 写在 .gl-frame 上） */
.gl-hint-player{display:none}
.gl-frame[data-mode="player"] .gl-hint-lobby{display:none}
.gl-frame[data-mode="player"] .gl-hint-player{display:inline}

/* ---------- 提示与脚注 ---------- */
.gl-notice{
  margin:16px 0 0;
  padding:13px 18px;
  border:1px solid rgba(217,223,114,.30);
  border-radius:10px;
  background:rgba(217,223,114,.06);
  color:var(--text-primary);
  font-size:13.5px;
  line-height:1.7;
}
.gl-notice[hidden]{display:none}

.gl-footnote{
  margin:16px 0 0;
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-secondary);
  opacity:.8;
}

/* ---------- 窄屏：说明文字在上，按钮换行，舞台保持等比 ---------- */
@media (max-width:820px){
  .gl-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}
  .gl-actions{order:2}
  .gl-hint{font-size:11.5px}
  /* 播放层：标题与关闭键在一行里挤，缩一缩；状态说明别顶到边缘 */
  .gl-player-head{padding:10px 12px;gap:10px}
  .gl-player-title{gap:7px}
  .gl-player-title b{font-size:14px}
  .gl-player-close{padding:7px 14px;font-size:11.5px}
  .gl-player-state{font-size:12px;max-width:86%}
}

/* 减少动态效果：关掉加载小圆点的呼吸 */
@media (prefers-reduced-motion:reduce){
  .gl-loading-dot{animation:none;opacity:.7}
  .gl-player{animation:none}
}