/* ============================================================
   游戏厅专属
   ------------------------------------------------------------
   这里原来是一整套"街机厅"布景：CRT 扫描线 + 玻璃反光 +
   背景闪烁的绿色光点 + 卡片底部那条"投币口"亮线 + hover 的绿色投影。
   2026-10-15 整段删掉，两条理由：
     1) 全站口径是"迷因的数字档案馆"，不是游戏站（项目铁律）。
        扫描线与玻璃反光是游戏站的视觉语言，跟档案馆冲突。
     2) 那五层效果全都打在缩略图上，把图压得看不清 ——
        而这一页最需要的事情恰恰是"看清每款游戏长什么样"。
   保留的是能承载信息的东西：图、名字、作者、可玩标记。
   ============================================================ */

/* ---------- 卡片 ---------- */
/* 方图卡比画廊略窄时更容易扫读；176px 让 980/981 都稳定在 4 列，
   避免原来的「980 五列 → 981 三列」反跳。 */
.game-grid{ --col:176px; }
.gcard{ padding:0; }
.gcard-hit{
  display:flex; flex-direction:column; width:100%; height:100%;
  padding:0; border:0; background:none; text-align:left; color:inherit;
  font:inherit; cursor:pointer;
}
/* 截图衬纸白（docs/23 §3.1）。暗底站的 #0A0908 在奶黄页面上是黑洞。 */
.gshot{
  position:relative; display:block; aspect-ratio:1/1; overflow:hidden;
  background:var(--paper);
}
.gshot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.gcard:hover .gshot img{ transform:scale(1.045); }
/* 「站内可玩」用绿色：绿在这个站里只服务"眼睛 / 活力 / 可玩"这一层语义，
   这里是它的正当用处。"外链"没有这层语义，退回中性。 */
.gbadge{
  position:absolute; top:8px; left:8px; z-index:3;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  padding:.3em .55em; border-radius:var(--r-pill);
  background:var(--ink); border:2px solid var(--cream);
  color:var(--green);
}
.gbadge.ext{ color:rgba(255,246,224,.72); }
/* .gbadge.live / .gbadge.right 已删：构建器只产出 .gbadge 与 .gbadge.ext。 */
.gmeta{ display:block; padding:.9rem 1rem .1rem; }
.gname{ display:block; font-size:var(--fs-sm); font-weight:700; letter-spacing:0; line-height:1.4; }
.gauthor{
  display:block; margin-top:.34em; font-size:var(--fs-xs); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gauthor b{ color:var(--text-2); font-weight:500; }
.gplay{
  display:flex; align-items:center; gap:.35em; padding:.7rem 1rem .95rem;
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2);
}
.gplay svg{ width:11px; height:11px; }
.gcard:hover .gplay{ color:var(--ink); }

/* ---------- 站内游玩层 ---------- */
.play{
  position:fixed; inset:0; z-index:950; display:flex; flex-direction:column;
  background:rgba(26,23,18,.97);
  color:var(--cream);
  animation:playIn .26s var(--ease);
}
@keyframes playIn{ from{ opacity:0; } to{ opacity:1; } }
.play[hidden]{ display:none; }
.play-bar{ display:flex; align-items:center; gap:.9rem; padding:.8rem clamp(12px,3vw,26px); border-bottom:var(--bw-cream); flex-wrap:wrap; }
.play-id{ display:flex; align-items:baseline; gap:.7em; margin-inline:auto; }
.play-id b{ font-size:var(--fs-lg); letter-spacing:0; color:var(--cream); }
.play-id span{ font-family:var(--mono); font-size:var(--fs-xs); color:rgba(255,246,224,.6); }
.play-stage{ position:relative; flex:1 1 auto; min-height:0; background:#000; }
.play-stage iframe{ width:100%; height:100%; border:0; display:block; }
.play-load{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; color:rgba(255,246,224,.6); font-family:var(--mono); font-size:var(--fs-xs);
}
.play-load i{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgba(255,246,224,.16); border-top-color:var(--yellow);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.play-slow{ text-align:center; max-width:26em; }
.play-slow .face{ font-size:var(--fs-2xl); margin-bottom:.4em; }
.play-slow p{ margin:0 0 1.3em; line-height:1.9; letter-spacing:0; font-family:var(--sans); font-size:var(--fs-sm); color:var(--cream); }
.play-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem clamp(12px,3vw,26px); border-top:var(--bw-cream);
  font-size:var(--fs-xs); color:rgba(255,246,224,.6); line-height:1.7;
}
.play-foot b{ color:var(--cream); }
.play-foot a{ color:var(--gold); }
.play-foot a:hover{ text-decoration:underline; }

/* 手机两列。44vw 在 320–560 会算出单列（2×44vw + gap > 90vw），
   方图卡被拉到整屏宽；改用等宽轨道，列宽跟着容器走。 */
@media (max-width:560px){
  .game-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
/* 平板密度：561–767 三列，768–980 四列。
   980 与 981 都是四列，不再出现「980 五列 → 981 三列」的反跳。 */
@media (min-width:561px) and (max-width:767px){
  .game-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:768px) and (max-width:980px){
  .game-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}