.portal-main{
  width:min(1100px,calc(100% - 24px));
  margin:0 auto;
  padding:1.25rem 0 2rem;
}
.portal-main>.card{
  background:linear-gradient(180deg,rgba(31,41,68,.98),rgba(16,23,41,.98));
  border:1px solid #334161;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}
.portal-main h1{margin:.15rem 0 .4rem;font-size:clamp(1.7rem,4vw,2.35rem)}
.portal-main>.card>p{margin:.2rem 0 1.25rem;color:#b7c0dc}
.game-picker{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.1rem;
  margin-top:1rem;
}
.game-tile{
  display:flex;
  min-height:245px;
  padding:1.35rem;
  border:1px solid #3f4d70;
  border-radius:18px;
  background:linear-gradient(160deg,#1b2540,#11182b);
  text-decoration:none;
  color:#eef3ff;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  transition:.18s transform,.18s box-shadow,.18s border-color,.18s background;
  flex-direction:column;
  align-items:flex-start;
}
.game-tile:hover{
  transform:translateY(-4px);
  border-color:#7f90ff;
  background:linear-gradient(160deg,#243052,#162039);
  box-shadow:0 20px 44px rgba(0,0,0,.34),0 0 0 3px rgba(127,144,255,.12);
}
.game-icon{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:18px;
  background:#0d1425;
  border:1px solid #3e4a6b;
  font-size:2.55rem;
  box-shadow:inset 0 0 22px rgba(127,144,255,.08);
}
.game-tile h2{margin:.85rem 0 .35rem;font-size:1.45rem}
.game-tile p{margin:0;color:#b8c2de;line-height:1.45}
.game-tile strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  padding:.65rem 1rem;
  border-radius:11px;
  background:linear-gradient(180deg,#8291ff,#6072ee);
  color:#0b1020;
  min-width:105px;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
@media(max-width:620px){
  .portal-main{padding-top:.6rem}
  .game-tile{min-height:210px}
}