/* Native dialog lifecycle, with a small spring response on its opening control. */
.menu-toggle.menu-motion-ready{position:relative;isolation:isolate;overflow:hidden;min-width:44px;min-height:44px;gap:5px;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .24s,box-shadow .24s}
.menu-toggle.menu-motion-ready:before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--lime);border-radius:inherit;transform:translate3d(0,105%,0);transition:transform .42s cubic-bezier(.22,.8,.2,1);pointer-events:none}
.menu-toggle.menu-motion-ready>span{position:relative;z-index:1;width:18px;height:1.5px;justify-self:center;transform-origin:center;transition:width .32s cubic-bezier(.3,1.6,.5,1),transform .36s cubic-bezier(.3,1.6,.5,1)}
.menu-toggle.menu-motion-ready>span:last-child{width:12px;justify-self:center}
.menu-toggle.menu-motion-ready:is(:hover,:focus-visible,[aria-expanded=true]):before{transform:translate3d(0,0,0)}
.menu-toggle.menu-motion-ready:is(:hover,:focus-visible){transform:rotate(-4deg);box-shadow:0 5px 0 #282c2012}
.menu-toggle.menu-motion-ready:not([aria-expanded=true]):is(:hover,:focus-visible)>span:first-child{transform:translateX(-2px)}
.menu-toggle.menu-motion-ready:not([aria-expanded=true]):is(:hover,:focus-visible)>span:last-child{width:18px;transform:translateX(2px)}
.menu-toggle.menu-motion-ready[aria-expanded=true]>span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-toggle.menu-motion-ready[aria-expanded=true]>span:last-child{width:18px;transform:translateY(-3.25px) rotate(-45deg)}
.menu-toggle.menu-motion-ready:active{transform:scale(.92) rotate(0);box-shadow:none}
.menu-dialog.menu-motion-ready{overscroll-behavior:contain;scrollbar-gutter:stable}
.menu-dialog.menu-motion-ready:not([open]){pointer-events:none}
.menu-dialog.menu-motion-ready>.close-menu{min-width:44px;min-height:44px;display:grid;place-items:center;font-size:0;transition:transform .32s cubic-bezier(.3,1.5,.5,1),border-radius .25s}
.menu-dialog.menu-motion-ready>.close-menu:before,.menu-dialog.menu-motion-ready>.close-menu:after{content:"";position:absolute;width:20px;height:1.5px;background:var(--olive);transform:rotate(45deg);pointer-events:none}
.menu-dialog.menu-motion-ready>.close-menu:after{transform:rotate(-45deg)}
.menu-dialog.menu-motion-ready>.close-menu:hover{transform:rotate(90deg);border-radius:50%}
.menu-dialog.menu-motion-ready>.close-menu:active{transform:rotate(90deg) scale(.9)}
.menu-dialog.menu-motion-ready>.close-menu:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
.menu-motion-ready .menu-content{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(45px,8vw,160px);max-width:1660px;margin-inline:auto}
.menu-motion-ready .menu-collage{gap:18px;max-width:550px;width:100%;padding:10px 5px}
.menu-motion-ready .menu-collage>img{--menu-art-tilt:-4deg;display:block;width:100%;height:auto;min-height:0;aspect-ratio:4/3;object-fit:cover;filter:none;border-radius:10px;border:1px solid #f4f4ed28;background:#414632;box-shadow:0 12px 28px #10150c30;transform:rotate(var(--menu-art-tilt))}
.menu-motion-ready .menu-collage>img:nth-child(2){--menu-art-tilt:4deg}
.menu-motion-ready .menu-collage>img:nth-child(3){--menu-art-tilt:2deg}
.menu-motion-ready .menu-collage>img:nth-child(4){--menu-art-tilt:-3deg}
.menu-motion-ready .menu-collage>span{font-size:85px;line-height:1;background:var(--olive);padding:8px 22px 12px 12px;border:1px solid #f4f4ed24;border-radius:12px;box-shadow:0 12px 28px #10150c30;pointer-events:none}
.menu-motion-ready .menu-links{min-width:0;padding-left:26px;gap:3px}
.menu-motion-ready .menu-links>a{max-width:100%;transition:color .2s,transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:left center}
.menu-motion-ready .menu-links>a:is(:hover,:focus-visible){transform:translateX(8px);color:var(--lime)}
.menu-motion-ready .menu-links>a:focus-visible{outline:2px solid var(--lime);outline-offset:6px;border-radius:2px}
.menu-motion-ready .menu-footer{max-width:1660px;margin-inline:auto}
/* Keep the native top layer during a supported exit; no delayed close handlers. */
@supports (transition-behavior:allow-discrete){
  .menu-dialog.menu-motion-ready{opacity:0;transform:translate3d(0,-18px,0);transition:opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1),display .32s allow-discrete,overlay .32s allow-discrete}
  .menu-dialog.menu-motion-ready[open]{opacity:1;transform:translate3d(0,0,0)}
  .menu-dialog.menu-motion-ready::backdrop{background:#282c2000;transition:background .24s ease,display .32s allow-discrete,overlay .32s allow-discrete}
  .menu-dialog.menu-motion-ready[open]::backdrop{background:#282c20d9}
  @starting-style{
    .menu-dialog.menu-motion-ready[open]{opacity:0;transform:translate3d(0,-18px,0)}
    .menu-dialog.menu-motion-ready[open]::backdrop{background:#282c2000}
  }
}
@media(max-width:700px){
  .menu-dialog.menu-motion-ready{padding:86px 24px 25px}
  .menu-dialog.menu-motion-ready>.close-menu{top:16px;right:16px;width:44px;height:44px}
  .menu-motion-ready .menu-content{display:flex;flex-direction:column;align-items:stretch;min-height:calc(100svh - 175px);gap:24px}
  .menu-motion-ready .menu-collage{display:none}
  .menu-motion-ready .menu-links{gap:7px;padding-left:22px;justify-content:center;flex:1}
  .menu-motion-ready .menu-links>a{font-size:clamp(30px,9.7vw,50px);line-height:1.14}
  .menu-motion-ready .menu-links>a>span{top:14px;left:-22px}
  .menu-motion-ready .menu-footer{margin-top:24px;gap:10px;font-size:7px}
}
@media(max-width:700px) and (min-height:740px){
  .menu-motion-ready .menu-content{min-height:calc(100svh - 190px)}
  .menu-motion-ready .menu-collage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:7px;padding:4px 0}
  .menu-motion-ready .menu-collage>img{--menu-art-tilt:0deg!important;border-radius:6px;box-shadow:0 6px 14px #10150c24}
  .menu-motion-ready .menu-collage>span{display:none}
}
.motion-paused .menu-motion-ready,.motion-paused .menu-motion-ready *,.motion-paused .menu-motion-ready:before,.motion-paused .menu-motion-ready:after,.motion-paused .menu-motion-ready *:before,.motion-paused .menu-motion-ready *:after,.motion-paused .menu-dialog.menu-motion-ready::backdrop{animation:none!important;transition:none!important}
.motion-paused .menu-dialog.menu-motion-ready{opacity:1;transform:none}
.motion-paused .menu-toggle.menu-motion-ready:is(:hover,:focus-visible,:active),.motion-paused .menu-dialog.menu-motion-ready>.close-menu:is(:hover,:active),.motion-paused .menu-motion-ready .menu-links>a:is(:hover,:focus-visible){transform:none;box-shadow:none}
.motion-paused .menu-toggle.menu-motion-ready:not([aria-expanded=true])>span{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .menu-motion-ready,.menu-motion-ready *,.menu-motion-ready:before,.menu-motion-ready:after,.menu-motion-ready *:before,.menu-motion-ready *:after,.menu-dialog.menu-motion-ready::backdrop{animation:none!important;transition:none!important}
  .menu-dialog.menu-motion-ready{opacity:1;transform:none}
  .menu-toggle.menu-motion-ready:is(:hover,:focus-visible,:active),.menu-dialog.menu-motion-ready>.close-menu:is(:hover,:active),.menu-motion-ready .menu-links>a:is(:hover,:focus-visible){transform:none;box-shadow:none}
  .menu-toggle.menu-motion-ready:not([aria-expanded=true])>span{transform:none!important}
}

/* The new Arcade illustration keeps both the player and controls inside the frame. */
#arcade .arcade-display{aspect-ratio:4/3}