/* M1-MAFIA Mobile Rescue — common layer, loaded LAST on every page.
   Only mobile/tablet overrides. The shared header remains the single header. */
@media (max-width: 1024px){
  html, body { max-width:100%; }
  body { overflow-x:clip; }
  #app, main, .inner-main, .inner-wrap, .container, .layout,
  .m1-shop-main, .hosting-main, .distribution-main, .services-main, .management-main,
  .m1-cafes-main, .m1-scenarios-main {min-width:0;max-width:100%;}
  :where(img,video,canvas,svg){max-width:100%;}
  :where(input,select,textarea,button){max-width:100%;}
  :where(.page-grid,.m1-shop-product-grid,.m1-scenario-role-gallery,.role-grid,.m1-scenario-banners,
   .m1-deal-scenarios-layout,.m1-deal-choice-main,.m1-shop-detail-grid,.m1-shop-catalog,
   .distribution-flow,.distribution-scenario-fields,.m1-ve-add-grid,.m1-shop-checkgrid,
   .m1-host-phase-layout,.m1-host-form-grid,.m1-cafe-admin-grid) > * {min-width:0;}
  .m1-deal-scenario-sidebar {position:static;}
  .mg-board-scroll{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
}
@media(max-width: 760px){
  /* Speed: preserve functional flips, dice and active speaker; flatten decorative effects only. */
  #m1-shared-site-header{backdrop-filter:none!important;box-shadow:0 2px 10px rgba(0,0,0,.20)!important;}
  :where(.mg-panel,.m1-shop-product-card,.scenario-library-card,.role-card,
      .distribution-scenario-setup,.m1-host-game-panel,.m1-table-showcase,
      .hero-kicker,.m1-hdr-dropdown,.mg-board-wrap){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  .mg-shell,.mg-pro-pulse,.hero-logo,.m1-shop-product-card {animation:none!important;}
  .hero-slide{transition-duration:.3s!important;}
  .hero-slider-shell[data-effect="zoom"] .hero-slide{transform:none!important;}
  /* Homepage: separate artwork and action area; prevent overlap on short screens. */
  .hero.hero-slider,.hero-slider-shell,.hero-slides,.hero-slide {height:calc(100svh - 68px);min-height:540px;max-width:100%;}
  .hero-slide{display:block;overflow:hidden;}
  .hero-slide-bg--archive{top:0!important;left:0!important;right:0!important;width:100%!important;height:66%!important;background-position:52% 17%!important;}
  .hero-slide--archive .hero-slide-bg--archive::after{background:linear-gradient(180deg,transparent 53%,#120c0b 99%)!important;}
  .hero-content--archive{
    position:absolute!important;left:0!important;right:0!important;bottom:30px!important;top:auto!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:flex-end!important;text-align:center!important;width:100%!important;max-width:100%!important;
    padding:0 18px!important;margin:0!important;min-height:0!important;height:auto!important;
    background:none!important;transform:none!important;
  }
  .hero-content--archive .hero-logo{width:min(53vw,240px)!important;max-height:175px!important;margin:0 auto 3px!important;object-fit:contain!important;}
  .hero-content--archive .hero-title{font-size:clamp(16px,4.3vw,23px)!important;line-height:1.38!important;margin:0 0 5px!important;}
  .hero-content--archive .hero-subtitle{font-size:clamp(10px,2.8vw,13px)!important;line-height:1.5!important;margin:0 0 12px!important;}
  .hero-content--archive .hero-cta,.hero-slide--monopoly .hero-cta--monopoly{width:200px!important;min-width:200px!important;min-height:44px!important;font-size:13px!important;padding:0 15px!important;gap:11px!important;}
  .hero-slide--monopoly .hero-slide-bg--monopoly{width:100%!important;height:100%!important;background-position:77% center!important;background-size:cover!important;}
  .hero-slide--monopoly .hero-content--monopoly{position:absolute!important;top:auto!important;bottom:52px!important;right:50%!important;left:auto!important;transform:translateX(50%)!important;margin:0!important;padding:0!important;min-height:0!important;max-width:none!important;width:auto!important;height:auto!important;}
  .hero-nav-left{right:12px!important;left:auto!important;bottom:11px!important;top:auto!important;transform:none!important;}
  .hero-dot{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;}
  /* Content pages: reduce giant spacing and prevent side-by-side grids. */
  .inner-wrap,.roles-wrap,.scenarios-wrap,.m1-shop-main .inner-wrap,
  .hosting-wrap,.distribution-wrap,.services-wrap,.management-wrap {padding:22px 14px 46px!important;width:100%!important;max-width:100%!important;}
  .inner-main .roles-heading{align-items:flex-start!important;gap:8px!important;flex-wrap:wrap!important;}
  .inner-main .roles-heading-fa,.inner-main .roles-heading-en{max-width:100%;white-space:normal!important;overflow-wrap:anywhere;}
  .page-grid,.m1-shop-product-grid,.m1-scenario-banners,.m1-shop-detail-grid,.m1-shop-form-grid,
  .m1-host-form-grid,.m1-cafe-admin-grid,.m1-shop-checkgrid {grid-template-columns:1fr!important;}
  .m1-deal-scenarios-layout{display:flex!important;flex-direction:column!important;gap:14px!important;}
  .m1-deal-scenario-sidebar{width:100%!important;max-width:100%!important;padding:12px!important;}
  .m1-deal-scenario-list{display:flex!important;flex-flow:row nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;gap:8px!important;max-height:none!important;scrollbar-width:thin;overscroll-behavior-x:contain;padding:0 0 7px!important;}
  .m1-deal-scenario-item{min-width:165px!important;width:165px!important;flex:0 0 165px!important;min-height:57px!important;padding:9px 12px!important;font-size:12px!important;scroll-snap-align:start;}
  .m1-deal-side-heading{padding:3px 4px 8px!important;margin-bottom:7px!important;}
  .m1-deal-side-heading h3{font-size:16px!important;margin-top:4px!important;}
  .m1-deal-v2 .distribution-scenario-setup{min-height:0!important;padding:15px!important;}
  .m1-deal-count-buttons,.m1-deal-role-filters{gap:7px!important;}
  .m1-deal-count{min-height:42px!important;min-width:0!important;flex:1 1 125px!important;padding:8px 12px!important;font-size:12px!important;}
  .distribution-role-grid,.m1-deal-checkbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .distribution-mask-screen,.distribution-mask-theater{width:100%;max-width:100%;}
  /* Live voice/chat and cafe/booking: vertical stack without clipped actions. */
  .container,.layout {padding-inline:12px!important;}
  .room-grid,.columns,.m1-voice-chat,.m1-create-grid,.m1-room-control-strip,
  .m1-cafe-admin-grid,.m1-table-showcase-head,.m1-real-table-header {grid-template-columns:1fr!important;}
  .m1-table-board{max-width:100%!important;}
  .m1-table-selector,.m1-comms-actions,.m1-room-control-strip{flex-wrap:wrap!important;}
  #m1-live-table-area{max-width:100%;min-width:0;}
  .m1-chat-messages,.m1-chat-panel{min-width:0;}
  /* Monopoly: board can fit first, scroll/zoom deliberately for reading details. */
  .mg-root{padding:12px 10px 44px!important;max-width:100%!important;}
  .mg-layout,.mg-side,.mg-root.mg-focus-mode .mg-layout,.mg-root.mg-focus-mode .mg-side{grid-template-columns:1fr!important;gap:12px!important;}
  .mg-root.mg-focus-mode .mg-action-panel{grid-column:auto!important;}
  .mg-top{display:grid!important;gap:12px!important;}
  .mg-top h1{font-size:24px!important;}
  .mg-top-actions{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:7px!important;padding-bottom:9px!important;scrollbar-width:thin;overscroll-behavior-x:contain;}
  .mg-top-actions .mg-btn{flex:0 0 auto!important;white-space:nowrap!important;min-height:39px!important;}
  .mg-pro-hud{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .mg-pro-turn,.mg-pro-focus{grid-column:1/-1!important;}
  .mg-phase-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .mg-board-wrap{max-width:100%!important;min-width:0!important;padding:10px 6px!important;overflow:hidden!important;}
  .mg-board-scroll{width:100%!important;max-width:100%!important;display:block!important;overflow-x:auto!important;overflow-y:hidden!important;padding:5px 0 12px!important;}
  .mg-board-stage{transform:none!important;zoom:var(--board-scale,1);transform-origin:top left!important;padding:5px!important;width:max-content!important;}
  .mg-board{width:620px!important;min-width:620px!important;max-width:none!important;aspect-ratio:1!important;transform:none!important;}
  .mg-depth-mode .mg-board{transform:none!important;}
  .mg-token,.mg-motion-token{filter:none!important;}
  .mg-center .mg-dice-3d .mg-die-cube:not(.is-tumbling){will-change:auto!important;}
  .mg-pro-activity,.mg-leaderboard,.mg-panel{min-width:0;}
  .mg-dialog{max-width:calc(100vw - 22px)!important;padding:18px!important;}
}
@media(max-width:400px){
 #m1-shared-site-header .m1-hdr-inner{padding:0 7px!important;gap:2px!important;}
 #m1-shared-site-header .m1-hdr-brand img{width:116px!important;}
 #m1-shared-site-header .m1-hdr-icon{width:30px!important;min-width:30px!important;padding:4px!important;}
 #m1-shared-site-header .m1-hdr-menu-button{width:35px!important;min-width:35px!important;}
 .mg-phase-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 .hero-slide,.m1-table-seat,.mg-motion-token,.mg-die-cube{transition:none!important;animation:none!important;}
}

/* Skip paint/layout of distant catalog cards on mobile while leaving semantics and interaction intact. */
@media (max-width:760px){
 .m1-shop-product-card,.m1-scenario-role-card,.scenario-library-card,
 .m1-host-archive-card,.role-card:not(.is-active){
  content-visibility:auto;
  contain-intrinsic-size:auto 260px;
 }
 .m1-real-table-area .m1-table-board,
 .m1-table-board,.mg-board-wrap{box-shadow:0 10px 23px rgba(0,0,0,.35)!important;}
 .m1-table-seat{box-shadow:0 3px 6px rgba(0,0,0,.32)!important;}
}

/* Monopoly Smart Board vNext: replace old forced 620px desktop board on phones. */
@media (max-width:760px){
 body[data-page="monopoly"] .mg-root .mg-board{width:100%!important;min-width:0!important;max-width:100%!important;aspect-ratio:1/1!important;min-height:0!important}
 body[data-page="monopoly"] .mg-board-wrap{overflow:visible!important}
 body[data-page="monopoly"] .mg-center{max-width:100%;min-width:0}
}