/* Game cards + tiles: smooth zoom, shine, and the name shows only on hover / finger press */
:root{--ez:cubic-bezier(.22,.61,.36,1)}
.card,.tile{transition:transform .55s var(--ez),box-shadow .55s var(--ez);will-change:transform;-webkit-tap-highlight-color:transparent}
.card .th,.tile .te{transition:transform .65s var(--ez);will-change:transform}

/* the name is hidden until the game is hovered / pressed */
.card .cb,.tile b{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ez),transform .55s var(--ez)}

/* mouse: hover */
@media(hover:hover){
  .card:hover,.tile:hover{transform:translateY(-4px) scale(1.05);z-index:3;box-shadow:0 16px 30px rgba(10,108,255,.32)}
  .card:hover .th{transform:scale(1.14)}
  .tile:hover .te{transform:translate(-50%,-50%) scale(1.14);animation:none}
  .tile:hover .te.teimg{transform:scale(1.14);animation:none}
  .card:hover .cb,.tile:hover b{opacity:1;transform:none}
}
/* keyboard focus */
.card:focus-visible,.tile:focus-visible{transform:translateY(-4px) scale(1.05);z-index:3;box-shadow:0 16px 30px rgba(10,108,255,.32);outline:none}
.card:focus-visible .th{transform:scale(1.14)}
.tile:focus-visible .te{transform:translate(-50%,-50%) scale(1.14)}
.tile:focus-visible .te.teimg{transform:scale(1.14)}
.card:focus-visible .cb,.tile:focus-visible b{opacity:1;transform:none}

/* finger: while the game is touched */
@media(hover:none){
  .card:hover,.tile:hover{transform:none;box-shadow:0 6px 16px rgba(20,90,170,.18)}
  .card:hover .th{transform:none}
  .tile:hover .te{transform:translate(-50%,-50%);animation:none}
  .tile:hover .te.teimg{transform:none}
  .card:hover .cb,.tile:hover b{opacity:0;transform:translateY(12px)}
  .card:active,.tile:active{transform:translateY(-3px) scale(1.05);z-index:3;box-shadow:0 14px 26px rgba(10,108,255,.32)}
  .card:active .th{transform:scale(1.14)}
  .tile:active .te{transform:translate(-50%,-50%) scale(1.14)}
  .tile:active .te.teimg{transform:scale(1.14)}
  .card:active .cb,.tile:active b{opacity:1;transform:none}
  .card:active::after,.tile:active::after{display:block;animation:shineLoop 1.1s linear infinite;transition:none}
}
@media(prefers-reduced-motion:reduce){.card .cb,.tile b{transition:none}}

/* studio name: exactly as the developer typed it (no forced capitals or spacing) */
.stn{text-transform:none!important;letter-spacing:normal!important;font-variant:normal!important}