/* TERM-FIN V5.8.4 — game cover full-frame + global TERM-FIN corner logo */
:root{
  --tf-game-card-w:132px;
  --tf-game-image:112px;
  --tf-game-gap:16px;
}

.games-section .game-grid,
.all-games .game-grid,
.all-games .game-grid.compact{
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--tf-game-card-w));
  justify-content:start;
  align-items:start;
  gap:var(--tf-game-gap);
}

.games-section .game-card,
.all-games .game-card{
  width:var(--tf-game-card-w);
  min-width:0;
  padding:9px 9px 10px;
  border-radius:15px;
  overflow:visible;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,253,248,.98) 100%);
  border:1px solid rgba(218,196,150,.70);
  box-shadow:0 5px 14px rgba(82,60,22,.08), inset 0 0 0 1px rgba(255,255,255,.7);
  transform:translateZ(0);
  isolation:isolate;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease,background .24s ease;
}

.games-section .game-cover,
.all-games .game-cover{
  position:relative;
  display:block;
  width:var(--tf-game-image);
  height:var(--tf-game-image);
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#f8f1e3,#efe0bf);
  border:1px solid rgba(223,191,127,.66);
  box-shadow:0 4px 11px rgba(63,43,12,.08);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.games-section .game-cover > .game-cover-image,
.all-games .game-cover > .game-cover-image{
  display:block;
  width:108%;
  height:108%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.002);
  transition:transform .42s cubic-bezier(.2,.75,.2,1),filter .36s ease;
}

/* low-noise shine: only activates on hover */
.games-section .game-cover::before,
.all-games .game-cover::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-35% auto -35% -62%;
  width:34%;
  pointer-events:none;
  opacity:0;
  transform:rotate(18deg) translateX(-190%);
  background:linear-gradient(90deg,transparent,rgba(255,248,210,.55),rgba(255,255,255,.82),rgba(255,223,137,.25),transparent);
}

/* V5.8.6: use the exact user-provided TERM-FIN logo file and make it fill the badge more fully. */
.games-section .game-corner-logo,
.all-games .game-corner-logo{
  position:absolute;
  z-index:4;
  right:-1px;
  bottom:-1px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0px;
  border-radius:13px 0 10px 0;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(252,250,246,.98));
  border-top:1px solid rgba(255,255,255,.96);
  border-left:1px solid rgba(231,220,198,.84);
  box-shadow:-4px -4px 14px rgba(22,17,10,.10),inset 0 0 0 1px rgba(255,255,255,.80);
  pointer-events:none;
  transform:translateZ(0);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease;
}
.games-section .game-corner-logo img,
.all-games .game-corner-logo img{
  width:108%;
  height:108%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  border-radius:5px;
  transform:scale(1.02);
  filter:drop-shadow(0 2px 4px rgba(44,33,12,.14));
}

.games-section .game-info,
.all-games .game-info{
  padding:8px 1px 0;
  text-align:center;
  min-width:0;
}

.games-section .game-info h3,
.all-games .game-info h3{
  margin:0;
  color:#2f271b;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  min-height:32px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
}

/* keep catalog visually clean like the reference */
.games-section .game-info small,
.all-games .game-info small,
.games-section .game-info>a,
.all-games .game-info>a{
  display:none!important;
}

@media (hover:hover) and (pointer:fine){
  .games-section .game-card:hover,
  .all-games .game-card:hover{
    transform:translateY(-4px);
    border-color:rgba(208,159,55,.92);
    background:#fff;
    box-shadow:0 11px 24px rgba(108,72,9,.14),0 0 0 3px rgba(245,203,102,.07);
  }
  .games-section .game-card:hover .game-cover > .game-cover-image,
  .all-games .game-card:hover .game-cover > .game-cover-image{
    transform:scale(1.055);
    filter:saturate(1.04) contrast(1.02);
  }
  .games-section .game-card:hover .game-cover::before,
  .all-games .game-card:hover .game-cover::before{
    opacity:1;
    animation:tfCompactGameShine .72s ease-out both;
  }
  .games-section .game-card:hover .game-corner-logo,
  .all-games .game-card:hover .game-corner-logo{
    transform:translate(-2px,-2px) scale(1.07);
    box-shadow:-5px -5px 16px rgba(117,78,10,.16),0 3px 8px rgba(65,42,4,.08);
  }
}

@keyframes tfCompactGameShine{
  from{transform:rotate(18deg) translateX(-190%)}
  to{transform:rotate(18deg) translateX(520%)}
}

/* Tablet: still compact; allow the browser to fit as many cards as possible */
@media (max-width:1180px){
  :root{
    --tf-game-card-w:124px;
    --tf-game-image:104px;
    --tf-game-gap:13px;
  }
  .games-section .game-grid,
  .all-games .game-grid,
  .all-games .game-grid.compact{
    grid-template-columns:repeat(auto-fill,var(--tf-game-card-w));
  }
}

/* Phones: 3 columns, close to app-store/game-catalog density */
@media (max-width:640px){
  :root{--tf-game-gap:8px}
  .games-section .game-grid,
  .all-games .game-grid,
  .all-games .game-grid.compact{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .games-section .game-card,
  .all-games .game-card{
    width:100%;
    padding:6px 5px 8px;
    border-radius:12px;
  }
  .games-section .game-cover,
  .all-games .game-cover{
    width:min(96px,calc(100% - 2px));
    height:auto;
    aspect-ratio:1 / 1;
    border-radius:10px;
  }
  .games-section .game-info,
  .all-games .game-info{padding-top:6px}
  .games-section .game-info h3,
  .all-games .game-info h3{
    font-size:10px;
    line-height:1.28;
    min-height:26px;
  }
  .games-section .game-corner-logo,
  .all-games .game-corner-logo{
    width:32px;
    height:32px;
    padding:0px;
    right:-1px;
    bottom:-1px;
    border-radius:12px 0 9px 0;
  }
  .games-section .game-card:active,
  .all-games .game-card:active{transform:scale(.975)}
  .games-section .game-cover:active > .game-cover-image,
  .all-games .game-cover:active > .game-cover-image{transform:scale(1.03)}
}

@media (max-width:360px){
  :root{--tf-game-gap:6px}
  .games-section .game-grid,
  .all-games .game-grid,
  .all-games .game-grid.compact{gap:6px}
  .games-section .game-card,
  .all-games .game-card{padding:5px 4px 7px}
  .games-section .game-cover,
  .all-games .game-cover{width:min(88px,calc(100% - 2px))}
  .games-section .game-info h3,
  .all-games .game-info h3{font-size:9px;min-height:24px}
}

@media (prefers-reduced-motion:reduce){
  .games-section .game-card,
  .all-games .game-card,
  .games-section .game-cover > .game-cover-image,
  .all-games .game-cover > .game-cover-image,
  .games-section .game-corner-logo,
  .all-games .game-corner-logo{transition:none!important}
  .games-section .game-cover::before,
  .all-games .game-cover::before{animation:none!important;display:none!important}
}


/* V5.8.2 hard override: make the TF artwork fill the white corner frame */
.games-section .game-corner-logo,
.all-games .game-corner-logo{
  padding:1px!important;
  background:linear-gradient(145deg,#fff,#fbf8f1)!important;
  background-image:none!important;
}
.games-section .game-corner-logo img,
.all-games .game-corner-logo img{
  display:block!important;
  width:116%!important;
  height:116%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:scale(1.04)!important;
}


/* V5.8.4 FORCE: main GAME COVER must fill its frame edge-to-edge.
   This intentionally overrides legacy/global img rules. */
.games-section .game-cover,
.all-games .game-cover{
  position:relative!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  line-height:0!important;
}
.games-section .game-cover > img.game-cover-image,
.all-games .game-cover > img.game-cover-image{
  position:absolute!important;
  inset:-2px!important;
  display:block!important;
  width:calc(100% + 4px)!important;
  height:calc(100% + 4px)!important;
  min-width:calc(100% + 4px)!important;
  min-height:calc(100% + 4px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.035)!important;
  transform-origin:center center!important;
}
@media (hover:hover) and (pointer:fine){
  .games-section .game-card:hover .game-cover > img.game-cover-image,
  .all-games .game-card:hover .game-cover > img.game-cover-image{
    transform:scale(1.085)!important;
  }
}
@media (max-width:640px){
  .games-section .game-cover > img.game-cover-image,
  .all-games .game-cover > img.game-cover-image{
    transform:scale(1.045)!important;
  }
  .games-section .game-card:active .game-cover > img.game-cover-image,
  .all-games .game-card:active .game-cover > img.game-cover-image{
    transform:scale(1.075)!important;
  }
}

/* V5.8.4: force transparent TF badge asset, never black background */
.games-section .game-corner-logo,
.all-games .game-corner-logo{
  background-color:#fff!important;
}
.games-section .game-corner-logo img,
.all-games .game-corner-logo img{
  background:transparent!important;
}


/* V5.8.7 FINAL: TF badge display fix
   Goal: make the exact TF logo look closer to the source image when shown inside the corner badge.
   We slightly enlarge the badge, remove odd scaling artifacts, and let the artwork breathe inside the frame. */
.games-section .game-corner-logo,
.all-games .game-corner-logo{
  width:36px !important;
  height:36px !important;
  right:-1px !important;
  bottom:-1px !important;
  padding:1px !important;
  border-radius:14px 0 10px 0 !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,#ffffff,#faf7ef) !important;
  background-color:#fff !important;
  border-top:1px solid rgba(255,255,255,.96) !important;
  border-left:1px solid rgba(224,212,188,.88) !important;
  box-shadow:-3px -3px 12px rgba(22,17,10,.10), inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
.games-section .game-corner-logo img,
.all-games .game-corner-logo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  border-radius:5px !important;
  background:transparent !important;
  filter:drop-shadow(0 1px 2px rgba(44,33,12,.12)) !important;
}
@media (max-width:640px){
  .games-section .game-corner-logo,
  .all-games .game-corner-logo{
    width:32px !important;
    height:32px !important;
    padding:1px !important;
    border-radius:12px 0 9px 0 !important;
  }
  .games-section .game-corner-logo img,
  .all-games .game-corner-logo img{
    border-radius:4px !important;
  }
}


/* V5.8.8 — cleaned transparent TF badge asset; avoid any black matte/background. */
.games-section .game-corner-logo,
.all-games .game-corner-logo{
  background:linear-gradient(145deg,#fff,#fbf8f1)!important;
}
.games-section .game-corner-logo img,
.all-games .game-corner-logo img{
  background:transparent!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}