.hub-hero {
  margin-bottom: 1.5rem;
  animation: rise 700ms ease both;
}

.hub-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  line-height: 1;
}

.hub-hero p {
  margin: 0.65rem 0 0;
  max-width: 28rem;
  color: rgba(248, 236, 214, 0.8);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

.hub-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin: 0 0 1.35rem;
  animation: rise 800ms 40ms ease both;
}

.hub-jump a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(248, 236, 214, 0.28);
  border-radius: 999px;
  background: rgba(20, 12, 8, 0.22);
}

.hub-jump a:hover {
  border-color: rgba(248, 236, 214, 0.55);
  background: rgba(20, 12, 8, 0.4);
}

.hub-jump a:focus-visible,
.game-card:focus-visible {
  outline: 3px solid #f3c27a;
  outline-offset: 3px;
}

.game-section {
  margin-bottom: 1.65rem;
  animation: rise 900ms 60ms ease both;
}

.section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--cream);
}

.section-note {
  margin: -0.35rem 0 0.85rem;
  color: rgba(248, 236, 214, 0.72);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.game-card-fps .mark {
  color: #5a6b3a;
}

.game-card-fps::before {
  background: radial-gradient(circle, rgba(90, 107, 58, 0.22), transparent 65%);
}

.game-card-sandline .mark {
  color: #c4a574;
}

.game-card-sandline::before {
  background: radial-gradient(circle, rgba(196, 165, 116, 0.28), transparent 65%);
}

.game-card-street .mark {
  color: #6b4a2e;
}

.game-card-street::before {
  background: radial-gradient(circle, rgba(107, 74, 46, 0.24), transparent 65%);
}

.game-card-pocket .mark {
  color: #2f6b3a;
}

.game-card-pocket::before {
  background: radial-gradient(circle, rgba(47, 107, 58, 0.22), transparent 65%);
}

.game-card-hongkong .mark {
  color: #a32030;
}

.game-card-hongkong::before {
  background: radial-gradient(circle, rgba(200, 32, 48, 0.22), transparent 65%);
}

.game-card-hulao .mark {
  color: #8d7348;
}

.game-card-hulao::before {
  background: radial-gradient(circle, rgba(110, 46, 40, 0.28), transparent 65%);
}

.game-card-redcap .mark {
  color: #c62828;
}

.game-card-redcap::before {
  background: radial-gradient(circle, rgba(198, 40, 40, 0.22), transparent 65%);
}

.game-card-dragon .mark {
  color: #e07010;
}

.game-card-dragon::before {
  background: radial-gradient(circle, rgba(255, 138, 28, 0.28), transparent 65%);
}

.game-card {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding: 0 0 1.15rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 236, 200, 0.2), transparent 42%),
    var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 0;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.game-card .mark,
.game-card h2,
.game-card p,
.game-card .cta {
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

.card-preview {
  height: 118px;
  margin: 0 0 0.15rem;
  background: #c48a3a;
  position: relative;
  overflow: hidden;
}

.card-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.preview-go {
  background:
    radial-gradient(circle at 32% 48%, #1a1a1a 9px, transparent 10px),
    radial-gradient(circle at 58% 40%, #f7f1e6 9px, transparent 10px),
    radial-gradient(circle at 70% 62%, #1a1a1a 8px, transparent 9px),
    repeating-linear-gradient(#d19a45, #d19a45 17px, #8b5a2b 17px, #8b5a2b 18px),
    repeating-linear-gradient(90deg, #d19a45, #d19a45 17px, #8b5a2b 17px, #8b5a2b 18px);
}

.preview-xiangqi {
  background:
    linear-gradient(#c45c48 0 0) 50% 50% / 72% 2px no-repeat,
    repeating-linear-gradient(#e8c9a0, #e8c9a0 14px, #6b3a28 14px, #6b3a28 15px),
    repeating-linear-gradient(90deg, #e8c9a0, #e8c9a0 14px, #6b3a28 14px, #6b3a28 15px);
}

.preview-gomoku {
  background:
    radial-gradient(circle at 45% 48%, #111 8px, transparent 9px),
    radial-gradient(circle at 56% 48%, #f4eee4 8px, transparent 9px),
    radial-gradient(circle at 45% 62%, #111 8px, transparent 9px),
    radial-gradient(circle at 56% 62%, #f4eee4 8px, transparent 9px),
    radial-gradient(circle at 45% 76%, #111 8px, transparent 9px),
    #e2b56a;
}

.preview-junqi {
  background:
    linear-gradient(#a91d22, #a91d22) 12% 12% / 76% 4px no-repeat,
    linear-gradient(#3a5a9a 0 0) 18% 22% / 28% 18px no-repeat,
    linear-gradient(#c62828 0 0) 58% 68% / 28% 18px no-repeat,
    #f3e2c2;
}

.preview-chess3d {
  background:
    conic-gradient(#c8b48a 90deg, #5a4030 0 180deg, #c8b48a 0 270deg, #5a4030 0) 50% 40% / 88px 88px,
    linear-gradient(#2a4a38, #1a3024);
}

.preview-wizard {
  background:
    radial-gradient(circle at 50% 24%, transparent 9px, rgba(212, 173, 110, 0.9) 10px 12px, transparent 13px),
    radial-gradient(circle at 50% 24%, #4c7ea8 7px, #7a3d48 8px 15px, transparent 16px),
    radial-gradient(circle at 18% 30%, rgba(255, 176, 70, 0.7) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 26%, rgba(114, 169, 243, 0.65) 0 5px, transparent 6px),
    repeating-conic-gradient(#efe6d4 0% 25%, #243040 0% 50%) 50% 78% / 72px 72px no-repeat,
    linear-gradient(#1c2838, #121820);
}

.preview-mono {
  background:
    linear-gradient(#2bb673, #2bb673) 50% 50% / 70% 70% no-repeat,
    linear-gradient(135deg, #7ad6ff, #ffd56a 50%, #ff9f7a);
}

.preview-richera {
  background:
    linear-gradient(#f4efe4, #f4efe4) 62% 58% / 14% 42% no-repeat,
    linear-gradient(#e0a045, #e0a045) 46% 66% / 16% 28% no-repeat,
    linear-gradient(#d3544a, #d3544a) 30% 72% / 16% 18% no-repeat,
    linear-gradient(#6e2430, #6e2430) 50% 78% / 78% 46% no-repeat,
    #141a28;
}

.preview-fps {
  background:
    linear-gradient(90deg, #8b2a2a 0 42%, #1e88e5 42% 100%),
    #3a3e44;
  background-blend-mode: multiply;
  background-color: #6a7068;
}

.preview-sandline {
  background:
    linear-gradient(#e7d3a8 0 46%, #c4a574 46% 70%, #8a6238 70%),
    radial-gradient(circle at 70% 28%, #f4efe4 0 8px, transparent 9px);
}

.preview-street {
  background:
    linear-gradient(#87b7e6, #cde4f7 42%, #c4a574 42% 48%, #b08958 48%),
    #c4a574;
}

.preview-pocket {
  background:
    radial-gradient(circle at 70% 30%, #fff 8px, #e53935 9px, #e53935 22px, transparent 23px),
    linear-gradient(#7ec8ff 0 46%, #5aa85a 46% 70%, #c9a56a 70%);
}

.preview-hongkong {
  background:
    linear-gradient(#f4efe4, #f4efe4) 28% 42% / 7% 28% no-repeat,
    linear-gradient(#e7d3a4, #e7d3a4) 46% 34% / 8% 46% no-repeat,
    linear-gradient(#d8dee6, #d8dee6) 64% 48% / 7% 22% no-repeat,
    linear-gradient(#c8102e, #c8102e) 48% 78% / 16% 8% no-repeat,
    linear-gradient(#16324a 0 58%, #0e2434 58% 72%, #c8102e 72% 78%, #1a140f 78%);
}

.preview-hulao {
  background:
    linear-gradient(#5c4a3c, #5c4a3c) 18% 58% / 10% 46% no-repeat,
    linear-gradient(#5c4a3c, #5c4a3c) 82% 58% / 10% 46% no-repeat,
    linear-gradient(#2e2a28, #2e2a28) 50% 34% / 72% 7% no-repeat,
    linear-gradient(#6e2e28, #6e2e28) 50% 52% / 8% 22% no-repeat,
    linear-gradient(#c4a574, #c4a574) 62% 58% / 2px 28% no-repeat,
    linear-gradient(#c4a882 0 42%, #8a6a48 42% 70%, #3a322c 70%);
}

.preview-redcap {
  background:
    radial-gradient(circle at 22% 58%, #f8c090 7px, transparent 8px),
    radial-gradient(circle at 22% 48%, #e52521 12px, transparent 13px),
    linear-gradient(#5c94fc 0 58%, #3cb043 58% 78%, #8b5a2b 78%);
}

.preview-dragon {
  background:
    radial-gradient(circle at calc(50% - 11px) calc(42% - 9px), #d4141c 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(50% + 9px) calc(42% - 9px), #d4141c 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(50% - 11px) calc(42% + 8px), #d4141c 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(50% + 9px) calc(42% + 8px), #d4141c 3.5px, transparent 4.5px),
    radial-gradient(circle at 50% 42%, #fff7d0 0 6px, #ffd66a 7px, #ff9c1c 22px, #e2630b 34px, transparent 35px),
    linear-gradient(#7ec8ff 0 58%, #3d8a48 58% 76%, #c4a574 76%);
}

.game-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% 30%;
  height: 70%;
  background: radial-gradient(circle, rgba(15, 92, 76, 0.16), transparent 65%);
  pointer-events: none;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px rgba(20, 12, 8, 0.32);
}

.game-card .mark {
  display: none;
}

.game-card-wizard .mark {
  color: #6b4a2a;
}

.game-card-wizard::before {
  background: radial-gradient(circle, rgba(90, 58, 28, 0.26), transparent 65%);
}

.game-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.game-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 0.95rem;
}

.game-card .cta {
  margin-top: auto;
  color: var(--accent);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}

.game-card.soon {
  opacity: 0.72;
  cursor: default;
}

.game-card.soon:hover {
  transform: none;
  box-shadow: var(--shadow);
}

.game-card.soon .cta {
  color: rgba(61, 47, 38, 0.55);
}

@media (max-width: 1020px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .game-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .shell {
    width: calc(100% - 0.85rem);
    padding: 0.85rem 0 calc(1.35rem + env(safe-area-inset-bottom));
  }

  .hub-hero {
    margin-bottom: 1.1rem;
  }

  .hub-hero h1 {
    letter-spacing: 0.12em;
  }

  .hub-hero p {
    font-size: 0.95rem;
  }

  .game-card {
    min-height: 0;
    padding: 0 0 1.05rem;
  }

  .card-preview {
    height: 96px;
  }

  .game-card .mark {
    font-size: 2.2rem;
  }

  .game-card h2 {
    font-size: 1.45rem;
  }
}

/* Battle Drones: original upstream key art is published with the standalone game. */
.game-card-battledrones .mark { color: #4d99b7; }
.game-card-battledrones::before {
  background: radial-gradient(circle, rgba(45, 140, 190, .24), transparent 70%);
}
.preview-battledrones {
  background: #0b1725 url("../games/BattleDrones/assets/ui/keyart-landscape.webp") center center / cover no-repeat;
}