/* Shared styles for the professional free-play games (virtual coins only). */
.pro-game .hero { margin-bottom: .6rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pro-credit { font-family: var(--sans); font-size: .78rem; color: var(--muted); margin: .7rem 0 1.4rem; line-height: 1.5; }
.pro-credit a { color: var(--link); }
.pro-tools { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; font-family: var(--sans); font-size: .85rem; margin: .7rem 0 0; }
.pro-tools span { color: var(--muted); }
.pro-tiles { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.pro-tiles--games { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.pro-tile { display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #1c2638, #121a28); border: 1px solid rgba(224,176,74,.28); box-shadow: 0 14px 30px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.pro-tile:hover, .pro-tile:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 20px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(245,214,123,.35); }
.pro-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.pro-tiles--games .pro-tile img { aspect-ratio: 16 / 10; }
.pro-tile-body { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .95rem 1rem; font-family: var(--sans); }
.pro-tile-body b { font-size: 1.1rem; color: #fff; letter-spacing: .01em; }
.pro-tile-body small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.pro-tile-body em { margin-top: .45rem; align-self: flex-start; font-style: normal; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: #1a1406; background: linear-gradient(180deg, #ffe7a3, var(--gold)); padding: .35rem .8rem; border-radius: 99px; }
/* slot frame */
.slot-frame-wrap { position: relative; margin-top: .4rem; border-radius: 16px; overflow: hidden; background: #000;
  border: 1px solid rgba(224,176,74,.35); box-shadow: 0 18px 44px rgba(0,0,0,.5); aspect-ratio: 16 / 10.4; max-height: 86vh; }
.slot-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) and (orientation: portrait) { .slot-frame-wrap { aspect-ratio: auto; height: min(88vh, 860px); max-height: none; } }
@media (max-width: 640px) { .slot-frame-wrap { margin-inline: -0.6rem; border-radius: 10px; } }
/* On phones the tall site header should scroll away so the game gets the screen. */
@media (max-width: 640px) { body:has(.pro-game) .site-top { position: static; } }