/* JMIplay 5.28.781 — PUZZLE page assembly, flash-free controls and readable scroll motion: panels fly into their actual
   reserved positions from four directions.  No fake screenshots or clones.
   Layout dimensions never animate: keep grids, sticky, dropdowns and scrolling
   stable. Both themes share identical motion and timing. */
html.jmi-blocks-prep:not(.jmi-blocks-live) #jmi-main > :not(script):not(style):not(link):not(noscript):not([role="alert"]){opacity:0}
/* First-paint guard: the floating controls exist in HTML before the deferred
   builder runs. Hide them at the HEAD bootstrap stage, not after first paint.
   The guard is lifted atomically after floatIn() assigns its real keyframes.
   No guard is applied when reduced motion is requested. */
html.jmi-blocks-prep:not(.jmi-blocks-live) .jow-side .jow-s,
html.jmi-blocks-prep:not(.jmi-blocks-live) #jmiLiveChat:not(.open) #jlcBubble{opacity:0!important}
/* Search is outside #jmi-main. Keep it reserved until its own late header stage. */
html.jmi-blocks-prep:not(.jmi-blocks-live) #jmiHdrStack > :is(.gs-hang,.jmi-search-dock){opacity:0!important}
html.jmi-blocks-live #jmi-main{overflow:visible}
html.jmi-blocks-live .jmi-build-pending:not(.jmi-build-playing){opacity:0!important}
html.jmi-blocks-live .jmi-build-playing{
  animation:jmiSiteAssemble771 var(--jmi-build-duration,1180ms) cubic-bezier(.16,.86,.22,1) both!important;
  animation-delay:var(--jmi-build-delay,0ms)!important;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
/* Panels now start beyond the working canvas/viewport edge, so they visibly
   travel into place instead of materialising from an invisible strip. */
html.jmi-blocks-live [data-jmi-build="hero"]{--jmi-build-x:0px;--jmi-build-y:-190px;--jmi-build-scale:.965}
html.jmi-blocks-live [data-jmi-build="frame"]{--jmi-build-x:0px;--jmi-build-y:clamp(190px,30vh,360px);--jmi-build-scale:.96}
html.jmi-blocks-live [data-jmi-build="left"]{--jmi-build-x:calc(-1 * clamp(260px,42vw,760px));--jmi-build-y:0px;--jmi-build-scale:.968}
html.jmi-blocks-live [data-jmi-build="right"]{--jmi-build-x:clamp(260px,42vw,760px);--jmi-build-y:0px;--jmi-build-scale:.968}
html.jmi-blocks-live [data-jmi-build="rise"]{--jmi-build-x:0px;--jmi-build-y:clamp(190px,32vh,390px);--jmi-build-scale:.968}
html.jmi-blocks-live [data-jmi-build="down"]{--jmi-build-x:0px;--jmi-build-y:calc(-1 * clamp(180px,28vh,330px));--jmi-build-scale:.968}
html.jmi-blocks-live [data-jmi-build="search"]{--jmi-build-x:clamp(210px,28vw,430px);--jmi-build-y:-34px;--jmi-build-scale:.975}
html.jmi-blocks-live [data-jmi-build="under-header"]{--jmi-build-x:0px;--jmi-build-y:calc(-100% - 110px);--jmi-build-scale:1}
html.jmi-blocks-live [data-jmi-build="title"]{--jmi-build-x:calc(-1 * clamp(180px,26vw,430px));--jmi-build-y:0px;--jmi-build-scale:.984}
html.jmi-blocks-live [data-jmi-build="detail"]{--jmi-build-x:clamp(180px,26vw,430px);--jmi-build-y:0px;--jmi-build-scale:.988}
/* Lower cards wait for their real scroll position, then slide up as complete panels. */
html.jmi-blocks-live [data-jmi-build="scroll-rise"]{--jmi-build-x:0px;--jmi-build-y:clamp(125px,19vh,190px);--jmi-build-scale:.97}
/* A separate slower motion curve makes the card travel perceptible during
   scrolling, rather than completing almost instantly at the viewport edge. */
html.jmi-blocks-live [data-jmi-build="scroll-rise"].jmi-build-playing{
  animation-name:jmiScrollRise781!important;
  animation-timing-function:cubic-bezier(.24,.65,.25,1)!important;
}
@keyframes jmiScrollRise781{
  0%{opacity:0;transform:translate3d(0,var(--jmi-build-y,155px),0) scale(.97)}
  24%{opacity:.24;transform:translate3d(0,calc(var(--jmi-build-y,155px) * .78),0) scale(.978)}
  56%{opacity:.76;transform:translate3d(0,calc(var(--jmi-build-y,155px) * .32),0) scale(.99)}
  84%{opacity:.97;transform:translate3d(0,8px,0) scale(.998)}
  100%{opacity:var(--jmi-build-to,1);transform:translate3d(0,0,0) scale(1)}
}
html.jmi-blocks-live .nw-card.hid{--jmi-build-to:.55}
@keyframes jmiSiteAssemble771{
  0%{opacity:0;transform:translate3d(var(--jmi-build-x,0px),var(--jmi-build-y,0px),0) scale(var(--jmi-build-scale,.975))}
  18%{opacity:.18}
  58%{opacity:.88}
  100%{opacity:var(--jmi-build-to,1);transform:translate3d(0,0,0) scale(1)}
}
/* Navigation descends first. Do not transform sticky side rails or fixed UI. */
html.jmi-shell-ready #jmiHdrStack{
  animation:jmiSiteHeader771 1180ms cubic-bezier(.16,.86,.22,1) both!important;
}
@keyframes jmiSiteHeader771{
  0%{opacity:0;transform:translate3d(0,-145px,0)}
  30%{opacity:.7}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@media(max-width:640px){
  html.jmi-blocks-live [data-jmi-build="left"]{--jmi-build-x:-105vw}
  html.jmi-blocks-live [data-jmi-build="right"]{--jmi-build-x:105vw}
  html.jmi-blocks-live [data-jmi-build="rise"]{--jmi-build-y:38vh}
  html.jmi-blocks-live [data-jmi-build="frame"]{--jmi-build-y:34vh}
  html.jmi-blocks-live [data-jmi-build="hero"]{--jmi-build-y:-150px}
  html.jmi-blocks-live [data-jmi-build="down"]{--jmi-build-y:-32vh}
  html.jmi-blocks-live [data-jmi-build="search"]{--jmi-build-x:0px;--jmi-build-y:-22vh}
  html.jmi-blocks-live [data-jmi-build="title"]{--jmi-build-x:-72vw}
  html.jmi-blocks-live [data-jmi-build="detail"]{--jmi-build-x:72vw}
}
/* 780: Floating chat bubble and admin shortcuts arrive from OUTSIDE the
   viewport. Animate the controls themselves, never their fixed-position
   wrappers: chat drag/resize coordinates and right-rail layout stay intact. */
html .jow-side .jow-s.jmi-float-enter{
  pointer-events:none!important;
  --jmi-float-x:clamp(260px,100vw,1800px);--jmi-float-y:0px;
  animation:jmiFloatEnter780 var(--jmi-float-duration,1050ms) var(--jmi-float-delay,0ms) cubic-bezier(.17,.82,.2,1) both!important;
}
html #jmiLiveChat:not(.open) #jlcBubble.jmi-float-enter{
  pointer-events:none!important;
  --jmi-float-x:clamp(260px,100vw,1800px);--jmi-float-y:clamp(100px,22vh,280px);
  animation:jmiFloatEnter780 var(--jmi-float-duration,1150ms) var(--jmi-float-delay,0ms) cubic-bezier(.17,.82,.2,1) both!important;
}
@keyframes jmiFloatEnter780{
  0%{opacity:0;transform:translate3d(var(--jmi-float-x,0px),var(--jmi-float-y,0px),0) scale(.92)}
  32%{opacity:.3}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
/* Opening the chat is a slide-in too; keep user-dragged window geometry. */
html #jmiLiveChat.open:not(.dragged):not(.dragging):not(.resizing) #jlcPanel{
  animation:jmiChatPanelEnter780 1050ms cubic-bezier(.24,.65,.25,1) both;
}
@keyframes jmiChatPanelEnter780{
  0%{opacity:0;transform:translate3d(65vw,22vh,0) scale(.94)}
  100%{opacity:1;transform:none}
}
@media(max-width:900px){
  html .jow-side .jow-s.jmi-float-enter{--jmi-float-x:0px;--jmi-float-y:110vh}
}
@media(max-width:640px){
  html.jmi-blocks-live [data-jmi-build="scroll-rise"]{--jmi-build-y:24vh}
  html #jmiLiveChat.open:not(.dragged):not(.dragging):not(.resizing) #jlcPanel{animation-duration:950ms}
}
/* jmi-anim-off belongs to the optional Steam background only. */
/* Side controls are puzzle pieces too. Their resting/open transforms stay owned
   by their components; only the visible tabs travel in from beyond the viewport. */
html.jmi-shell-ready .side-holder-left .side-tab{animation:jmiSideTabFromLeft771 1050ms 720ms cubic-bezier(.16,.86,.22,1) both}
html.jmi-shell-ready .side-holder-right .side-tab{animation:jmiSideTabFromRight771 1050ms 720ms cubic-bezier(.16,.86,.22,1) both}
html.jmi-shell-ready .jmi-gr.jmi-gr-ready.jmi-gr-left .jmi-gr-tab{animation:jmiReleaseTabFromLeft771 1120ms 980ms cubic-bezier(.16,.86,.22,1) both}
html.jmi-shell-ready .jmi-gr.jmi-gr-ready.jmi-gr-right .jmi-gr-tab{animation:jmiReleaseTabFromRight771 1120ms 980ms cubic-bezier(.16,.86,.22,1) both}
@keyframes jmiSideTabFromLeft771{0%{opacity:0;transform:translate3d(-115vw,0,0)}100%{opacity:1;transform:none}}
@keyframes jmiSideTabFromRight771{0%{opacity:0;transform:translate3d(115vw,0,0)}100%{opacity:1;transform:none}}
@keyframes jmiReleaseTabFromLeft771{0%{opacity:0;transform:translate3d(-115vw,0,0)}100%{opacity:1;transform:none}}
@keyframes jmiReleaseTabFromRight771{0%{opacity:0;transform:translate3d(115vw,0,0)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  html.jmi-blocks-prep .jow-side .jow-s,
  html.jmi-blocks-prep #jmiLiveChat #jlcBubble,
  html.jmi-blocks-prep #jmi-main > *,
  html.jmi-blocks-live .jmi-build-pending,
  html.jmi-blocks-live .jmi-build-playing{opacity:revert!important;animation:none!important;transform:none!important;will-change:auto!important}
  html.jmi-shell-ready #jmiHdrStack,
  html.jmi-shell-ready .side-tab,
  html.jmi-shell-ready .jmi-gr-tab,
  html.jmi-shell-ready .jmi-float-enter,
  html #jmiLiveChat.open #jlcPanel{animation:none!important}
}