/* 游戏大厅：紧凑卡片自动换行，复用官网星空背景；小镇封面由现有游戏素材组成。 */
.game-hall { --hall-muted: #bec3d0; }
.game-hall #page-bg::after { background: linear-gradient(180deg, #0a0e2773, #0a0e27bb 48%, #0a0e27eb); }
.hall-shell { position: relative; z-index: 10; display: flex; flex-direction: column; width: min(1280px, calc(100% - 80px)); min-height: 100vh; min-height: 100dvh; margin: 0 auto; }
.hall-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-bottom: 1px solid #ffffff20; }
.hall-brand { display: inline-flex; align-items: center; font: 800 18px var(--font-display); letter-spacing: .04em; }
.brand-spark { color: #62c59c; margin-right: 9px; font-size: 23px; }
.brand-dot { color: #62c59c; }
.hall-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; color: #d9dce5; }
.hall-back:hover { color: #8fdfba; }
.hall-shell main { flex: 1; padding-bottom: 48px; }
.hall-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px; padding: 32px 0 24px; }
.hall-heading h1 { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 600; letter-spacing: .04em; }
.hall-heading p { margin: 0; font-size: 13px; color: var(--hall-muted); }
/* auto-fill 保留空列，只有一个游戏时也保持小卡片宽度。 */
.game-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); align-items: stretch; gap: 24px 20px; padding: 0; margin: 0; list-style: none; }
.game-collection > li { min-width: 0; }
.game-card { display: block; height: 100%; padding: 8px; overflow: hidden; border: 1px solid #ffffff29; border-radius: 18px; background: #142031bb; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .2s, border-color .2s, background .2s; }
.game-card:hover, .game-card:focus-visible { transform: translateY(-3px); border-color: #72cda5b3; background: #192c3ae6; }
/* 封面由容器统一比例，图片的原始尺寸和 HTML 高度属性不会撑高卡片。 */
.game-card-cover { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px; object-fit: cover; }
.game-card-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.game-card-info { padding: 13px 7px 8px; }
.game-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-card-heading h2 { min-width: 0; margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.game-card-arrow { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #2aa4731f; color: #90dbb7; font-size: 16px; }
.game-card-info p { margin: 7px 0 0; color: var(--hall-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.town-art { isolation: isolate; background: radial-gradient(ellipse at 70% 24%, #5a877e55, transparent 50%), linear-gradient(145deg, #142e3b, #244744 60%, #4e7261); }
.town-moon { position: absolute; top: 10%; right: 16%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #f9ebc8; box-shadow: 0 0 30px #f9ebc833, inset -7px -2px 0 #ebd8ae; }
.town-stars { position: absolute; top: 15%; left: 23%; width: 2px; height: 2px; border-radius: 50%; background: #f5e7bd; box-shadow: 30px 13px #f5e7bd80, -24px 30px #f5e7bd80, 70px -5px #f5e7bd, 130px 20px #f5e7bd70, 170px -8px #f5e7bd; }
.town-hill { position: absolute; width: 100%; height: 50%; border-radius: 50% 60% 0 0; }
.hill-back { bottom: 6%; left: -28%; transform: rotate(-16deg); background: #426258; }
.hill-front { bottom: -8%; right: -28%; transform: rotate(14deg); background: #557864; }
.town-ground { position: absolute; left: 7%; bottom: 12%; width: 90%; height: 26%; border-radius: 50%; transform: rotate(-10deg); background: #8d9871; box-shadow: 0 7px 0 #364b3f, 0 15px 25px #0a252d66; }
.town-art img { position: absolute; object-fit: contain; height: auto; filter: drop-shadow(0 6px 3px #122c3733); }
.scene-house { width: 48%; left: 43%; bottom: 14%; z-index: 2; }
.scene-gate { width: 35%; left: 16%; bottom: 22%; z-index: 1; }
.scene-tree { width: 33%; }
.tree-left { left: -4%; bottom: 20%; z-index: 1; }
.tree-right { right: -14%; bottom: 19%; }
.scene-lantern { width: 17%; left: 24%; bottom: 10%; z-index: 2; transform: rotate(-8deg); }
.hall-footer { padding: 22px 0; border-top: 1px solid #ffffff1a; color: #a9b1c1; font-size: 10px; letter-spacing: .1em; }
.hall-shell a:focus-visible, .skip-link:focus-visible { outline: 2px solid #8fdfba; outline-offset: 4px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10000; padding: 12px 20px; color: #fff; background: #176c4a; border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
@media (max-width: 800px) {
  .hall-shell { width: calc(100% - 40px); }
  .game-collection { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px 16px; }
}
@media (max-width: 480px) {
  .hall-shell { width: calc(100% - 32px); }
  .hall-nav { padding: 14px 0; }
  .hall-brand { font-size: 16px; }
  .brand-spark { font-size: 20px; margin-right: 7px; }
  .hall-back { font-size: 12px; gap: 8px; }
  .hall-heading { flex-direction: column; align-items: flex-start; gap: 7px; padding: 25px 0 20px; }
  .hall-heading h1 { font-size: 23px; }
  .hall-heading p { font-size: 12px; }
  .game-card-info { padding: 13px 9px 10px; }
  .game-card-info p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-card { transition: none; }
  .game-card:hover, .game-card:focus-visible { transform: none; }
}