/* ============ 桌游馆大厅 ============ */
body.hub { background: #1b130c; color: #f4ead2; min-height: 100%; }
.hub-bg { position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(20,13,8,.72), rgba(20,13,8,.92)), url(/img/hub-bg.webp?v=6) center / cover; }
.hub-top { display: flex; align-items: baseline; gap: 12px; padding: 18px clamp(16px, 4vw, 48px); }
.hub-logo { font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .2em; color: var(--gold-soft); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.hub-sub { font-size: 13px; opacity: .7; }
.hub-main { width: min(1240px, 100%); margin: 0 auto; padding: 0 clamp(14px, 4vw, 48px) 48px; }
.hub-hero { padding: 20px 0 26px; max-width: 720px; }
.hub-hero h1 { font-family: var(--serif); font-size: clamp(30px, 5vw, 52px); margin: 0 0 10px; letter-spacing: .08em;
  background: linear-gradient(180deg, #fff6d6, #f0c24b 60%, #b98413); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-hero p { margin: 0; line-height: 1.8; opacity: .85; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.hub-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: linear-gradient(var(--paper), var(--paper-dark)); color: var(--ink);
  box-shadow: 0 0 0 4px var(--wood), 0 0 0 5px var(--wood-dark), 0 16px 32px rgba(0,0,0,.45); transition: transform .2s cubic-bezier(.2,.8,.3,1.2), box-shadow .2s; }
.hub-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 4px #7a4f2e, 0 0 0 5px var(--wood-dark), 0 24px 40px rgba(0,0,0,.55); }
.hub-cover { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #2e1c10; }
.hub-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hub-card:hover .hub-cover img { transform: scale(1.05); }
.hub-tag { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: rgba(20,13,8,.78); color: var(--gold-soft); }
.hub-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hub-body h3 { margin: 0; font-family: var(--serif); font-size: 21px; letter-spacing: .06em; }
.hub-body h3 a { color: inherit; text-decoration: none; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-meta span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #efe3c6; color: #6b5a44; font-weight: 700; }
.hub-body p { margin: 0; font-size: 14px; line-height: 1.7; color: #4d3f2e; flex: 1; }
.hub-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hub-act .btn { text-decoration: none; }
.hub-resume { font-size: 13px; color: #8a5a06; }
.hub-faq { margin-top: 36px; padding: 20px 22px; border-radius: 16px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(240,194,75,.2); }
.hub-faq h2 { margin: 0 0 10px; font-family: var(--serif); letter-spacing: .1em; color: var(--gold-soft); }
.hub-faq ol { margin: 0; padding-left: 1.3em; line-height: 1.9; }
.hub-note { font-size: 12px; opacity: .6; margin: 12px 0 0; }
@media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } .hub-top { flex-direction: column; gap: 2px; } }