/* /games – bridge between the VMS site and the game pages */
@font-face{font-family:"Inter Tight";src:url(/assets/fonts/inter-tight-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}

body.games{background:#0B0C0F}
.games .page-title em{color:var(--accent)}
.games-section{padding:clamp(80px,10vw,150px) 0;border-top:1px solid var(--line)}

/* game cards – one shared frame; only the image and a small accent tell them apart */
.games-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.gcard{--acc:var(--paper);display:flex;flex-direction:column;color:var(--paper);text-decoration:none;border-top:1px solid var(--line);padding-top:clamp(18px,2vw,24px)}
.gcard-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--ink-3)}
.gcard-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.82) contrast(1.04);transform:scale(1.02);transition:filter .9s var(--ease),transform 1.4s var(--ease)}
.gcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,15,0) 55%,rgba(11,12,15,.55) 100%);pointer-events:none}
.gcard:hover .gcard-media img{filter:none;transform:scale(1.05)}
.gcard-num{position:absolute;left:16px;top:14px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(238,234,226,.75)}
.gcard-body{display:flex;flex-direction:column;padding-top:26px;flex:1}
.gcard-status{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gcard-status i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.gcard-title{margin-top:16px;font-size:clamp(32px,3.4vw,52px);letter-spacing:-.04em;line-height:.98;transition:transform .8s var(--ease)}
.gcard:hover .gcard-title{transform:translateX(8px)}
.gcard-tag{margin-top:12px;color:var(--faint);font-size:clamp(16px,1.3vw,18px);line-height:1.5;max-width:34ch}
.gcard-foot{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.gcard-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.gcard-cta{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;padding-bottom:5px;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease),gap .5s var(--ease)}
.gcard-cta svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.gcard:hover .gcard-cta{background-size:100% 1px,100% 1px;gap:14px}

/* how we make games */
.how{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.how li{padding:34px 28px 10px 0}
.how li+li{padding-left:28px;border-left:1px solid var(--line)}
.how .n{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:28px}
.how h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.how p{color:var(--muted);font-size:15px;line-height:1.6}

/* what's next */
.next-text{margin-top:28px;font-size:clamp(24px,3.2vw,44px);letter-spacing:-.03em;line-height:1.2;max-width:24ch}
.next-text em{color:var(--faint)}
.next-links{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap}

/* team roles */
.games .person .role{margin-top:2px}

/* contact */
.contact-big{font-size:clamp(34px,5vw,76px);letter-spacing:-.045em;line-height:1;max-width:18ch}
.contact-big em{color:var(--accent)}
.contact-row{margin-top:48px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.mail-link{font-size:clamp(18px,1.8vw,24px);color:var(--paper);text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:4px;transition:border-color .4s}
.mail-link:hover{border-color:var(--paper)}

@media (max-width:900px){
  .games-list{grid-template-columns:1fr}
  .how{grid-template-columns:1fr 1fr}
  .how li:nth-child(3){padding-left:0;border-left:0}
  .how li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:600px){
  .how{grid-template-columns:1fr}
  .how li,.how li+li{padding:26px 0 16px;border-left:0}
  .how li+li{border-top:1px solid var(--line)}
}

/* balance the two worlds: calm the colourful one, lift the dark one */
.gcard--excuse .gcard-media img{filter:saturate(.55) brightness(.6) contrast(1.05)}
.gcard--excuse:hover .gcard-media img{filter:saturate(.9) brightness(.85)}
.gcard--dream .gcard-media img{filter:brightness(1.9) contrast(1.15)}
.gcard--dream:hover .gcard-media img{filter:brightness(2.3) contrast(1.2)}