/* In-flow controls; fog is clipped to empty exterior gutters, never a game overlay. */
html body #fm-spooky-controls {
  box-sizing:border-box; position:relative; inset:auto; transform:none;
  width:100%; max-width:640px; flex:0 0 auto; order:3;
  margin:6px auto; padding:0 6px; z-index:1;
  font:500 14px/1.4 system-ui,sans-serif; color:#f8eedb; text-align:center;
}
html body #fm-spooky-controls[hidden],html body .fm-spooky-fog-rail[hidden],html body .fm-spooky-fog-shelf[hidden] {display:none!important}
html body #fm-spooky-controls .fm-spooky-buttons {display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
html body #fm-spooky-controls button {
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; width:auto; max-width:100%; flex:1 1 135px;
  margin:0; padding:7px 9px; border:1px solid #aaa18e; border-radius:7px;
  background:#202a38; color:#fff2dc; font:700 14px/1.35 system-ui,sans-serif;
  text-shadow:none; box-shadow:none; letter-spacing:0; text-transform:none;
  white-space:normal; cursor:pointer; touch-action:manipulation; transform:none;
}
html body #fm-spooky-controls button[aria-pressed="true"] {background:#374a52; border-color:#b3d3c9}
html body #fm-spooky-controls button:focus-visible {outline:3px solid #8fe2e0; outline-offset:2px}
html body #fm-spooky-controls button:disabled {cursor:default; color:#ded7ca; opacity:1; background:#30333a}
html body #fm-spooky-controls p {font:500 14px/1.4 system-ui,sans-serif; margin:5px 0 0; color:#eee3cf; background:#151e2a; border-radius:4px; padding:3px 5px}
html body.pancake-playing #fm-spooky-controls p {display:none}
html body.pancake-playing #fm-spooky-controls {margin:4px auto 0; padding:0 4px; max-width:500px}
html body .fm-spooky-fog-rail {position:fixed; z-index:1; pointer-events:none!important; overflow:hidden; contain:strict; user-select:none}
html body .fm-spooky-mist {
  display:block; position:absolute; inset:-10% -70%; pointer-events:none!important;
  background:url('/games/fm-spooky-mist-20260923.webp') center/100% 100% no-repeat;
  opacity:.40; animation:fm-spooky-edge-drift 14s ease-in-out infinite alternate;
}
html body .fm-spooky-fog-rail[data-side="right"] .fm-spooky-mist {animation-duration:18s; animation-delay:-9s; opacity:.34}
@keyframes fm-spooky-edge-drift {from{transform:translateY(-13%)}to{transform:translateY(13%)}}
/* Reserved empty space beneath the board: visible even without side gutters. */
html body #fm-spooky-controls .fm-spooky-fog-shelf {display:block; position:relative; height:24px; margin:0 0 6px; border-radius:7px; overflow:hidden; contain:strict; background:#111a26; pointer-events:none!important}
html body .fm-spooky-fog-shelf .fm-spooky-mist {inset:-65px -48px; background-size:180px 150px; background-repeat:repeat-x; opacity:.42; animation:fm-spooky-bank-drift 12s ease-in-out infinite alternate}
@keyframes fm-spooky-bank-drift {from{transform:translateX(-32px)}to{transform:translateX(32px)}}
@media(max-width:600px){html body .fm-spooky-mist{opacity:.32}html body .fm-spooky-fog-rail[data-side="right"] .fm-spooky-mist{opacity:.28}html body .fm-spooky-fog-shelf .fm-spooky-mist{opacity:.38}}
@media(prefers-reduced-motion:reduce){html body .fm-spooky-fog-rail,html body #fm-spooky-controls .fm-spooky-fog-shelf{display:none!important}html body .fm-spooky-mist{animation:none!important}}
@media(forced-colors:active){html body .fm-spooky-fog-rail,html body #fm-spooky-controls .fm-spooky-fog-shelf{display:none!important}html body #fm-spooky-controls button{background:ButtonFace;color:ButtonText;border-color:ButtonText}html body #fm-spooky-controls p{background:Canvas;color:CanvasText}}