/* BroadcastGame mobile UI override v20260908_2043
   Main hub + broadcast tools. Loaded last so it only tightens mobile layout. */
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select,textarea{touch-action:manipulation}
@media(max-width:760px){
  html{scroll-padding-top:max(74px,env(safe-area-inset-top))}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  button,a,[role="button"]{min-height:42px}
  input,select,textarea{font-size:16px!important}
}

/* ===== Main / hub ===== */
@media(max-width:760px){
  #hubScreen{width:100%!important;max-width:100%!important;padding-left:8px!important;padding-right:8px!important;overflow:visible!important}
  #hubScreen .arcade-topbar{position:sticky!important;top:0!important;z-index:1000!important;display:grid!important;grid-template-columns:auto 1fr!important;gap:7px!important;padding:8px 6px!important;padding-top:max(8px,env(safe-area-inset-top))!important;min-width:0!important;backdrop-filter:blur(14px)}
  #hubScreen .arcade-brand-mini{min-width:0!important;align-self:start!important}
  #hubScreen .arcade-brand-mini b{font-size:11px!important;white-space:nowrap!important}
  #hubScreen .arcade-top-actions-compact{min-width:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;align-items:stretch!important}
  #hubScreen .recent-game-quick{grid-column:1/-1!important;width:100%!important;min-width:0!important;min-height:36px!important;padding:5px 8px!important;font-size:11px!important}
  #hubScreen .player-profile-pill,#hubScreen .attendance-pill,#hubScreen .hub-visitor-count{min-width:0!important;width:100%!important;min-height:38px!important;padding:5px 7px!important;justify-content:center!important;border-radius:12px!important;font-size:11px!important;overflow:hidden!important}
  #hubScreen .player-profile-name{display:block!important;max-width:76px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #hubScreen .theme-switch{grid-column:1/-1!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:7px!important;width:100%!important;font-size:10px!important}
  #hubScreen .theme-switch select{width:100%!important;min-width:0!important;height:36px!important}

  #hubScreen .arcade-hero-card{margin-top:8px!important;border-radius:18px!important;overflow:hidden!important}
  #hubScreen .arcade-hero-inner{min-height:170px!important;height:auto!important;padding:14px 12px!important}
  #hubScreen .lobby-mascot{width:min(38vw,150px)!important;height:auto!important;right:-10px!important;bottom:-2px!important;opacity:.94!important}
  #hubScreen .lobby-copy{max-width:72%!important;position:relative!important;z-index:2!important}
  #hubScreen .hub-title-banner{max-width:min(58vw,245px)!important;height:auto!important}
  #hubScreen .lobby-kicker{font-size:9px!important;margin:4px 0!important}
  #hubScreen .lobby-title{font-size:clamp(27px,8vw,40px)!important;line-height:.98!important;margin:3px 0 6px!important}
  #hubScreen .arcade-sub{font-size:11px!important;line-height:1.45!important;max-width:92%!important}

  #hubScreen .random-recommend-section{width:100%!important;max-width:100%!important;margin:10px 0!important;padding:0!important;overflow:hidden!important}
  #hubScreen .random-recommend-head{padding-left:2px!important;padding-right:2px!important}
  #hubScreen .recommend-viewport{width:100%!important;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important}
  #hubScreen .recommend-app-ad{margin:10px 0!important;border-radius:18px!important;padding:14px 10px 16px!important}
  #hubScreen .recommend-app-ad a.recommend-app-download-cta{width:100%!important;min-height:68px!important;border-radius:18px!important;padding:10px 12px!important}

  #hubScreen .home-game-tabs.home-category-menu{width:100%!important;display:block!important;margin:10px 0!important;overflow:visible!important}
  #hubScreen .home-menu-stack{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  #hubScreen .home-category-shell{width:100%!important;min-width:0!important}
  #hubScreen .home-category-btn{width:100%!important;min-width:0!important;min-height:78px!important;padding:11px 12px!important;border-radius:20px!important;gap:10px!important;box-shadow:0 4px 0 rgba(17,24,39,.14)!important}
  #hubScreen .category-icon{width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:17px!important;font-size:31px!important}
  #hubScreen .category-copy{display:grid!important;min-width:0!important;gap:3px!important;text-align:left!important}
  #hubScreen .category-copy strong{display:block!important;font-size:23px!important;line-height:1.05!important;white-space:normal!important}
  #hubScreen .category-copy small{display:block!important;font-size:11px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important}
  #hubScreen .category-chevron,#hubScreen .category-go{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:14px!important;font-size:30px!important}
  #hubScreen .home-submenu.broadcast-submenu{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:8px 0 0!important}
  #hubScreen .home-submenu.broadcast-submenu[hidden]{display:none!important}
  #hubScreen .home-submenu-link{min-width:0!important;min-height:62px!important;padding:9px 10px!important;border-radius:16px!important;gap:7px!important;justify-content:flex-start!important;overflow:hidden!important}
  #hubScreen .home-submenu-link span{font-size:22px!important;flex:0 0 auto!important}
  #hubScreen .home-submenu-link b{font-size:15px!important;line-height:1.18!important;white-space:normal!important;word-break:keep-all!important}

  #hubScreen .home-game-switcher{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #hubScreen .game-sub-tab{width:100%!important;min-width:0!important;min-height:82px!important;padding:10px!important;border-radius:18px!important;gap:7px!important;box-shadow:0 4px 0 rgba(17,24,39,.12)!important}
  #hubScreen .game-sub-tab>span:first-child{font-size:27px!important;flex:0 0 30px!important}
  #hubScreen .game-sub-tab .category-copy b{font-size:16px!important;line-height:1.1!important}
  #hubScreen .game-sub-tab .category-copy small{font-size:9.5px!important;line-height:1.25!important}
  #hubScreen .game-sub-tab em{display:none!important}

  #hubScreen .home-section{width:100%!important;min-width:0!important;margin-top:10px!important}
  #hubScreen .home-section-head{padding-left:2px!important;padding-right:2px!important}
  #hubScreen .home-game-grid,#hubScreen .game-library{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #hubScreen a.game-tile{min-width:0!important;width:100%!important;border-radius:16px!important;overflow:hidden!important}
  #hubScreen .tile-visual{width:100%!important;aspect-ratio:16/9!important;min-height:0!important;height:auto!important;overflow:hidden!important}
  #hubScreen .tile-photo{width:100%!important;height:100%!important;object-fit:cover!important}
  #hubScreen .tile-copy{padding:8px!important;min-width:0!important}
  #hubScreen .tile-copy strong{font-size:14px!important;line-height:1.15!important}
  #hubScreen .tile-copy small{font-size:9.5px!important;line-height:1.35!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  #hubScreen .arcade-floating-pill{max-width:100%!important}
}
@media(max-width:410px){
  #hubScreen .arcade-topbar{grid-template-columns:1fr!important}
  #hubScreen .arcade-brand-mini{display:none!important}
  #hubScreen .arcade-top-actions-compact{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #hubScreen .lobby-copy{max-width:77%!important}
  #hubScreen .home-submenu.broadcast-submenu{grid-template-columns:1fr!important}
  #hubScreen .home-game-switcher{grid-template-columns:1fr!important}
  #hubScreen .home-game-grid,#hubScreen .game-library{grid-template-columns:1fr!important}
  #hubScreen .game-sub-tab{min-height:68px!important}
}

/* ===== Shared broadcast-tool mobile top bars ===== */
@media(max-width:760px){
  .tool-topbar,.topbar{top:0!important;padding-top:max(8px,env(safe-area-inset-top))!important;max-width:100vw!important}
  .tool-topbar .tool-top-actions,.topbar .toplinks{max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  .tool-topbar .tool-top-actions::-webkit-scrollbar,.topbar .toplinks::-webkit-scrollbar{display:none!important}
  .tool-topbar .tool-switch-link,.tool-topbar .switch-tool,.topbar .toplink{flex:0 0 auto!important;white-space:nowrap!important;min-height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .tool-brand,.brand{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .nameplate-shell,.remove-shell,.page{max-width:100%!important;width:calc(100% - 12px)!important;margin-left:auto!important;margin-right:auto!important}
  .intro-card,.hero{max-width:100%!important;overflow:hidden!important}
  .tool-card,.preview-card,.help-card,.panel,.canvas-card,.card{max-width:100%!important;min-width:0!important}
  .toolbar{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
  .toolbar>*{flex:0 0 auto}
  .canvas-stage{width:100%!important;max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important}
  .canvas-wrap{max-width:100%!important}
  .tool-modal,.guide{max-width:100vw!important}
  .modal{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important;max-height:calc(100dvh - 24px)!important}
}

/* Nameplate */
@media(max-width:760px){
  .nameplate-shell{padding-bottom:max(18px,env(safe-area-inset-bottom))!important}
  .maker-grid,.editor-layout,.result-grid{grid-template-columns:1fr!important}
  .editor-sidebar,.editor-workspace{min-width:0!important;width:100%!important}
  .editor-text-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sticker-palette{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .result-actions,.editor-actions,.export-actions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .result-actions button,.editor-actions button,.export-actions button{width:100%!important;min-width:0!important}
}
@media(max-width:420px){.result-actions,.editor-actions,.export-actions{grid-template-columns:1fr!important}}

/* Background remover */
@media(max-width:760px){
  .remove-shell{margin-top:8px!important}
  .intro-card{padding:18px 14px!important;border-radius:18px!important}
  .intro-card h1{font-size:clamp(29px,9vw,38px)!important}
  .drop-zone{min-height:180px!important;padding:18px 12px!important}
  .preview-grid{grid-template-columns:1fr!important}
  .image-stage{height:auto!important;min-height:230px!important;aspect-ratio:1/1!important}
  .preview-controls{width:100%!important}
  .action-row{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .action-row>*{width:100%!important;min-width:0!important}
}
@media(max-width:420px){.action-row{grid-template-columns:1fr!important}}

/* Signature maker */
@media(max-width:760px){
  .page{padding:7px!important}
  .hero{padding:12px!important;flex-direction:column!important;align-items:stretch!important}
  .hero h1{font-size:22px!important}
  .layout{grid-template-columns:1fr!important;gap:8px!important}
  .left{grid-template-columns:1fr!important;width:100%!important}
  .panel{padding:10px!important;border-radius:13px!important}
  .ratio-grid{grid-template-columns:1fr 1fr!important}
  .bg-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .canvas-card{padding:7px!important;border-radius:13px!important}
  .canvas-stage{min-height:300px!important;padding:6px!important;max-height:none!important}
  .toolbar{margin-bottom:7px!important;flex-wrap:nowrap!important;padding-bottom:5px!important}
  .toolbar button{min-height:38px!important;padding:7px 9px!important;white-space:nowrap!important}
  .save-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .save-actions button{width:100%!important;min-width:0!important}
  .option-body .grid{grid-template-columns:1fr 1fr!important}
  .pen-dock-row{align-items:stretch!important}
  .pen-dock-row .control{min-width:0!important;width:100%!important}
}
@media(max-width:420px){.save-actions{grid-template-columns:1fr!important}.option-body .grid{grid-template-columns:1fr!important}}

/* Mission board */
@media(max-width:780px){
  .page{width:calc(100% - 8px)!important;margin-top:6px!important}
  .card{padding:6px!important}
  .toolbar{position:sticky!important;top:max(88px,env(safe-area-inset-top))!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding:6px!important;gap:5px!important}
  .tool-btn,.icon-btn,.ratio-control{flex:0 0 auto!important;min-height:38px!important}
  .contextbar{min-width:max-content!important;flex-wrap:nowrap!important}
  .canvas-stage{padding:5px!important;border-radius:14px!important}
  .canvas-wrap{width:min(100%,510px)!important}
  .toplinks{width:100%!important;justify-self:stretch!important;display:flex!important}
  .toplink{display:inline-flex!important}
  .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .object-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* v20260908_2043 final hub width fix is enforced inline in index.html to defeat stale mobile CSS cache. */