/* Full legacy runtime audit, 2026-09-04.
 * site_game_types.php uses the shared inner.php Code-Pro/Roboto cascade and
 * its literal 130px/100px game hero.  Keep this scoped file as an explicit
 * source-map marker, but do not override the transferred shell bundle with
 * a short-capture serif fallback or invented hero spacing. */

/* Local AOS equivalent for the source blocks shared by site_game_types.php
 * and site_game_tags.php.  The class is added only after the controller is
 * ready, so no-JS and reduced-motion visitors keep all content visible. */
html.legacy-type-motion-ready .legacy-type-source [data-legacy-aos],
html.legacy-type-motion-ready .legacy-tag-source [data-legacy-aos]{
  opacity:0!important;
  transition-property:opacity,transform!important;
  transition-duration:.4s!important;
  transition-delay:0s!important;
  transition-timing-function:ease!important;
}
html.legacy-type-motion-ready .legacy-type-source [data-legacy-aos].is-visible,
html.legacy-type-motion-ready .legacy-tag-source [data-legacy-aos].is-visible{
  opacity:1!important;
  transform:none!important;
  transition-delay:var(--legacy-type-aos-delay,0ms)!important;
}
html.legacy-type-motion-ready [data-legacy-aos-delay="50"]{--legacy-type-aos-delay:50ms}
html.legacy-type-motion-ready [data-legacy-aos-delay="100"]{--legacy-type-aos-delay:100ms}
html.legacy-type-motion-ready [data-legacy-aos-delay="200"]{--legacy-type-aos-delay:200ms}
html.legacy-type-motion-ready [data-legacy-aos-delay="300"]{--legacy-type-aos-delay:300ms}
html.legacy-type-motion-ready [data-legacy-aos-delay="400"]{--legacy-type-aos-delay:400ms}
html.legacy-type-motion-ready [data-legacy-aos='fade-right']{transform:translate3d(-100px,0,0)!important}
html.legacy-type-motion-ready [data-legacy-aos='fade-left']{transform:translate3d(100px,0,0)!important}
html.legacy-type-motion-ready [data-legacy-aos='fade-up-right']{transform:translate3d(-100px,100px,0)!important}
html.legacy-type-motion-ready [data-legacy-aos='fade-up-left']{transform:translate3d(100px,100px,0)!important}
html.legacy-type-motion-ready [data-legacy-aos='fade-down-right']{transform:translate3d(-100px,-100px,0)!important}
html.legacy-type-motion-ready [data-legacy-aos='fade-down-left']{transform:translate3d(100px,-100px,0)!important}
html.legacy-type-motion-ready [data-legacy-aos='zoom-in']{transform:scale(.6)!important}
html.legacy-type-motion-ready [data-legacy-aos='zoom-in-up']{transform:translate3d(0,100px,0) scale(.6)!important}
html.legacy-type-motion-ready [data-legacy-aos='zoom-in-right']{transform:translate3d(-100px,0,0) scale(.6)!important}
html.legacy-type-motion-ready [data-legacy-aos='zoom-out-up']{transform:translate3d(0,100px,0) scale(1.2)!important}
@media(prefers-reduced-motion:reduce){
  .legacy-type-source [data-legacy-aos],.legacy-tag-source [data-legacy-aos]{opacity:1!important;transform:none!important;transition:none!important}
}

/* `style2.css` supplies the wide source CTA through `.page-top .btn`.
 * legacy-shell loads later for all routes, so restore that literal geometry
 * only on the structural game-type page rather than changing other CTAs. */
.legacy-public:has(.legacy-type-source) .page-top .btn_whatis{padding:7px 45px;border-radius:20px;color:#31225a;background:#fcea1c;font-size:22px;text-transform:uppercase}

/* `site_game_types.php` has the same mobile game hero as a game-detail page:
 * `.page-top` is 80/0/30 and its source heading keeps the 45px Code-Pro
 * line box.  The generic FastAPI game variant used a home-page padding
 * branch (20px side padding and 55px bottom padding), which shifted both
 * the h1 and the following source section.  The h2 adapter is semantic
 * only; retain the source 2.5em/normal geometry over the shared h2 reset. */
@media(max-width:767px){
  .legacy-public:has(.legacy-type-source) .page-top--game.wwhatis{padding:80px 0 30px}
  .legacy-public:has(.legacy-type-source) .page-top--game.wwhatis h1{font-size:30px;line-height:45px}
  .legacy-type-source .about__title{margin-bottom:30px;font-size:2.5em;line-height:normal}
}

/* site_game_types.php includes certificates.css immediately before its FAQ.
 * Keep that copied cascade and map legacy jQuery's `.active` state to native
 * details[open], without retaining the inaccessible click-only accordion. */
.legacy-type-source-faq .faq-accordeon-item{display:block}
.legacy-type-source-faq .faq-accordeon-item__q{display:block;list-style:none}
.legacy-type-source-faq .faq-accordeon-item__q::-webkit-details-marker{display:none}
.legacy-type-source-faq .faq-accordeon-item[open] .faq-accordeon-item__q{color:#3a3851;background:#fff}
.legacy-type-source-faq .faq-accordeon-item[open] .faq-accordeon-item__q::after{background-image:url('/static/legacy-source/images/icon-arrow-active.png')}

/* site_game_types.php puts the CTA in .info-graphics__button: a 150px
   clouds-bg panel with the yellow legacy action, not an unstyled text link. */
.legacy-type-source .legacy-infographics__text .legacy-lower-button{
  position:relative;z-index:1;display:flex;height:150px;align-items:center;
  justify-content:center;margin:0;color:#302509;background:transparent
  url('/static/legacy-source/images/clouds-bg.png') center/contain no-repeat;
  font-size:1.1em;font-weight:600;text-decoration:none;text-transform:uppercase;
}
.legacy-type-source .legacy-infographics__text .legacy-lower-button::before{
  position:absolute;z-index:-1;width:120px;height:42px;border-radius:22px;
  background:#fcea1c;content:'';
}
.legacy-type-source .legacy-infographics__text .legacy-lower-button:focus-visible{outline:2px solid #fcea1c;outline-offset:5px}
@media(max-width:767px){.legacy-type-source .legacy-infographics__text .legacy-lower-button{height:130px}}

/* Production slick normally hides non-current slides.  FastAPI keeps the
   same source DOM without slick, so restore that state declaratively. */
.legacy-type-source-infographics [data-legacy-gallery-item][hidden]{display:none!important}
.legacy-type-source-infographics .infographics-slider-wrapper{position:relative}
.legacy-type-source-infographics .legacy-infographics__gallery-controls{position:absolute;z-index:2;top:50%;right:0;left:0;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}
.legacy-type-source-infographics .legacy-infographics__gallery-controls button{border:0;color:#fcea1c;background:transparent;font-size:54px;pointer-events:auto;cursor:pointer}
.legacy-type-source-infographics .infographics-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:4px}
.legacy-type-source-infographics .infographics-thumbs__item{display:block;width:100%;overflow:hidden;padding:0;border:0;background:transparent;cursor:pointer}
.legacy-type-source-infographics .infographics-thumbs__item img{display:block;width:100%;height:100%;object-fit:cover}
.legacy-type-source-infographics .infographics-thumbs__item:focus-visible{outline:2px solid #fcea1c;outline-offset:2px}

/* `site_game_types.php` uses the mylightbox gallery: keep its in-page photo
   inspection instead of opening the PostgreSQL-backed full-size image in a tab. */
.legacy-gallery-dialog{width:min(1080px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;background:transparent;color:#fff}
.legacy-gallery-dialog::backdrop{background:rgb(0 0 0 / 82%)}
.legacy-gallery-dialog__box{position:relative;display:grid;max-height:inherit;place-items:center;padding:42px 52px 28px;background:#201f30;box-shadow:0 24px 70px rgb(0 0 0 / 55%)}
.legacy-gallery-dialog h2{width:100%;margin:0 0 15px;color:#fff;font-size:20px;font-weight:400;text-align:left}
.legacy-gallery-dialog img{display:block;max-width:100%;max-height:calc(100vh - 150px);object-fit:contain}
.legacy-gallery-dialog__close{position:absolute;top:8px;right:10px;display:grid;width:34px;height:34px;padding:0;border:1px solid rgb(255 255 255 / 65%);border-radius:50%;place-items:center;color:#fff;background:transparent;font-size:27px;line-height:1;cursor:pointer}
.legacy-gallery-dialog__close:hover,.legacy-gallery-dialog__close:focus-visible{border-color:#fcea1c;color:#302509;background:#fcea1c;outline:0}
@media(max-width:640px){.legacy-gallery-dialog__box{padding:40px 16px 16px}.legacy-gallery-dialog h2{font-size:16px}.legacy-gallery-dialog img{max-height:calc(100vh - 112px)}}