/* Final homepage interaction rules. Scale the whole card, not its image. */
.game-row .game,.game-row .game *{
  -webkit-tap-highlight-color:transparent;
}
.game-row .game:focus:not(:focus-visible){outline:none}
.game-row .game:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #c8ff3d;
}
@media(min-width:851px){
  .game-row .game:hover,.game-row .game:focus-visible{
    transform:scale(1.15);
    z-index:8;
    filter:drop-shadow(0 18px 24px #0009);
  }
}
@media(max-width:850px){
  #games .game-row{scroll-snap-type:none;overflow-anchor:none;scroll-behavior:auto}
  #games .game-row .game{scroll-snap-align:none;overflow-anchor:none}
  .game-row{
    gap:clamp(22px,4.5vw,36px);
    padding:26px clamp(20px,5vw,44px) 30px;
  }
  /* Let the last card cross the horizontal midpoint without shrinking the cards. */
  .game-row::after{content:'';flex:0 0 29%;pointer-events:none}
  .game-row .game:hover{transform:none}
  .game-row .game.playing,.game-row .game.playing:hover{
    transform:scale(1.18);
    z-index:8;
  }
  .game-row .game.tapped{
    animation:cardConfirm .38s cubic-bezier(.2,.8,.2,1);
  }
}
.game-row .game.touch-selected,.game-row .game.touch-selected:hover{
  transform:scale(1.18);
  z-index:8;
}
.game-row .game.touch-selected.tapped{animation:cardConfirm .38s cubic-bezier(.2,.8,.2,1)}
@keyframes cardConfirm{
  0%{transform:scale(1.18)}
  45%{transform:scale(1.25)}
  75%{transform:scale(1.11)}
  100%{transform:scale(1.18)}
}
.game-row .game .art img{transform:none}
.game-row .game{transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s}
.game-row .game.playing .art img{opacity:1}
.game-row .game.playing .art iframe{opacity:0}
.game-row .game.preview-ready .art img{opacity:0}
.game-row .game.preview-ready .art iframe{opacity:1}

/* Keep the game bright; only the rounded edge emits light. Shared by install cards. */
.game-row .game{position:relative;border-radius:20px;isolation:isolate}
.game-row .game .art img{filter:none}
.game-row .game .art .card-info{background:none;text-shadow:0 2px 3px #000,0 0 8px #000,1px 0 2px #000,-1px 0 2px #000}
.game-row .game::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border:2px solid #b3f879;border-radius:inherit;opacity:0;box-shadow:0 0 9px #b1f88370,0 0 24px #83e46a55,inset 0 0 7px #b3f87922;transition:opacity .18s}
.game-row .game.playing::after,.game-row .game:focus-visible::after{opacity:1;animation:cardEdgeGlow 2.6s ease-in-out infinite}
@media(hover:hover) and (min-width:851px){.game-row .game:hover::after{opacity:1;animation:cardEdgeGlow 2.6s ease-in-out infinite}}
@media(max-width:850px){.game-row .game{border-radius:16px}}
@keyframes cardEdgeGlow{0%,100%{box-shadow:0 0 8px #b1f88370,0 0 20px #83e46a40,inset 0 0 6px #b3f87918}50%{box-shadow:0 0 13px #b1f883b0,0 0 29px #83e46a70,inset 0 0 9px #b3f87930}}
@media(prefers-reduced-motion:reduce){.game-row .game::after{animation:none!important;transition:none}}

/* Sibling controls keep links and buttons separate without changing card geometry. */
.game-row .game-link{display:block;width:100%;height:100%;border-radius:inherit;color:inherit;text-decoration:none;outline:none;-webkit-tap-highlight-color:transparent}
.game-row .game:has(.game-link:focus-visible){box-shadow:0 0 0 2px #c8ff3d}
.game-row .game:has(.game-link:focus-visible)::after{opacity:1;animation:cardEdgeGlow 2.6s ease-in-out infinite}
.game-row .game:has(.game-link:focus-visible) .card-info{opacity:1}
.game-row .card-like{position:absolute;z-index:6;top:2px;right:2px;display:grid;place-items:center;width:38px;height:38px;padding:4px;margin:0;border:0;border-radius:12px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;appearance:none;color:#fff;cursor:pointer;touch-action:manipulation;transition:transform .18s;-webkit-tap-highlight-color:transparent}
.game-row .card-like svg{width:30px;height:30px;overflow:visible;pointer-events:none;fill:#0006;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:fill .18s}
.game-row .card-like.is-liked svg{fill:#ef526b}
.game-row .card-like:focus-visible{outline:2px solid #c8ff3d;outline-offset:3px}
.game-row .card-like:disabled{cursor:wait}
.game-row .card-like.heart-bounce{animation:heartBounce .38s cubic-bezier(.2,.8,.2,1)}
.card-like-notice{position:fixed;z-index:10000;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:14px 20px;border:1px solid #b9ef54;border-radius:18px;background:#17231ff5;color:#f4f9ef;box-shadow:0 8px 30px #0006;font-size:14px}
.card-like-notice[hidden]{display:none}
@media(hover:hover){.game-row .card-like:hover{transform:scale(1.12)}}
@media(min-width:851px){.game-row .game:has(.game-link:focus-visible){transform:scale(1.15);z-index:8}}
@keyframes heartBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.28)}70%{transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){.game-row .card-like{transition:none}.game-row .card-like.heart-bounce{animation:none}.game-row .game:has(.game-link:focus-visible)::after{animation:none}}