.topbar { display:flex; align-items:center; gap:16px; padding:16px 24px; position:sticky; top:0; background:rgba(255,253,248,0.9); backdrop-filter:blur(8px); z-index:10; }
.topbar .logo { flex:none; }
.search-box { flex:1; max-width:420px; display:flex; align-items:center; gap:8px; background:#fff; border-radius:var(--r-pill); padding:8px 14px; box-shadow:var(--shadow-card); color:var(--ink-soft); }
.search-box input { border:none; outline:none; flex:1; font-size:14px; background:transparent; color:var(--ink); }

.container { max-width:1100px; margin:0 auto; padding:0 24px 60px; }
.cat-bar { display:flex; gap:10px; flex-wrap:wrap; padding:18px 0; }

.section-title { font-size:20px; font-weight:800; margin:24px 0 14px; display:flex; align-items:center; gap:8px; }
/* HTML hidden 属性需显式覆盖自定义 display，否则被 display:flex/grid 抵消 */
[hidden] { display: none !important; }

/* bento 混排网格 */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:18px; grid-auto-flow:dense; }
.card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 12px; cursor:pointer; text-decoration:none; color:var(--ink); position:relative; }
.card.big { grid-column:span 2; grid-row:span 2; }
.card svg { width:100%; height:auto; max-width:120px; }
.card .title { font-weight:700; font-size:14px; }
.card .fav { position:absolute; top:10px; right:10px; color:var(--coral); opacity:0; }
.card:hover .fav { opacity:1; }

/* 法律声明：顶部横幅 */
.legal-banner {
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-align:center; font-size:12.5px; font-weight:600; line-height:1.5;
  padding:8px 16px; color:#7a5a10;
  background:linear-gradient(145deg, var(--yellow-lt), var(--yellow));
  box-shadow:0 2px 8px rgba(212,144,0,0.18);
}
.legal-banner a { color:#5a4a10; text-decoration:underline; }

/* 法律声明：页脚 */
.site-footer {
  margin-top:40px; padding:28px 24px; text-align:center;
  color:var(--ink-soft); font-size:12.5px; line-height:1.7;
  border-top:1px solid var(--cream-2);
}
.site-footer a { color:var(--coral); text-decoration:none; font-weight:600; }
.site-footer a:hover { text-decoration:underline; }
.site-footer .footer-nav { margin-bottom:8px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* 法律声明页正文 */
.legal-doc { line-height:1.9; }
.legal-doc h2 { font-size:18px; color:var(--coral); margin:28px 0 10px; }
.legal-doc p, .legal-doc li { color:var(--ink); }
.legal-doc .clay { padding:18px 22px; margin:14px 0; }
.legal-doc .contact { font-family:ui-monospace,monospace; background:var(--cream-2); padding:2px 8px; border-radius:6px; }

/* ───────── 移动端响应式 ───────── */
@media (max-width: 640px) {
  .topbar { gap:10px; padding:12px 14px; flex-wrap:wrap; }
  .search-box { max-width:none; }
  .container { padding:0 14px 48px; }
  .legal-banner { font-size:11px; padding:7px 12px; }
  .cat-bar { gap:8px; padding:14px 0; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .cat-bar .pill { flex:none; }
  /* 网格更密，大卡片在手机上不再占双倍（避免太占屏） */
  .grid { grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:12px; }
  .card.big { grid-column:span 2; grid-row:span 1; }
  .card { padding:12px 8px; }
  .card svg { max-width:88px; }
  .card .title { font-size:13px; }
  .section-title { font-size:17px; }
  /* 游玩页：手机上 iframe 占满可用高度 */
  .game-bar { padding:10px 14px; gap:10px; }
  .stage { padding:0 10px; }
  .stage iframe { height:78vh; border-radius:16px; }
}