/* The STATE PROPERTY series menu. Compact on purpose: title, two game cards, one social block,
   all on the first screen of a phone. Cards stack on narrow screens and sit side by side on wide ones. */
html, body.hub-page { overflow: auto; height: auto; min-height: 100%; }
.hub { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: calc(var(--safe-t) + 20px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 20px) calc(var(--safe-l) + 16px); }
.hub-head { display: grid; gap: 6px; justify-items: center; text-align: center; }
.hub-title { margin: 0; font: 400 clamp(32px, 9vw, 54px)/1 var(--font); color: #fff; letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(59,50,136,0.55), 0 2px 14px rgba(59,50,136,0.55), 0 0 22px rgba(255,240,255,0.35); }
.hub-by { margin: 0; display: inline-flex; align-items: center; gap: 7px; font: 400 14px/1 var(--font); color: var(--ink); }
.hub-by img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff; object-fit: cover; }
.hub-choose { margin: 4px 0 0; font: 400 15px/1 var(--font); letter-spacing: 0.06em; color: var(--ink-soft); }

.cards { width: 100%; max-width: 440px; display: grid; gap: 12px; }
.card { display: grid; grid-template-columns: 47% 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 18px;
  border: 1px solid var(--line); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.26));
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(50,40,120,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s; }
.card-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-deep);
  border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 4px 14px rgba(40,30,110,0.3); }
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.card-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 38%); }
.card:hover .card-img img { transform: scale(1.03); }
.card-body { display: grid; gap: 4px; align-content: center; min-width: 0; }
.card-title { margin: 0; font: 400 18px/1.15 var(--font); color: var(--violet-dark); }
.card-tag { margin: 0; font: 400 13px/1.3 var(--font); color: var(--ink-soft); }
.card .btn-play { margin: 8px 0 0; max-width: none; min-height: 48px; display: grid; place-items: center; text-decoration: none; font-size: 20px; }
.card .btn-play.going { filter: brightness(1.15); transform: scale(0.98); }
.card.off { opacity: 0.62; }
.card.off .card-img img { filter: grayscale(0.6); }
.soon { margin: 8px 0 0; justify-self: start; padding: 8px 12px; border-radius: 999px; font: 400 13px/1 var(--font); color: var(--ink-soft);
  background: rgba(255,255,255,0.45); border: 1px dashed rgba(74,69,146,0.45); }

/* the "??? POV" announcement: darker glass, a soft pulse on the picture, no PLAY */
.card.teaser { background: linear-gradient(180deg, rgba(60,50,130,0.55), rgba(30,24,72,0.55)); border-color: rgba(216,197,243,0.7); color: #fff; }
.card.teaser .card-title { color: #fff; letter-spacing: 0.04em; }
.card.teaser .card-tag { color: rgba(255,255,255,0.82); font-style: italic; }
.card.teaser .card-img { border-color: rgba(216,197,243,0.8); }
.card.teaser .card-img img { animation: tease 3.2s ease-in-out infinite; }
@keyframes tease { 50% { filter: brightness(1.25) saturate(1.2); } }
.coming-soon { margin: 8px 0 0; display: grid; place-items: center; min-height: 48px; width: 100%; padding: 6px;
  border-radius: 999px; font: 400 13px/1.2 var(--font); letter-spacing: 0.04em; text-align: center;
  color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); }

/* wide screens: the cards side by side, picture on top */
@media (min-width: 640px) {
  .cards { max-width: 820px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .card { grid-template-columns: 1fr; padding: 12px; }
  .card-body { text-align: center; justify-items: center; }
  .card .btn-play { width: 100%; }
  .soon { justify-self: center; }
}
/* phones held sideways: a compact single row */
@media (orientation: landscape) and (max-height: 540px) {
  .hub { gap: 10px; padding-top: calc(var(--safe-t) + 12px); padding-bottom: calc(var(--safe-b) + 12px); }
  .hub-title { font-size: 30px; }
  .hub-choose { display: none; }
  .cards { max-width: 920px; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 8px; }
  .card { grid-template-columns: 42% 1fr; gap: 8px; padding: 7px; }
  .card-body { text-align: left; justify-items: stretch; }
  .card-title { font-size: 15px; }
  .card-tag { display: none; }
  .card .btn-play { font-size: 18px; margin-top: 4px; }
  .coming-soon { font-size: 11px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .card-img img, .card { transition: none; } .card.teaser .card-img img { animation: none; } }