/* Demanacita v41 — desktop machine hierarchy + mobile arcade selectors */

/* Desktop: the real section title owns the instruction. The hero-side panel is now a helper action. */
.arcade-gate:not(.arcade-game-active) .arcade-gate-heading h2{
  letter-spacing:.035em;
  text-shadow:2px 2px 0 #075b63,0 0 18px rgba(37,230,221,.16);
}

/* Injected by arcade-shell-v33.js. Hidden on desktop: both cabinets stay visible side by side. */
.mobile-machine-switcher{display:none}

@media(max-width:820px){
  /* Mobile game choice becomes a two-state arcade menu instead of two full cabinets in sequence. */
  .mobile-machine-switcher{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.42rem;
    width:min(100%,370px);
    margin:0 auto .72rem;
    padding:.38rem;
    border:2px solid #343149;
    background:#050719;
    box-shadow:3px 3px 0 var(--arc-black);
  }
  .mobile-machine-switcher button{
    min-height:48px!important;
    padding:.52rem .42rem!important;
    border:2px solid #4d485c!important;
    background:#090b24!important;
    color:#bdb6c4!important;
    box-shadow:none!important;
    font:700 .66rem/1.25 var(--arc-ui)!important;
    letter-spacing:0!important;
    text-transform:uppercase!important;
  }
  .mobile-machine-switcher button:first-child{border-color:rgba(255,77,148,.58)!important}
  .mobile-machine-switcher button:last-child{border-color:rgba(37,230,221,.58)!important}
  .mobile-machine-switcher button.is-active{
    transform:none!important;
    background:#14122d!important;
    color:var(--arc-cream)!important;
    box-shadow:inset 0 -4px 0 var(--arc-yellow)!important;
    filter:brightness(1.12);
  }
  .mobile-machine-switcher button:first-child.is-active{color:var(--arc-pink-2)!important;box-shadow:inset 0 -4px 0 var(--arc-pink)!important}
  .mobile-machine-switcher button:last-child.is-active{color:var(--arc-cyan)!important;box-shadow:inset 0 -4px 0 var(--arc-cyan)!important}
  .mobile-machine-switcher button:focus-visible{outline:3px solid var(--arc-yellow)!important;outline-offset:3px!important}

  .arcade-machine-grid[data-mobile-active-game="runner"] .arcade-machine-invaders,
  .arcade-machine-grid[data-mobile-active-game="invaders"] .arcade-machine-runner{display:none!important}
  .arcade-machine-grid[data-mobile-active-game]{display:block!important;max-width:390px!important}
  .arcade-machine-grid[data-mobile-active-game] .arcade-machine{width:100%}
  .arcade-machine-grid[data-mobile-active-game] .arcade-cabinet-shell{margin-inline:auto}

  /* Plans: remove horizontal carousel. Show a compact, tappable two-column arcade menu. */
  .service-grid,.option-grid{
    display:grid!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    scroll-snap-type:none!important;
    padding:.1rem 0 .35rem!important;
  }
  button.service-card.choice-card,.service-card{
    min-height:208px!important;
    padding:.68rem .5rem!important;
    scroll-snap-align:none!important;
    gap:.42rem!important;
  }
  .service-card::before{
    width:48px!important;
    height:44px!important;
    margin-bottom:0!important;
    font-size:2rem!important;
  }
  .service-card h3{
    font-size:.72rem!important;
    line-height:1.32!important;
  }
  .service-card p{
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    font-size:.72rem!important;
    line-height:1.34!important;
  }
  .service-meta{gap:.24rem!important}
  .service-card .pill{
    padding:.3rem .36rem!important;
    font-size:.53rem!important;
    line-height:1.2!important;
  }
}

@media(max-width:360px){
  .service-grid,.option-grid{grid-template-columns:1fr!important}
  button.service-card.choice-card,.service-card{min-height:190px!important}
}

@media(prefers-reduced-motion:reduce){
  .mobile-machine-switcher button{transition:none!important}
}