.game-page{padding-top:48px}
.back{display:inline-block;margin-bottom:32px;color:#ef7539;font-size:11px;font-weight:800;letter-spacing:1px;text-decoration:none}
.game-title{font-family:"DM Sans",Arial,sans-serif;font-size:clamp(38px,5vw,66px);letter-spacing:-3px;margin:10px 0}
.catalog{max-width:1240px;margin:auto;padding:75px 24px 100px}
.catalog-head{text-align:center;max-width:780px;margin:0 auto 50px}
.catalog-head h1{font-family:"DM Sans",sans-serif;font-size:clamp(44px,7vw,82px);line-height:1;letter-spacing:-4px}
.catalog-head h1 span{color:#ef7539}
.catalog-head>p:not(.label){color:#697187;font-size:18px}
.catalog-subline{display:inline-block;margin-top:6px;font-size:15px;color:#858da1}

/* Grid & Cards */
.game-list{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.game-card{
  background:#fff;
  border:1px solid #dfd5c0;
  border-radius:22px;
  box-shadow:0 8px 24px rgba(17,26,51,.08);
  text-decoration:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.game-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(17,26,51,.14);
}

/* Eradicate any rogue pseudo-elements from cards */
.game-card::before,
.game-card::after,
.game-card *::before,
.game-card *::after,
.game-cover::before,
.game-cover::after,
.game-card-copy::before,
.game-card-copy::after,
.game-card-media::before,
.game-card-media::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Covers / Media */
.game-card-media,
.game-cover{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
  background:#111a33;
}
.game-cover-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.game-card:hover .game-cover-img{
  transform:scale(1.05);
}

/* Badges */
.game-badge{
  position:absolute;
  z-index:3;
  top:16px;
  left:16px;
  padding:7px 14px;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  border-radius:99px;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.badge-3d{
  background:rgba(11,16,38,.88);
  color:#2ee6d6;
  border:1.5px solid #2ee6d6;
}
.badge-retro{
  background:rgba(17,26,51,.88);
  color:#ffc42e;
  border:1.5px solid #ffc42e;
}
.badge-kids{
  background:rgba(85,55,165,.88);
  color:#ffe057;
  border:1.5px solid #ffe057;
}
.badge-calm{
  background:rgba(23,79,73,.88);
  color:#8ce0c0;
  border:1.5px solid #8ce0c0;
}

/* Card Body */
.game-card-copy{
  padding:26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
  position:relative;
  z-index:2;
  background:#fff;
}
.game-card-copy small{
  font-weight:800;
  letter-spacing:1.2px;
  color:#ef7539;
  font-size:11px;
  text-transform:uppercase;
}
.game-card-copy h2{
  font-size:26px;
  line-height:1.25;
  margin:10px 0 8px;
  letter-spacing:-0.5px;
}
.game-card-title-link{
  color:#111a33;
  text-decoration:none;
  transition:color .15s ease;
}
.game-card-title-link:hover{
  color:#ef7539;
}
.game-card-copy p{
  color:#697187;
  line-height:1.6;
  font-size:15px;
  margin:0 0 20px;
  flex:1;
}
.game-card-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-top:12px;
  border-top:1px solid #f0e7d8;
}
.play-link{
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  color:#111a33;
  text-decoration:none;
  background:#ffc42e;
  padding:9px 16px;
  border-radius:10px;
  box-shadow:0 3px 0 #d9a016;
  transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.play-link:hover{
  background:#ffd15a;
  transform:translateY(-1px);
}
.play-link:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 #d9a016;
}
.card-tutorial-link{
  font-size:12px;
  font-weight:800;
  color:#111a33;
  background:#f3ecde;
  border:1px solid #ded3be;
  padding:8px 14px;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.card-tutorial-link:hover{
  background:#e7ded0;
  border-color:#cfc2aa;
}

@media(max-width:900px){
  .game-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .catalog{padding:50px 16px}
  .game-card-copy{padding:20px}
  .game-card-copy h2{font-size:22px}
}