/* The hub's own look; the reset, safe areas, pixel panels and chrome tokens come
   from shell.css. Nothing here is round or smooth: the shelf is a row of panels
   with a hard bevel, and the card art is the games' own sprites, pixelised. */
:root {
  --ink: #f2e9d8;
  --ink-dim: #b9a88c;
  --page: #17120c;
  --chrome: #241c12;
  --chrome-lit: #4a3a24;
  --chrome-edge: #6b5a3d;
  --chrome-shadow: #0d0a06;
  --field: #241c12;
  --field-ink: #ffe9b8;
  --field-dim: #8f7d5f;
}
/* A 4px checker instead of a soft vignette: the only texture on the page is one
   the pixel grid can actually hold. */
body {
  background-color: var(--page);
  background-image: repeating-conic-gradient(#1e1811 0% 25%, transparent 0% 50%);
  background-size: 8px 8px;
}

.hub {
  /* Same clamp as the game frame: Telegram can report a stale height across a
     rotation, and min() with the real dvh keeps the shelf fully on screen. */
  height: min(100dvh, var(--tg-viewport-height, 100dvh));
  overflow-y: auto;
  padding: calc(16px + var(--top-safe)) calc(14px + var(--right-safe)) calc(22px + var(--bottom-safe)) calc(14px + var(--left-safe));
  display: grid;
  align-content: start;
  gap: 16px;
}
/* min-width:0 lets the row shrink to the shelf's column instead of being forced
   wider than the screen by the brand's nowrap text. */
.hub-head { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0 }
.hub-head h1 { margin: 0; font-family: var(--display); font-size: 16px; line-height: 1.4; color: #fff3d6; text-shadow: 3px 3px var(--chrome-shadow) }
.hub-head .kicker { color: var(--ink-dim) }
.hub-head .profile { border-color: var(--chrome-edge); background: #120e09 }
.hub-head .profile .avatar { color: #e9d9b4 }
.credit-chip { background: #120e09; border-color: var(--chrome-edge) }
.hub-head .menu { width: 250px }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px }
.card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 124px;
  padding: 14px;
  background: var(--chrome);
  border: 4px solid var(--chrome-edge);
  clip-path: var(--notch);
  box-shadow: inset 0 4px var(--chrome-lit);
  color: inherit;
  text-decoration: none;
  transition: transform .12s;
}
.card:active { transform: translateY(3px) }
.card[aria-disabled="true"] { filter: grayscale(1) brightness(.7) }
/* The thumbnails are 48px of real game art, so 96px is exactly twice their size and
   nearest neighbour keeps every source pixel a clean 2x2 block. */
.card img { width: 96px; height: 96px; display: block; image-rendering: pixelated }
.card h2 { margin: 0; font-size: 17px; line-height: 1.2; color: var(--field-ink) }
/* The whole card is the press target, so no per-card button: a badge small enough
   to share a row with the copy was unreadable on a phone. */
.card p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-dim) }
.card .meta { margin-top: 8px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--field-dim) }

@media (orientation:landscape) and (max-height:430px) {
  .hub { gap: 10px }
  .card { grid-template-columns: 48px 1fr; min-height: 78px; padding: 10px 12px }
  .card img { width: 48px; height: 48px }
}