body.hub { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; height: auto; min-height: 100%; user-select: auto; }
.hub-main { width: min(1240px, 100%); margin: 0 auto; padding: calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) 0; }
.hub-head { display: flex; flex-direction: column; gap: 12px; margin: clamp(10px, 4vw, 40px) 0 clamp(18px, 3vw, 30px); }
.lineup { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card-g { position: relative; display: flex; flex-direction: column; background: var(--paper); color: var(--paperInk); border: 3px solid var(--paperInk); text-decoration: none; transition: transform .15s cubic-bezier(.2,0,0,1), box-shadow .15s; }
.card-g:hover, .card-g:focus-visible { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--accent); outline: none; }
.card-g.head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 1.25fr) 1fr; }
.card-g canvas { width: 100%; aspect-ratio: 16 / 9; display: block; background: var(--bg); }
.card-g.head canvas { height: 100%; min-height: 240px; aspect-ratio: auto; }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.card-body .gen { font: 700 11px var(--mono); letter-spacing: .18em; color: var(--accent); }
.card-body h2 { margin: 0; font: italic 900 clamp(22px, 2.4vw, 30px)/1 var(--font); font-stretch: 85%; letter-spacing: -.01em; }
.card-g.head h2 { font-size: clamp(40px, 6vw, 78px); }
.card-body p { margin: 0; font-size: 14px; line-height: 1.4; opacity: .9; }
.card-body .meta { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font: 600 11px var(--mono); letter-spacing: .08em; color: var(--muted); padding-top: 8px; }
.card-body .play { color: var(--paperInk); font-weight: 700; }
.card-g.soon { opacity: .6; pointer-events: none; }
.hub #foot { width: min(1240px, 100%); margin: 30px auto 0; padding: 0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom, 0px)); }
.hub .k-back { display: none; }
@media (max-width: 760px) { .card-g.head { grid-template-columns: 1fr; } .card-g.head canvas { min-height: 0; aspect-ratio: 16 / 9; } }