/* ═══════════════════════════════════════
    MOBILE FRAME — constrain to phone dimensions on desktop
    Add class "mobile-frame" to body on non-mobile UA
═══════════════════════════════════════ */
@media(min-width:769px){
  /* Container */
  html:has(body.mobile-frame){overflow-x:hidden}
  body.mobile-frame{max-width:430px;margin:0 auto;position:relative;box-shadow:-1px 0 0 rgba(255,255,255,.08),1px 0 0 rgba(255,255,255,.08);width:100%!important}
  body.mobile-frame #wrapper{overflow-x:hidden}
  /* Header — stack logo above title */
  body.mobile-frame header{width:100%;flex-direction:column;min-height:auto}
  body.mobile-frame header a{position:static;margin:0 auto;order:-1}
  body.mobile-frame header a.right{margin:0 auto}
  /* Sections — contained within the frame */
  body.mobile-frame section{min-width:100%;left:0;width:100%}
  /* Swipezone */
  body.mobile-frame #swipezone{width:430px;left:50%;margin-left:-215px}
  body.mobile-frame #transition{width:100%}
  /* Background canvas — full height */
  body.mobile-frame #bgCanvas{position:fixed;top:0;left:50%;margin-left:-215px;width:430px;height:100vh}
  /* Register form */
  body.mobile-frame .register{width:100%;box-sizing:border-box}
  body.mobile-frame .register form{width:100%;box-sizing:border-box}
  /* Form elements */
  body.mobile-frame form button{min-width:80%;max-width:100%;box-sizing:border-box}
  body.mobile-frame form input,
  body.mobile-frame form select,
  body.mobile-frame form textarea{max-width:100%!important;box-sizing:border-box}
  /* Nav links */
  body.mobile-frame .pagination .form,
  body.mobile-frame a.wall,
  body.mobile-frame form a.back,
  body.mobile-frame main a.back{min-width:50%;max-width:100%;box-sizing:border-box}
  /* Remote / betting buttons */
  body.mobile-frame .remote button{max-width:100%;box-sizing:border-box}
  /* Gradient canvas — full viewport behind the frame */
  body.mobile-frame #webGLApp{position:fixed!important;top:0;left:0;width:100vw!important;height:100vh!important;z-index:-1}
  /* Ext slider — force visible on desktop within frame */
  body.mobile-frame .ext-slider{display:block!important;width:430px;left:50%;right:auto;margin-left:-215px}
  body.mobile-frame .ext-slider.show{transform:translateY(0)}
}