* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  min-height:100%;
  font-family: ui-rounded, "Segoe UI", "Comic Sans MS", system-ui, sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
body { background: linear-gradient(#7cc9ff 0%, #aee3ff 55%, #d8f3ff 100%); min-height:100vh; min-height:100dvh; }

#hub {
  min-height:100vh; padding:24px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
.hub-title {
  font-family:var(--read-font); font-weight:400;
  font-size:44px; line-height:1.8; color:#5e60ce;
  background:rgba(255,255,255,.9); border-radius:30px; padding:0 30px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.hub-icon { font-family:system-ui, sans-serif; }

#games {
  display:grid; gap:22px; width:100%; max-width:760px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.game-card {
  --card:#5e60ce;
  min-height:200px; border:none; border-radius:28px; cursor:pointer;
  background:#fff; border-bottom:8px solid var(--card);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition: transform .15s;
  font-family:inherit;
}
.game-card:hover { transform:translateY(-4px); }
.game-card:active { transform:scale(.95); }
.game-card.chosen { animation: chosen .6s ease; }
@keyframes chosen { 40% { transform:scale(1.08) rotate(-3deg); } 100% { transform:scale(1); } }
.game-card.soon { background:rgba(255,255,255,.55); border-bottom-style:dashed; box-shadow:none; }
.game-icon { font-size:80px; line-height:1; }
.game-name { font-family:var(--read-font); font-size:28px; line-height:1.9; color:var(--card); }

#caption { max-width:min(92vw, 700px); }

@media (max-height: 500px) and (orientation: landscape) {
  #hub { flex-direction:row; flex-wrap:wrap; gap:16px; padding:12px; }
  .hub-title { font-size:30px; }
  #games { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width:560px; }
  .game-card { min-height:150px; }
  .game-icon { font-size:56px; }
  .game-name { font-size:22px; }
  #caption { position:fixed; bottom:10px; left:50%; translate:-50% 0; font-size:18px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card, .game-card.chosen { animation:none; transition:none; }
}