/* Demanacita v33 — final mockup parity polish */

/* Personalized invite: envelope -> incoming -> Martina -> message -> languages */
body.invite-active .language-gate-card{display:flex;flex-direction:column;align-items:center}
body.invite-active .language-logo-heart{order:1}
body.invite-active .language-gate-kicker{display:none!important}
body.invite-active .language-brand-title{display:none!important}
body.invite-active .language-brand-subtitle{order:2}
body.invite-active .language-gate-card h1#languageTitle{order:3;margin:.35rem 0 .55rem!important;color:var(--arc-cream);font-size:clamp(1.25rem,4vw,1.7rem)!important}
body.invite-active .language-tagline{order:4;margin:.15rem auto .9rem!important;max-width:420px;font-size:1rem!important;line-height:1.55!important}
body.invite-active .language-gate-options{order:5}
body.invite-active .language-gate-note{order:6}
body.invite-active .press-start-sign,body.invite-active .language-gate-copy{display:none!important}

/* The start instruction is actually translated per language. */
body:not(.invite-active) .language-gate-option{flex-direction:column;gap:.25rem}
body:not(.invite-active) .language-gate-option small{display:block!important;color:#a9a4b5;font:700 .62rem/1.15 var(--arc-ui);letter-spacing:.03em}
body:not(.invite-active) .language-gate-option:nth-child(1) small{color:var(--arc-pink-2)}
body:not(.invite-active) .language-gate-option:nth-child(2) small{color:var(--arc-cyan)}
body:not(.invite-active) .language-gate-option:nth-child(3) small{color:var(--arc-yellow)}

/* Plan descriptions remain readable even though the cards are buttons. */
button.service-card.choice-card{font-family:var(--arc-body)!important;font-size:1rem!important}
button.service-card.choice-card h3{font-family:var(--arc-ui)!important;font-size:.9rem!important;line-height:1.28!important}
button.service-card.choice-card p{font-family:var(--arc-body)!important;font-size:.88rem!important;line-height:1.42!important;text-transform:none!important;letter-spacing:0!important}
button.service-card.choice-card .pill{font-family:var(--arc-ui)!important;font-size:.64rem!important}

/* v38: the hero CTA is a real guide to the cabinets, not a fake START button. */
.arcade-gate-heading{position:relative}
.arcade-start-guide{position:absolute;left:50%;bottom:-1.05rem;z-index:8;margin:0;max-width:min(92vw,460px);padding:.48rem .72rem;border:1px solid var(--arc-cyan);background:#060817;color:var(--arc-cream);box-shadow:0 0 0 2px rgba(37,230,221,.12),0 0 18px rgba(37,230,221,.2);font:700 clamp(.64rem,2.4vw,.76rem)/1.25 var(--arc-ui);letter-spacing:.035em;text-align:center;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,6px) scale(.97);transition:opacity .16s ease,transform .16s ease}
.arcade-start-guide.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.arcade-machine.is-machine-cued .arcade-screen-frame{animation:arcadeMachineWake .46s steps(2,end) 4;filter:brightness(1.08) saturate(1.1)}
.arcade-play.is-start-cued{position:relative;z-index:3;animation:arcadeStartCue .38s steps(2,end) 5;outline:2px solid var(--arc-yellow);outline-offset:3px;box-shadow:0 0 0 2px rgba(255,210,51,.18),0 0 24px rgba(37,230,221,.42)}
@keyframes arcadeMachineWake{0%,100%{filter:brightness(1.02) saturate(1.02)}50%{filter:brightness(1.38) saturate(1.35);box-shadow:0 0 0 2px var(--arc-cyan),0 0 22px rgba(255,77,148,.38)}}
@keyframes arcadeStartCue{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.055);box-shadow:0 0 0 2px rgba(255,210,51,.3),0 0 30px rgba(37,230,221,.58)}}

/* Give the game selection the dense panel proportions of the reference. */
@media(min-width:821px){
  .arcade-gate{max-width:1180px}
  .arcade-room{padding:1rem 1.25rem 1.15rem}
  .arcade-machine-grid{max-width:830px;gap:1.45rem}
  .arcade-cabinet-shell{width:min(100%,360px)}
  .arcade-screen{height:160px}
}

@media(max-width:820px){
  /* Keep every injected arcade component from establishing a wider min-content track. */
  .hero,.immersive-entry-copy,.arcade-gate,.arcade-room,.arcade-machine-grid,.arcade-accessibility-note{min-width:0!important;max-width:100%!important;width:100%!important}
  .immersive-entry-copy{overflow:hidden}

  /* The title screen keeps its game HUD on mobile, like the reference. */
  .language-hud .hud-player,.language-hud .hud-score{display:grid!important;min-width:96px;padding:.4rem .48rem}
  .language-hud .hud-player small,.language-hud .hud-score small{font-size:.56rem}
  .language-hud .hud-player strong,.language-hud .hud-score strong{font-size:.72rem}
  .language-hud .hud-hearts{font-size:.68rem;white-space:nowrap}
  .language-stage{padding-top:.55rem}
  .language-gate-shell{padding:.35rem 0 .8rem}
  .language-footer{font-size:.62rem;line-height:1.4;flex-wrap:wrap;gap:.3rem .55rem;padding-inline:.35rem}

  /* Cabinets become a horizontal arcade row instead of a very long vertical page. */
  .arcade-machine-grid{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:min(330px,86vw);overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scroll-padding-inline:.2rem;justify-content:start;gap:.75rem;padding:.15rem .15rem .8rem;scrollbar-width:thin}
  .arcade-machine{scroll-snap-align:center;width:100%;min-width:0}
  .arcade-cabinet-shell{width:100%!important;max-width:350px;margin-inline:auto}
  .arcade-machine-copy>p:first-child{font-family:var(--arc-body);font-size:.9rem;line-height:1.4}
  .arcade-accessibility-note{font-size:.88rem;overflow-wrap:anywhere}
  .arcade-start-guide{bottom:-1rem;max-width:88vw;font-size:.62rem;white-space:normal}

  /* Plans: one generous card at a time, with a peek of the next one. */
  .service-grid,.option-grid{grid-auto-columns:82%!important;gap:.7rem!important;padding-bottom:.8rem!important}
  button.service-card.choice-card{min-height:220px!important;padding:.9rem .8rem!important}
  button.service-card.choice-card h3{font-size:.88rem!important}
  button.service-card.choice-card p{font-size:.9rem!important}
}

@media(max-width:430px){
  .language-hud .hud-player,.language-hud .hud-score{min-width:91px}
  .language-hud .hud-player small,.language-hud .hud-score small{font-size:.53rem}
  .language-hud .hud-player strong,.language-hud .hud-score strong{font-size:.68rem}
  .language-logo-heart{margin-top:.2rem}
  body.invite-active .language-gate-card{padding:1rem .75rem!important}
  body.invite-active .language-tagline{font-size:.94rem!important}
  .arcade-machine-grid{grid-auto-columns:86vw}
  .service-grid,.option-grid{grid-auto-columns:84%!important}
}

@media(prefers-reduced-motion:reduce){
  .arcade-start-guide{transition:none}
  .arcade-machine.is-machine-cued .arcade-screen-frame,.arcade-play.is-start-cued{animation:none!important}
  .arcade-machine.is-machine-cued .arcade-screen-frame{box-shadow:0 0 0 2px var(--arc-cyan),0 0 18px rgba(37,230,221,.28)}
}