/* ═══ INTRO — la ruleta de la casa (capa de entrada, se genera en runtime) ═══ */
.gh-lock{overflow:hidden!important}
.gh-intro{position:fixed;inset:0;z-index:999;background:var(--soot);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;opacity:1;transition:opacity .45s ease}
.gh-intro.out{opacity:0}
.gh-intro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 44% at 50% 46%,rgba(242,176,30,.11),transparent 72%)}
.gh-wheel{position:relative;width:min(86vw,62vh,520px);height:min(86vw,62vh,520px)}
.gh-wheel svg{width:100%;height:100%;display:block}
/* el titulo del emblema manda sobre :lang(ar)/[dir=rtl], que si no lo pasa a serif arabe */
.gh-intro text{font-family:var(--display);font-weight:400}
#ghSpin{transform-box:view-box;transform-origin:108px 108px;will-change:transform}
#ghGlow{opacity:0}
.gh-intro.won #ghGlow{animation:ghGlow .6s ease-out}
.gh-intro.won #ghPtr{animation:ghBounce .5s cubic-bezier(.2,.9,.3,1)}
.gh-skip{position:relative;font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-3)}
@keyframes ghGlow{0%{opacity:0}28%{opacity:1}52%{opacity:.28}74%{opacity:.92}100%{opacity:0}}
@keyframes ghBounce{0%{transform:translateY(0)}35%{transform:translateY(-5px)}70%{transform:translateY(2px)}100%{transform:translateY(0)}}