/* Game cards (drawn by games.js) for the home page and the game pages. The grid takes as many
   250px+ columns as fit; narrow cards hide their labels (container queries below). */
.gc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:52px 40px}
.gc{position:relative;container-type:inline-size;opacity:0;transform:translateY(24px);
  animation:gcPop .5s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:calc(var(--i,0)*70ms + 120ms);
  --gc-torn-l:polygon(0 31.6px,7% 23.7px,16% 29.7px,27% 17.7px,38% 23.2px,52% 13.8px,64% 19.1px,77% 8.3px,88% 12.2px,100% 4.8px,100% calc(100% - 11.2px),91% calc(100% - 3.2px),79% calc(100% - 12.8px),66% calc(100% - 4.8px),53% calc(100% - 12.8px),40% calc(100% - 3.2px),26% calc(100% - 11.2px),13% calc(100% - 4.8px),0 calc(100% - 12.8px));
  --gc-torn-r:polygon(0 9.6px,7% 4.7px,16% 14.7px,27% 7.5px,38% 18.0px,52% 14.6px,64% 25.3px,77% 20.1px,88% 29.0px,100% 26.8px,100% calc(100% - 11.2px),91% calc(100% - 3.2px),79% calc(100% - 12.8px),66% calc(100% - 4.8px),53% calc(100% - 12.8px),40% calc(100% - 3.2px),26% calc(100% - 11.2px),13% calc(100% - 4.8px),0 calc(100% - 12.8px))}
@keyframes gcPop{to{opacity:1;transform:translateY(0)}}
.gc-main{display:block;color:inherit;text-decoration:none}
/* No filter or will-change on the tilted card: both blur the poster. The yellow shadow is a second
   copy of the torn shape. */
.gc-card{position:relative;transform:rotate(var(--rot,-1.5deg));transition:transform .2s cubic-bezier(.2,1.5,.4,1)}
.gc-posterwrap{position:relative;z-index:0}
.gc-posterwrap::before{content:'';position:absolute;inset:0;z-index:-1;background:#FBC00B;clip-path:var(--torn);
  transform:translate(7px,7px);transition:transform .2s cubic-bezier(.2,1.5,.4,1)}
.gc-poster{position:relative;clip-path:var(--torn);aspect-ratio:600/803;background:#000;overflow:hidden}
.gc-poster img{width:100%;height:100%;object-fit:cover;display:block}
.gc-tag{position:absolute;top:var(--tagtop,12%);right:-14px;z-index:2;background:#FBC00B;color:#000;
  font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-size:clamp(15px,1.6vw,19px);letter-spacing:.05em;line-height:1;
  text-transform:uppercase;padding:8px 15px 10px;transform:rotate(5deg);
  clip-path:polygon(0 0,100% 6%,96% 100%,4% 92%);box-shadow:5px 5px 0 #000}
.gc:hover .gc-card{transform:rotate(0deg) translateY(-5px) scale(1.015)}
.gc:hover .gc-posterwrap::before{transform:translate(12px,12px)}

.gc-stats{display:flex;align-items:baseline;gap:8px;margin-top:22px;padding-top:9px;border-top:1px dashed rgba(251,192,11,.3);
  font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b9bcc3;white-space:nowrap}
.gc-stats b{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-weight:400;font-size:18px;letter-spacing:.02em;color:#FBC00B}
.gc-vol{display:inline-flex;gap:3px;margin-left:auto;align-self:center}
.gc-vol i{display:block;width:10px;height:9px;background:#FBC00B;transform:skewX(-14deg)}
.gc-vol i.off{background:#2a2c33}
.gc-info{color:#FBC00B;margin-left:8px}
a.gc-main:hover .gc-info{text-decoration:underline;text-underline-offset:3px}

.gc-plays{display:flex;gap:10px;margin-top:14px}
.gc-play{position:relative;flex:1;background:#26272c;padding:11px 0 13px;transform:skewX(-9deg);
  box-shadow:6px 7px 0 rgba(0,0,0,.55);cursor:default;user-select:none;text-decoration:none}
.gc-play::before{content:'';position:absolute;inset:0;pointer-events:none;transition:opacity .12s;
  background-image:radial-gradient(rgba(11,11,12,.30) 1px,transparent 1.3px);background-size:6px 6px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 42%,transparent 74%);
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 42%,transparent 74%)}
.gc-play>span{position:relative;z-index:1;display:flex;justify-content:center;width:100%;transform:skewX(9deg);
  font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;text-transform:uppercase;letter-spacing:.04em;line-height:1;font-size:15px;color:#8d9099}
.gc-play.on{background:#FBC00B;cursor:pointer;transition:background .12s}
.gc-play.on>span{color:#0a0b0d;transition:color .12s}
.gc-play.on:hover{background:#0a0b0d}
.gc-play.on:hover>span{color:#FBC00B}
.gc-play.on:hover::before{opacity:0}

@container (max-width:300px){
  .gc-k{display:none}
  .gc-plays{gap:8px}
  .gc-play>span{font-size:13px}
}
@container (max-width:220px){
  .gc-info{display:none}
  .gc-stats b{font-size:16px}
  .gc-plays{flex-direction:column}
}
@media(max-width:600px){
  .gc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
}