/* The games hub. Felt and type from style.css, room bar from battleship.css. */

.hub { max-width: 1060px; }
.hub-top h1 { font-size: clamp(28px, 5vw, 40px); margin: 6px 0 6px; }
.hub-top p { margin: 0 0 14px; max-width: 62ch; line-height: 1.5; }
.hub-room { font-size: 14px; margin: -2px 0 14px; min-height: 0; }
.hub-room:empty { display: none; }

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hub-card {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); color: var(--ink); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.hub-card:hover { transform: translateY(-2px); border-color: var(--posterior); background: rgba(255, 255, 255, .07); }
.hub-card:focus-visible { outline: 2px solid var(--posterior); outline-offset: 2px; }
.hub-card svg { width: 116px; height: auto; border-radius: 10px; background: #12303b; }
.hub-card.felt svg { background: #1f4d3c; }
.hub-card h2 { font-size: 19px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.hub-card p { margin: 0 0 8px; font-size: 14px; color: var(--ink-dim); line-height: 1.45; }
.tag { font-size: 12px; color: var(--gold); font-weight: 600; }
.pill { font-size: 10px; }
@media (max-width: 420px) { .hub-card { grid-template-columns: 84px minmax(0, 1fr); } .hub-card svg { width: 84px; } }

/* card art, scoped so it cannot touch the poker cards in style.css */
.hub-card svg .w1 { fill: #1d3442; } .hub-card svg .w2 { fill: #285a7a; } .hub-card svg .w3 { fill: #3f84b8; } .hub-card svg .w4 { fill: #d98a3f; }
.hub-card svg .hit { fill: #e0674c; } .hub-card svg .miss { fill: #4a554f; }
.hub-card svg .frame { fill: #2a5c7a; } .hub-card svg .holes circle { fill: #12303b; }
.hub-card svg .red { fill: #e34948; } .hub-card svg .yel { fill: #f3c969; } .hub-card svg .ring { fill: #8fb6dd; stroke: #fff; stroke-width: 1.5; }
.hub-card svg .c1, .hub-card svg .c2, .hub-card svg .c3 { fill: none; stroke-width: 2.5; } .hub-card svg .c1 { stroke: #285a7a; } .hub-card svg .c2 { stroke: #3f84b8; } .hub-card svg .c3 { stroke: #d98a3f; }
.hub-card svg .axis { stroke: #4a554f; stroke-width: 1.5; }
.hub-card svg .ping { fill: none; stroke: #8fb6dd; stroke-width: 2; stroke-dasharray: 5 4; } .hub-card svg .dot { fill: #8fb6dd; }
.hub-card svg .glow { fill: rgba(232, 162, 90, .35); } .hub-card svg .sub { fill: #f3c969; }
.hub-card svg .die { fill: #fbfdfc; } .hub-card svg .die.hidden-die { fill: #24506e; } .hub-card svg .pip { fill: #10241d; }
.hub-card svg .q { font: 700 20px var(--font); fill: rgba(255, 255, 255, .8); }
.hub-card svg .pcard { fill: #fbfdfc; } .hub-card svg .pcard-t { font: 700 13px var(--font); fill: #10241d; } .hub-card svg .pcard-t.red-t { fill: #cc2f3e; }