/* ==========================================================================
   NEXTBALL - MOBILE UI (phones + tablets)
   Loaded last. Every rule is scoped to html.is-mobile (set by mobile.js), so
   desktop is untouched. Layout classes come from mobile.js and follow what the
   player actually sees (also while the page is turned for pseudo landscape):
     m-phone  smaller side < 600px      m-port / m-land  orientation
     m-short  height < 520px            m-narrow         width < 380px
   ========================================================================== */

html.is-mobile, html.is-mobile body { overflow-x: hidden; max-width: 100%; }
html.is-mobile body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-mobile img, html.is-mobile video, html.is-mobile iframe { max-width: 100%; }
html.is-mobile .screen { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   1. PSEUDO LANDSCAPE: the page is turned 90deg while a match runs on a phone
      that stays in portrait (rotation lock, Instagram / TikTok browsers)
   ========================================================================== */
html.is-mobile.pseudo-land, html.is-mobile.pseudo-land body { overflow: hidden !important; height: 100%; }
html.is-mobile.pseudo-land body {
    position: fixed !important; top: 0; left: 0; margin: 0;
    width: var(--pl-w) !important; height: var(--pl-h) !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
    transform-origin: 0 0; transform: translateX(var(--pl-h)) rotate(90deg);
}
html.is-mobile.pseudo-land #game-screen,
html.is-mobile.pseudo-land .screen { width: 100% !important; height: 100% !important; }
html.is-mobile.pseudo-land .rotate-overlay { display: none !important; }
/* safe areas follow the turn: the notch is on the page's left, the home bar on its right */
html.is-mobile.pseudo-land body.is-mobile {
    --safe-top: env(safe-area-inset-right, 0px); --safe-right: env(safe-area-inset-bottom, 0px);
    --safe-bottom: env(safe-area-inset-left, 0px); --safe-left: env(safe-area-inset-top, 0px);
}
/* vh / vw still measure the upright screen: size from the turned page instead */
html.is-mobile.pseudo-land.m-short .modal > .modal-content,
html.is-mobile.pseudo-land.m-short .modal-overlay .modal { max-height: var(--pl-h) !important; }
html.is-mobile.pseudo-land #game-chat-panel { height: calc(var(--pl-h) * .6) !important; }
html.is-mobile.pseudo-land.m-short #global-chat-panel { height: calc(var(--pl-h) * .78) !important; }
html.is-mobile.pseudo-land #lobby-screen .player-list { max-height: calc(var(--pl-h) * .52) !important; }
html.is-mobile.pseudo-land .context-menu { max-width: calc(var(--pl-w) - 16px); max-height: calc(var(--pl-h) - 16px); }
html.is-mobile.pseudo-land .social-panel { width: 100% !important; max-width: 100% !important; }
html.is-mobile.pseudo-land .touch-chat-float { max-width: calc(var(--pl-w) * .45) !important; }

/* Rotate gate */
html.is-mobile .rotate-overlay { padding: 24px 24px calc(24px + var(--safe-bottom, 0px)); }
html.is-mobile .rotate-overlay h2 { font: 700 22px/1.15 var(--f-display, system-ui); text-transform: uppercase; letter-spacing: .02em; }
html.is-mobile .rotate-overlay .rotate-go { margin-top: 10px; min-height: 48px; padding: 0 20px; font-size: 15px; border-radius: var(--r, 6px); max-width: 100%; }
html.is-mobile .rotate-overlay .rotate-hint { color: rgba(255, 255, 255, .55); font-size: 12.5px; max-width: 300px; line-height: 1.4; }

/* ==========================================================================
   2. HOME
   ========================================================================== */
/* Header: logo + hamburger, links live in the drawer */
html.is-mobile #main-menu .header-top:has(> .m-nav-btn) {
    height: calc(52px + var(--safe-top, 0px)) !important; padding: var(--safe-top, 0px) 8px 0 14px !important;
    flex-wrap: nowrap !important; gap: 8px !important; justify-content: space-between;
}
/* safety net if the menu button could not be built: the links wrap under the logo instead of piling on it */
html.is-mobile #main-menu .header-top:not(:has(> .m-nav-btn)) { height: auto !important; flex-wrap: wrap !important; padding: calc(8px + var(--safe-top, 0px)) 12px 8px !important; row-gap: 6px !important; }
html.is-mobile #main-menu .header-top:not(:has(> .m-nav-btn)) .header-buttons { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 2px 4px !important; }
html.is-mobile #main-menu .menu-header .logo { font-size: 18px !important; min-width: 0; white-space: nowrap; }
html.is-mobile.m-narrow #main-menu .menu-header .logo .beta-tag { display: none; }
html.is-mobile #main-menu .tagline { display: none; }
.m-nav-btn { display: none; }
html.is-mobile .m-nav-btn {
    position: relative; display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r, 6px);
    background: transparent; color: var(--fg-0, #fff); cursor: pointer;
}
html.is-mobile .m-nav-btn:active, html.is-mobile .m-nav-btn[aria-expanded="true"] { background: var(--bg-2, #1d2129); }
.m-nav-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #FF6A13); box-shadow: 0 0 0 2px var(--bg-0, #0F1115); }
.m-nav-dot[hidden] { display: none; }

/* Drawer */
.m-nav { display: none; }
html.is-mobile .m-nav { display: block; position: fixed; inset: 0; z-index: 1200; pointer-events: none; visibility: hidden; transition: visibility 0s linear .22s; }
html.is-mobile .m-nav.open { pointer-events: auto; visibility: visible; transition: visibility 0s; }
.m-nav-scrim { position: absolute; inset: 0; background: rgba(5, 6, 9, .6); opacity: 0; transition: opacity .2s; }
.m-nav.open .m-nav-scrim { opacity: 1; }
.m-nav-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
    display: flex; flex-direction: column; background: var(--bg-1, #15181e);
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .9);
    transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
    padding: var(--safe-top, 0px) var(--safe-right, 0px) var(--safe-bottom, 0px) 0;
}
.m-nav.open .m-nav-panel { transform: none; }
.m-nav-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 6px 0 18px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); flex: none; }
.m-nav-head b { font: 700 15px/1 var(--f-display, system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-0, #fff); }
.m-nav-x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--fg-1, #ccc); font-size: 28px; line-height: 1; border-radius: var(--r, 6px); cursor: pointer; }
.m-nav-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px 16px; }
html.is-mobile .m-nav-body .header-buttons { display: flex !important; flex-direction: column; align-items: stretch; gap: 2px !important; width: 100%; }
html.is-mobile .m-nav-body .header-buttons > * {
    display: flex !important; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; height: 48px !important; min-height: 48px; padding: 0 12px !important; margin: 0 !important;
    font: 700 14px/1 var(--f-display, system-ui) !important; letter-spacing: .04em; text-transform: uppercase;
    color: var(--fg-0, #fff) !important; background: transparent !important; border: 0 !important; border-radius: var(--r, 6px) !important;
    text-decoration: none; box-shadow: none !important; transform: none !important;
}
html.is-mobile .m-nav-body .header-buttons > *:active { background: var(--bg-2, #1d2129) !important; }
html.is-mobile .m-nav-body .header-buttons > * > span:not([hidden]) { display: inline !important; }
html.is-mobile .m-nav-body .header-buttons .btn-social-badge:not([hidden]) { display: inline-flex !important; position: static !important; margin-left: 6px; }
html.is-mobile .m-nav-body .btn-social-label { display: inline !important; }
html.is-mobile .m-nav-body .btn-social .btn-social-count { margin-left: auto; }
html.is-mobile .m-nav-body .btn-x::after { content: 'X (Twitter)'; }
html.is-mobile .m-nav-body .btn-ig::after { content: 'Instagram'; }
html.is-mobile .m-nav-body .btn-yt::after { content: 'YouTube'; }
html.is-mobile .m-nav-body .btn-x svg, html.is-mobile .m-nav-body .btn-ig svg, html.is-mobile .m-nav-body .btn-yt svg, html.is-mobile .m-nav-body .btn-discord svg { width: 18px; height: 18px; flex: none; }
html.is-mobile .m-nav-body .btn-whatsnew.has-new::after { position: static; margin-left: auto; }
body.m-nav-open { overflow: hidden; }

/* Player strip */
html.is-mobile.m-phone .user-profile-bar { margin: 12px auto 0 !important; gap: 10px !important; flex-direction: column; align-items: stretch !important; width: calc(100% - 24px) !important; }
html.is-mobile.m-phone .user-info { flex-wrap: wrap; height: auto !important; min-height: 36px; gap: 8px 10px !important; min-width: 0; }
html.is-mobile.m-phone .user-name-stack { min-width: 0; flex: 1 1 120px; display: inline-flex; flex-direction: column; gap: 4px; }
html.is-mobile.m-phone .user-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
html.is-mobile.m-phone .user-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
html.is-mobile.m-phone.m-land .user-actions { display: flex !important; flex-wrap: wrap; }
html.is-mobile.m-phone.m-land .user-actions > .btn { flex: 1 1 88px; width: auto; }
html.is-mobile.m-phone .user-actions > .btn {
    width: 100%; min-width: 0; height: auto !important; min-height: 52px; padding: 6px 4px !important; margin: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: var(--bg-1, #15181e) !important; border-radius: var(--r, 6px) !important; color: var(--fg-1, #ccc) !important;
    font-size: 10.5px !important; letter-spacing: .06em; white-space: nowrap; overflow: hidden; position: relative;
}
html.is-mobile.m-phone .user-actions > .btn > span { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html.is-mobile.m-phone .user-actions > .btn svg { width: 18px !important; height: 18px !important; }
html.is-mobile.m-phone .user-actions > .btn .dc-chip,
html.is-mobile.m-phone .user-actions > .btn .inv-chip { position: absolute; top: 3px; right: 3px; font-size: 9px !important; padding: 1px 4px !important; line-height: 1.2; margin: 0 !important; }
html.is-mobile.m-phone .user-actions > .btn-primary { background: var(--orange, #FF6A13) !important; color: var(--orange-ink, #1a0900) !important; }
html.is-mobile.m-phone .user-actions > .btn-danger { color: #ff8b87 !important; }
html.is-mobile.m-phone .user-actions > .btn.hidden,
html.is-mobile.m-phone .user-actions > .btn[hidden],
html.is-mobile.m-phone .user-actions > .btn[style*="display: none"],
html.is-mobile .m-nav-body .header-buttons > .hidden,
html.is-mobile .m-nav-body .header-buttons > [hidden],
html.is-mobile .m-nav-body .header-buttons > [style*="display: none"] { display: none !important; }
html.is-mobile.m-phone .user-guest-hint { white-space: normal !important; text-align: left; line-height: 1.25; max-width: 100%; }

/* Tiles */
html.is-mobile.m-phone #main-menu .menu-container { gap: 18px !important; padding-bottom: calc(24px + var(--safe-bottom, 0px)) !important; }
html.is-mobile.m-phone #main-menu .menu-container > * { width: calc(100% - 24px) !important; }
html.is-mobile.m-phone #main-menu .menu-container > .menu-header { width: 100% !important; }
html.is-mobile.m-phone .main-actions { gap: 10px !important; }
html.is-mobile.m-phone.m-port .play-btn-hero { min-height: 250px !important; }
html.is-mobile.m-phone.m-land .play-btn-hero { min-height: 220px !important; }
html.is-mobile.m-phone .play-btn-hero .play-content { padding: 0 16px 76px 16px !important; }
html.is-mobile.m-phone .play-btn-hero .play-title.play-title-ranked { font-size: clamp(40px, 12vw, 64px) !important; }
html.is-mobile.m-phone .play-btn-hero .play-badge { left: 16px !important; right: 16px !important; bottom: 16px !important; min-height: 46px; }
html.is-mobile.m-phone .hero-demo { top: 10px !important; right: 12px !important; }
html.is-mobile .play-btn-hero .hero-tag { display: none !important; }
html.is-mobile.m-phone.m-land .user-actions > .btn { min-height: 50px; }
html.is-mobile.m-phone .play-btn-row { min-height: 96px !important; }
html.is-mobile.m-phone .secondary-actions .action-btn { min-height: 112px !important; }
html.is-mobile.m-phone .stats-bar { gap: 8px !important; }
html.is-mobile.m-phone .bottom-row { grid-template-columns: 1fr !important; gap: 12px !important; }
html.is-mobile.m-phone .season-zone { padding: 16px !important; }
html.is-mobile.m-phone .season-zone-content { grid-template-columns: 1fr !important; }

/* Sign-up nudge on phones: a card in the page under the play tiles, not a banner over them */
html.is-mobile.m-phone #main-menu .menu-container > .signup-nudge:not(.hidden) {
    position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
    width: calc(100% - 24px) !important; max-width: none; margin: 0 auto !important; order: 1; box-shadow: none !important; animation: none !important;
}
html.is-mobile.m-phone #main-menu .menu-container > .main-actions ~ *:not(.signup-nudge) { order: 2; }
/* Banners (sign-up nudge, install card): compact, never on top of a dialog */
html.is-mobile #main-menu .menu-container > .signup-nudge,
html.is-mobile .pwa-card { left: 10px !important; right: 10px !important; bottom: calc(10px + var(--safe-bottom, 0px)) !important; width: auto !important; max-width: 520px; margin: 0 auto !important; }
html.is-mobile .pwa-card { padding: 10px 10px 10px 12px !important; gap: 10px !important; }
html.is-mobile .pwa-card img { width: 36px; height: 36px; }
html.is-mobile .pwa-card .pwa-x, html.is-mobile .signup-nudge-x { min-width: 40px; min-height: 40px; }
html.is-mobile.m-short .pwa-card { display: none !important; }
body.m-layer-open .pwa-card, body.m-in-lobby .pwa-card, body.m-in-game .pwa-card { display: none !important; }
html.is-mobile:not(.m-phone) body.m-layer-open #main-menu .menu-container > .signup-nudge,
html.is-mobile:not(.m-phone) body:has(#pwa-card) #main-menu .menu-container > .signup-nudge { display: none !important; }

/* ==========================================================================
   3. DIALOGS
   Phones in portrait: bottom sheets (thumb reach), up to the top safe area.
   Short screens (landscape phones): full height, centred column.
   ========================================================================== */
html.is-mobile .modal { max-height: none !important; }
html.is-mobile.m-phone .modal,
html.is-mobile.m-short .modal { padding: 0 !important; }
html.is-mobile.m-phone.m-port .modal:not(.auth-screen) { align-items: flex-end !important; }
html.is-mobile.m-phone.m-port .modal > .modal-content {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    max-height: calc(100dvh - var(--safe-top, 0px) - 10px) !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: calc(20px + var(--safe-bottom, 0px)) !important;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.is-mobile.m-short .modal > .modal-content {
    width: min(100%, 760px) !important; max-width: 100% !important; margin: 0 auto !important;
    height: auto; max-height: 100dvh !important; border-radius: 0 !important;
    padding-left: max(20px, var(--safe-left, 0px)) !important; padding-right: max(20px, var(--safe-right, 0px)) !important;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html.is-mobile.m-short .modal:not(.auth-screen) { align-items: stretch !important; }
/* header stays reachable while the content scrolls */
html.is-mobile.m-phone .modal-content > .modal-header,
html.is-mobile.m-short .modal-content > .modal-header { position: sticky !important; top: -20px; z-index: 5; }
html.is-mobile.m-short .modal-content > .modal-header { padding-top: 10px !important; padding-bottom: 10px !important; }
html.is-mobile.m-phone .modal-content > .modal-footer,
html.is-mobile.m-short .modal-content > .modal-footer { position: sticky; bottom: -20px; z-index: 5; flex-wrap: wrap; }
html.is-mobile.m-phone.m-port .modal-content > .modal-footer { bottom: calc(-20px - var(--safe-bottom, 0px)); padding-bottom: calc(12px + var(--safe-bottom, 0px)); }
html.is-mobile .modal-header .btn-close, html.is-mobile .modal-header .close-btn { min-width: 44px; min-height: 44px; }
html.is-mobile.m-phone .modal-header h2 { font-size: 18px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* JS-built dialogs (settings, moderation, room settings) */
html.is-mobile.m-phone .modal-overlay, html.is-mobile.m-short .modal-overlay { padding: 0 !important; }
html.is-mobile.m-phone.m-port .modal-overlay { align-items: flex-end !important; }
html.is-mobile.m-phone .modal-overlay .modal,
html.is-mobile.m-short .modal-overlay .modal {
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    max-height: calc(100dvh - var(--safe-top, 0px) - 10px) !important; overflow-y: auto !important;
    overscroll-behavior: contain;
}
html.is-mobile.m-phone.m-port .modal-overlay .modal { border-radius: 16px 16px 0 0 !important; padding-bottom: var(--safe-bottom, 0px) !important; }
html.is-mobile.m-short .modal-overlay { align-items: stretch !important; }
html.is-mobile.m-short .modal-overlay .modal { width: min(100%, 760px) !important; max-height: 100dvh !important; border-radius: 0 !important; }
html.is-mobile.m-phone .modal-overlay .modal .modal-header,
html.is-mobile.m-short .modal-overlay .modal .modal-header { position: sticky; top: 0; z-index: 5; }
html.is-mobile.m-phone .modal-overlay .modal .modal-footer,
html.is-mobile.m-short .modal-overlay .modal .modal-footer { position: sticky; bottom: 0; z-index: 5; flex-wrap: wrap; }
html.is-mobile.m-short #settings-modal .modal, html.is-mobile.m-phone #settings-modal .modal { max-height: 100dvh !important; }

/* Forms inside dialogs: one column, comfortable targets */
html.is-mobile.m-phone #create-room-form { grid-template-columns: 1fr !important; }
html.is-mobile.m-phone.m-port #create-room-modal .fm-picker { grid-template-columns: 1fr 1fr !important; }
html.is-mobile.m-narrow #create-room-modal .fm-picker { grid-template-columns: 1fr !important; }
html.is-mobile.m-short #create-room-modal .fm-picker { grid-template-columns: repeat(3, 1fr) !important; }
html.is-mobile #create-room-form > button[type="submit"] { min-height: 50px; }
html.is-mobile .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.is-mobile .modal select { min-height: 44px; }

/* Tabs: wrap instead of sliding sideways */
html.is-mobile .tutorial-tabs, html.is-mobile .leaderboard-tabs, html.is-mobile .shop-tabs, html.is-mobile .inventory-tabs,
html.is-mobile .friends-tabs, html.is-mobile .season-tabs, html.is-mobile .room-browser-tabs, html.is-mobile .auth-tabs {
    flex-wrap: wrap !important; overflow: visible !important; row-gap: 2px;
}
html.is-mobile .tutorial-tabs .tab-btn, html.is-mobile .leaderboard-tabs > *, html.is-mobile .shop-tabs > *, html.is-mobile .inventory-tabs > *,
html.is-mobile .friends-tabs > *, html.is-mobile .season-tabs > * { flex: 1 1 auto; min-height: 42px; white-space: nowrap; }

/* Bot match sheet */
html.is-mobile .bot-setup { z-index: 1100 !important; }
html.is-mobile.m-short .bot-setup { align-items: stretch !important; }
html.is-mobile.m-short .bot-setup-sheet { max-height: 100dvh !important; max-width: 640px !important; border-radius: 0 !important; padding-bottom: 12px !important; }
html.is-mobile.m-short .bot-setup-title { margin: 4px 0 10px !important; font-size: 17px !important; }
html.is-mobile.m-short .bot-setup-group { margin-bottom: 10px !important; }
html.is-mobile .bot-setup-actions { position: sticky; bottom: calc(-20px - var(--safe-bottom, 0px)); padding: 12px 0 calc(4px + var(--safe-bottom, 0px)); margin-top: 14px !important; background: inherit; background: #12151d; z-index: 2; }
html.is-mobile.m-short .bot-setup-actions { bottom: -12px; padding-bottom: 4px; }
html.is-mobile .bot-setup-options { flex-wrap: wrap; }
html.is-mobile .bot-opt { min-width: 64px; }

/* Auth (login / register) */
html.is-mobile.m-phone .auth-screen { align-items: flex-start !important; overflow-y: auto !important; padding: var(--safe-top, 0px) 0 var(--safe-bottom, 0px) !important; }
html.is-mobile.m-phone .auth-container { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 12px !important; }
html.is-mobile.m-phone .auth-card { width: 100% !important; max-width: 520px !important; margin: 0 auto !important; }
html.is-mobile .auth-screen .video-background-wrapper { display: none !important; }

/* ==========================================================================
   4. SOCIAL PANEL: full screen on phones, above the header
   ========================================================================== */
html.is-mobile.m-phone .social-panel { top: 0 !important; width: 100% !important; max-width: 100%; z-index: 1150 !important; border-left: 0 !important; padding-top: var(--safe-top, 0px); padding-bottom: var(--safe-bottom, 0px); }
html.is-mobile.m-phone .social-panel .sp-head { height: 56px !important; }
html.is-mobile.m-phone .social-panel .sp-icon-btn { min-width: 44px; min-height: 44px; }
html.is-mobile.m-phone body.social-open #main-menu .menu-container,
html.is-mobile.m-phone body.social-open #lobby-screen { padding-right: 0 !important; }
html.is-mobile.m-phone body.social-open { overflow: hidden; }

/* ==========================================================================
   5. LOBBY (room) — also the room lobby over a match
   ========================================================================== */
html.is-mobile #lobby-screen:not(.hidden) {
    display: block !important; overflow-y: auto !important; overflow-x: hidden !important;
    padding: var(--safe-top, 0px) var(--safe-right, 0px) 0 var(--safe-left, 0px) !important;
    box-sizing: border-box;
}
html.is-mobile #lobby-screen[style*="fixed"]:not(.hidden) { background: rgba(8, 9, 12, .96) !important; z-index: 70 !important; }
html.is-mobile #lobby-screen .lobby-container,
html.is-mobile #lobby-screen[style*="fixed"] .lobby-container {
    width: 100% !important; max-width: 1040px !important; max-height: none !important; height: auto !important;
    margin: 0 auto !important; padding: 10px 10px 0 !important; gap: 10px !important;
    border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; background: transparent !important;
    min-height: 100%; display: flex !important; flex-direction: column;
}
/* leave room for the room tools (top right) */
html.is-mobile .lobby-header { flex-direction: row !important; align-items: center !important; flex-wrap: wrap; gap: 8px 10px !important; padding: 10px 12px !important; padding-right: 96px !important; min-height: 52px; }
html.is-mobile .lobby-header h2 { font-size: 18px !important; max-width: 100% !important; flex: 1 1 0; min-width: 0; text-align: left !important; }
html.is-mobile .lobby-actions { flex-wrap: wrap; gap: 6px !important; width: 100%; order: 3; }
html.is-mobile.m-land:not(.m-phone) .lobby-actions { width: auto; order: 0; flex: 0 1 auto; }
html.is-mobile .lobby-actions .btn, html.is-mobile .lobby-actions .btn-social { min-height: 40px !important; height: 40px !important; padding: 0 12px !important; font-size: 12px !important; flex: 1 1 auto; }
html.is-mobile .lobby-actions #btn-leave-room { flex: 0 0 auto; margin-left: auto; }

/* over a match the room tools (Back to game, eye, gear) sit above the header */
html.is-mobile #lobby-screen[style*="fixed"] .lobby-container { padding-top: calc(var(--safe-top, 0px) + 54px) !important; }
html.is-mobile #lobby-screen[style*="fixed"] .lobby-header { padding-right: 12px !important; }

/* Teams */
html.is-mobile #lobby-screen .teams-container { height: auto !important; flex: none !important; min-height: 0 !important; gap: 8px !important; }
html.is-mobile.m-port #lobby-screen .teams-container { grid-template-columns: 1fr 1fr !important; }
html.is-mobile.m-port #lobby-screen #col-spec { grid-column: 1 / -1; grid-row: 2; }
html.is-mobile.m-land #lobby-screen .teams-container { grid-template-columns: 1fr 1fr 1fr !important; }
html.is-mobile #lobby-screen .team-column { min-height: 132px; }
html.is-mobile #lobby-screen .player-list { min-height: 72px; max-height: 40dvh; overflow-y: auto; padding: 6px !important; }
html.is-mobile.m-short #lobby-screen .player-list { max-height: 52dvh; }
html.is-mobile #lobby-screen .player-item { padding: 8px 10px !important; min-height: 40px; gap: 8px !important; }
html.is-mobile #lobby-screen .player-item .player-name { font-size: 13px !important; }
html.is-mobile #lobby-screen .team-header { padding: 8px 10px !important; min-height: 44px; }
html.is-mobile #lobby-screen .btn-join-team { min-height: 36px; min-width: 44px; }
html.is-mobile #lobby-screen .add-bot-btn { height: 40px; }

/* Controls + sticky Start */
html.is-mobile .lobby-controls { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 10px 12px 0 !important; border-radius: var(--r-lg, 8px) var(--r-lg, 8px) 0 0 !important; }
html.is-mobile .lobby-controls .control-group { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
html.is-mobile .lobby-controls .control-group .btn { min-height: 42px; width: 100%; padding: 0 4px !important; }
html.is-mobile .lobby-controls .settings-group { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 10px !important; }
html.is-mobile.m-land .lobby-controls .settings-group { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; }
html.is-mobile .lobby-controls .setting-item { min-width: 0; flex-wrap: wrap; gap: 6px !important; }
html.is-mobile .lobby-controls .setting-item.hidden { display: none !important; }
html.is-mobile .lobby-controls #setting-stadium, html.is-mobile .lobby-controls #setting-room-mode, html.is-mobile .lobby-controls #setting-mode-opts { grid-column: 1 / -1; }
html.is-mobile.m-land .lobby-controls #setting-stadium { grid-column: auto; }
html.is-mobile .lobby-controls .setting-item select { min-height: 42px; max-width: 100%; }
html.is-mobile .lobby-controls .setting-item input.xs { width: 64px !important; min-height: 40px; text-align: center; }
html.is-mobile .lobby-controls #btn-pick-stadium { min-height: 40px; }
html.is-mobile .lobby-controls .start-group {
    position: sticky; bottom: 0; z-index: 4; width: auto !important; margin: 0 -12px !important;
    display: flex !important; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom, 0px)) !important;
    padding-right: calc(12px + 112px) !important;
    background: var(--bg-1, #15181e); border-top: 1px solid var(--line, rgba(255,255,255,.08));
}
html.is-mobile .lobby-controls .start-group .btn { flex: 1; min-height: 48px !important; height: 48px !important; }
html.is-mobile .lobby-controls .start-group .btn.hidden { display: none !important; }
html.is-mobile .lobby-controls .start-group .btn:not(.btn-success):not(.btn-primary) { background: var(--bg-3, #262b35) !important; color: var(--fg-0, #fff) !important; border: 0 !important; }

/* Lobby chat: a button bottom-right; opens as a sheet */
.m-lobby-chat-btn { display: none; }
html.is-mobile #lobby-screen:not(.hidden) ~ .m-lobby-chat-btn {
    display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 75;
    right: calc(10px + var(--safe-right, 0px)); bottom: calc(10px + var(--safe-bottom, 0px));
    height: 48px; padding: 0 14px; border: 0; border-radius: 24px;
    background: var(--bg-3, #262b35); color: var(--fg-0, #fff); font: 700 13px/1 var(--f-display, system-ui); letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55); cursor: pointer;
}
html.is-mobile #lobby-screen:not(.hidden) ~ .m-lobby-chat-btn[aria-expanded="true"] { display: none; }
.m-lcb-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange, #FF6A13); color: var(--orange-ink, #1a0900); font: 700 11px/18px var(--f-body, system-ui); text-align: center; }
.m-lcb-badge[hidden] { display: none; }
.m-sheet-x { display: none; }
html.is-mobile #global-chat-panel {
    display: none !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; height: min(62dvh, 420px) !important; max-height: none !important;
    transform: none !important; margin: 0 !important; z-index: 80 !important;
    border-radius: 16px 16px 0 0 !important; background: rgba(14, 16, 22, .98) !important;
    padding: 0 0 calc(8px + var(--safe-bottom, 0px)) !important; flex-direction: column;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
}
html.is-mobile #lobby-screen:not(.hidden) ~ #global-chat-panel.m-open { display: flex !important; }
html.is-mobile.m-short #global-chat-panel { height: 78dvh !important; }
html.is-mobile #global-chat-panel::before { content: 'Room chat'; display: block; flex: none; height: 44px; line-height: 44px; padding: 0 56px 0 16px; font: 700 13px/44px var(--f-display, system-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-1, #ccc); border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); width: auto; height: 44px; margin: 0; background: none; border-radius: 0; }
html.is-mobile #global-chat-panel .m-sheet-x { display: grid; place-items: center; position: absolute; top: 0; right: 4px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--fg-1, #ccc); font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }
html.is-mobile #global-chat-panel .chat-messages { flex: 1 !important; max-height: none !important; height: auto !important; overflow-y: auto; padding: 8px 14px !important; }
html.is-mobile #global-chat-panel .chat-input-container { padding: 8px 12px 0 !important; }
html.is-mobile #global-chat-panel .chat-input-container input { width: 100%; min-height: 44px; }
/* scroll space so the last controls clear the floating chat button */
html.is-mobile #lobby-screen .lobby-container::after { content: ''; display: block; height: 4px; flex: none; }

/* ==========================================================================
   6. MATCH HUD (phones + tablets)
   top-left: chat · quick chat · zoom · leave   centre: score   top-right: lobby · hide HUD · settings
   ========================================================================== */
html.is-mobile #game-screen .game-topbar {
    position: absolute !important; top: calc(var(--safe-top, 0px) + 6px) !important; left: 50% !important; transform: translateX(-50%) !important;
    display: flex !important; align-items: center !important; gap: 0 !important; width: auto !important; height: 34px !important;
    padding: 0 !important; margin: 0 !important; border-radius: 8px !important; overflow: visible;
    background: transparent !important; border: 0 !important; z-index: 30 !important; pointer-events: none;
}
html.is-mobile #game-screen .game-topbar .team-score,
html.is-mobile #game-screen .game-topbar .game-timer { height: 34px !important; }
html.is-mobile #game-screen .game-topbar .team-score .score { height: 34px !important; min-width: 34px !important; padding: 0 8px !important; font-size: 19px !important; }
html.is-mobile #game-screen .game-topbar .team-name { padding: 0 9px !important; font-size: 10.5px !important; letter-spacing: .1em !important; }
html.is-mobile #game-screen .game-topbar .game-timer { padding: 0 10px !important; font-size: 14px !important; }
html.is-mobile.m-phone #game-screen .game-topbar .team-name { display: none !important; }
html.is-mobile.m-phone #game-screen .game-topbar .team-score.red { box-shadow: inset 3px 0 0 var(--red, #E5484D) !important; }
html.is-mobile.m-phone #game-screen .game-topbar .team-score.blue { box-shadow: inset -3px 0 0 var(--blue, #3E8BF0) !important; }
html.is-mobile #game-screen .game-topbar .game-rec { position: absolute; right: calc(100% + 6px); top: 2px; height: 30px; margin: 0; pointer-events: auto; }
html.is-mobile #game-screen .game-topbar .power-hud { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); margin: 0 !important; height: 26px; background: rgba(0, 0, 0, .55) !important; border-radius: 13px; }
html.is-mobile #game-screen .game-topbar > .game-fit { position: absolute !important; top: calc(100% + 4px) !important; right: auto !important; left: 50% !important; transform: translateX(-50%); margin: 0 !important; }
html.is-mobile #game-screen .game-topbar:has(.power-hud:not(.hidden)) > .game-fit { top: calc(100% + 34px) !important; }

/* Utility buttons: top-left */
html.is-mobile .touch-utility { left: calc(var(--safe-left, 0px) + 8px) !important; right: auto !important; top: calc(var(--safe-top, 0px) + 6px) !important; gap: 6px !important; }
html.is-mobile .touch-util-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; font-size: 16px !important; }
html.is-mobile.m-narrow .touch-util-btn, html.is-mobile.m-short.m-phone .touch-util-btn { width: 38px !important; height: 38px !important; min-height: 38px !important; }
html.is-mobile .touch-chat-float { top: calc(var(--safe-top, 0px) + 54px) !important; left: calc(var(--safe-left, 0px) + 10px) !important; max-width: 45vw !important; }

/* Room tools: top-right, Lobby button visible on touch too (no Esc key on a phone) */
html.is-mobile .room-tools { top: calc(var(--safe-top, 0px) + 6px) !important; right: calc(var(--safe-right, 0px) + 8px) !important; gap: 6px !important; z-index: 85 !important; }
html.is-mobile .room-gear { width: 40px !important; height: 40px !important; min-height: 40px !important; }
html.is-mobile .room-lobby:not(.hidden) { display: inline-flex !important; height: 40px !important; min-height: 40px !important; padding: 0 10px !important; gap: 6px !important; }
html.is-mobile .room-lobby kbd { display: none !important; }
html.is-mobile.m-phone .room-lobby .rl-label { font-size: 11px; }
html.is-mobile.m-narrow .room-lobby .rl-label, html.is-mobile.m-short.m-phone .room-lobby .rl-label { display: none; }
html.is-mobile.m-short.m-phone .room-lobby[aria-pressed="true"] .rl-label { display: inline; }
html.is-mobile .room-lobby .rl-ico { display: inline-flex; }
.room-lobby .rl-ico { display: none; }
/* no gear or lobby buttons over full-screen dialogs */
html.is-mobile body.m-layer-open .room-tools { z-index: 60 !important; }
/* the HUD-hidden state keeps the lobby / eye reachable */
html.is-mobile body.hud-hidden #btn-room-lobby { visibility: visible !important; pointer-events: auto !important; }

/* Action buttons: scale down on small landscape phones so they never cover each other */
html.is-mobile.m-short.m-phone .touch-btn-kick { width: 84px !important; height: 84px !important; font-size: 34px !important; right: calc(var(--safe-right, 0px) + 24px) !important; bottom: calc(var(--safe-bottom, 0px) + 22px) !important; }
html.is-mobile.m-short.m-phone .touch-btn-curve { width: 54px !important; height: 54px !important; font-size: 22px !important; }
html.is-mobile.m-short.m-phone .touch-btn-curve-left { right: calc(var(--safe-right, 0px) + 122px) !important; bottom: calc(var(--safe-bottom, 0px) + 16px) !important; }
html.is-mobile.m-short.m-phone .touch-btn-curve-right { right: calc(var(--safe-right, 0px) + 30px) !important; bottom: calc(var(--safe-bottom, 0px) + 118px) !important; }
html.is-mobile.m-short.m-phone .touch-btn-soft { width: 50px !important; height: 50px !important; font-size: 10.5px !important; right: calc(var(--safe-right, 0px) + 186px) !important; bottom: calc(var(--safe-bottom, 0px) + 18px) !important; }
html.is-mobile.m-short.m-phone .touch-btn-lob { width: 50px !important; height: 50px !important; font-size: 10.5px !important; right: calc(var(--safe-right, 0px) + 34px) !important; bottom: calc(var(--safe-bottom, 0px) + 182px) !important; }
html.is-mobile.m-short.m-phone .touch-btn-sprint { width: 52px !important; height: 52px !important; font-size: 10px !important; right: calc(var(--safe-right, 0px) + 186px) !important; bottom: calc(var(--safe-bottom, 0px) + 80px) !important; }
html.is-mobile.m-short.m-phone .touch-btn-power { width: 56px !important; height: 56px !important; right: calc(var(--safe-right, 0px) + 112px) !important; bottom: calc(var(--safe-bottom, 0px) + 100px) !important; }
/* very short screens (iPhone SE landscape): Lob moves left of the curve button */
@media (max-height: 340px) {
    html.is-mobile.m-phone .touch-btn-lob { right: calc(var(--safe-right, 0px) + 100px) !important; bottom: calc(var(--safe-bottom, 0px) + 126px) !important; }
    html.is-mobile.m-phone .touch-btn-curve-right { bottom: calc(var(--safe-bottom, 0px) + 110px) !important; }
}
html.is-mobile.m-short.m-phone .joystick { width: 116px; height: 116px; left: calc(var(--safe-left, 0px) + 26px); bottom: calc(var(--safe-bottom, 0px) + 22px); }

/* In-game chat sheet */
html.is-mobile #game-chat-panel { max-height: min(320px, 70%) !important; }
html.is-mobile.m-short #game-chat-panel { height: 70% !important; max-height: none !important; }

/* Pause / result */
html.is-mobile .match-result-overlay {
    overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    align-items: flex-start !important; justify-content: center !important;
    padding: calc(var(--safe-top, 0px) + 56px) 14px calc(var(--safe-bottom, 0px) + 16px) !important; z-index: 90 !important;
}
html.is-mobile .match-result-content { margin: auto !important; width: 100% !important; max-width: 560px !important; }
html.is-mobile .match-result-title { font-size: clamp(34px, 10vw, 56px) !important; letter-spacing: 2px !important; line-height: 1 !important; margin-bottom: 6px !important; }
html.is-mobile.m-short .match-result-title { font-size: 34px !important; }
html.is-mobile .match-result-score { font-size: clamp(28px, 8vw, 44px) !important; }
html.is-mobile .match-result-actions { display: flex !important; gap: 10px !important; position: sticky; bottom: calc(-16px - var(--safe-bottom, 0px)); padding: 12px 0 calc(8px + var(--safe-bottom, 0px)); background: rgba(8, 9, 12, .96); margin-top: 14px !important; z-index: 2; }
html.is-mobile .match-result-actions .btn { flex: 1; min-height: 48px; }
html.is-mobile .match-result-replay-hint { display: block; font-size: 11.5px; }
html.is-mobile .pause-overlay .pause-text { font-size: clamp(32px, 9vw, 56px) !important; }
html.is-mobile .goal-celebration .goal-text { font-size: clamp(24px, 7vw, 36px) !important; }

/* Quick chat: fits short screens */
html.is-mobile .quick-chat-menu { max-width: calc(100% - 24px); }
html.is-mobile.m-short .quick-chat-menu { transform: scale(.86); }

/* ==========================================================================
   7. MISC
   ========================================================================== */
/* context menus (player actions) stay on screen */
html.is-mobile .context-menu { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
html.is-mobile .context-menu > * { min-height: 42px; }
/* toasts above the safe area */
html.is-mobile .sp-toasts { bottom: calc(12px + var(--safe-bottom, 0px)) !important; left: 12px !important; right: 12px !important; }
/* ranked queue card */
html.is-mobile #queue-overlay .glass-panel { max-width: calc(100% - 32px); padding: 28px 22px !important; }
html.is-mobile #queue-overlay #btn-cancel-queue { min-height: 48px; min-width: 160px; }
/* sports HUD (serve / points / sets): under the score pill on touch screens, never on top of it */
html.is-mobile #game-screen .sport-hud { top: calc(var(--safe-top, 0px) + 46px) !important; padding: 3px 9px !important; gap: 6px !important; max-width: calc(100% - 24px); }
html.is-mobile #game-screen .sport-hud .sh-val { font-size: 12px !important; }
html.is-mobile #game-screen .sport-hud .sh-label { font-size: 8px !important; letter-spacing: .1em !important; }
html.is-mobile.m-short.m-phone #game-screen .sport-hud .sh-label:last-child:not(:first-child) { display: none; }
html.is-mobile #game-screen.is-sport .touch-chat-float { top: calc(var(--safe-top, 0px) + 80px) !important; }
/* a control over my player or the ball fades out so the play stays visible (mobile.js see-through) */
html.is-mobile #touch-controls .touch-btn, html.is-mobile #touch-controls .touch-util-btn, html.is-mobile .room-tools > * { transition: opacity .12s ease; }
html.is-mobile #touch-controls .m-see-through:not(.pressed), html.is-mobile .room-tools > .m-see-through { opacity: .16 !important; }
html.is-mobile #touch-controls .touch-btn-kick.m-see-through:not(.pressed) { opacity: .28 !important; }
html.is-mobile.m-short.m-phone .touch-btn-lunge { width: 52px !important; height: 52px !important; font-size: 10px !important; right: calc(var(--safe-right, 0px) + 246px) !important; bottom: calc(var(--safe-bottom, 0px) + 80px) !important; }

/* Touch layout editor (mobile.js editLayout): the live controls under a tint, a frame on each one */
html.is-mobile.nb-touch-edit #touch-controls .touch-btn-lunge,
html.is-mobile.nb-touch-edit #touch-controls .touch-btn-power,
html.is-mobile.nb-touch-edit #touch-controls .touch-btn-sprint { display: flex !important; }
html.is-mobile.nb-touch-edit #touch-controls .touch-btn { opacity: .9 !important; }
html.is-mobile.nb-touch-edit #touch-controls .joystick { opacity: .9 !important; }
.touch-edit { position: fixed; inset: 0; z-index: 9000; background: rgba(6, 8, 12, .35); touch-action: none; }
.touch-edit .te-boxes { position: absolute; inset: 0; touch-action: none; }
.touch-edit .te-box { position: absolute; border: 2px dashed rgba(255, 255, 255, .7); border-radius: 50%; pointer-events: none; display: grid; place-items: center; }
.touch-edit .te-box.on { border: 2px solid var(--orange, #FF6A13); box-shadow: 0 0 0 4px rgba(255, 106, 19, .25); }
.touch-edit .te-box span { position: absolute; top: -20px; white-space: nowrap; font: 700 10px/1 var(--f-display, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .6); padding: 3px 6px; border-radius: 3px; }
.touch-edit .te-bar { position: absolute; top: calc(var(--safe-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: var(--r, 4px); background: var(--bg-1, #14181f); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); max-width: calc(100% - 16px); flex-wrap: nowrap; justify-content: center; }
.touch-edit .te-sel { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; font: 700 11px/1.2 var(--f-display, system-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-1, #fff); text-align: center; }
.touch-edit .te-btn { flex: none; min-width: 40px; height: 36px; padding: 0 10px; white-space: nowrap; border: 0; border-radius: var(--r, 4px); background: var(--bg-2, #222833); color: var(--fg-1, #fff); font: 700 12px/1 var(--f-display, system-ui); letter-spacing: .06em; text-transform: uppercase; touch-action: manipulation; }
.touch-edit .te-size { font-size: 20px; }
.touch-edit .te-done { background: var(--orange, #FF6A13); color: var(--orange-ink, #1A0900); }
.touch-note { position: fixed; left: 50%; bottom: calc(var(--safe-bottom, 0px) + 24px); transform: translateX(-50%); z-index: 9100; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: var(--r, 4px); background: rgba(0, 0, 0, .85); color: #fff; font: 600 13px/1.35 var(--f-body, system-ui); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.touch-note.on { opacity: 1; }
html.is-mobile .lobby-controls #setting-threedef { grid-column: 1 / -1; justify-self: start; }
html.is-mobile .lobby-controls .td-switch { min-height: 34px !important; height: 34px; }
/* Shop on phones: one scroll for the whole window (deals, tabs, items), the coupon box at the very end
   (the item list used to be squeezed to a few px under the deals, and the coupon box stuck over everything) */
html.is-mobile #shop-modal .shop-panel > .modal-footer { position: static !important; bottom: auto !important; }
html.is-mobile #shop-modal #shop-content, html.is-mobile #shop-modal #shop-inventory-content { flex: none !important; overflow: visible !important; min-height: 0 !important; max-height: none !important; }

/* Settings > Controls opacity (mobile.js setTouchOpacity): --nb-touch-k scales how solid the joystick and every
   button on the pitch are (1 = the normal look, lower = more see-through, up to 1.25 = more solid) */
html.is-mobile #touch-controls .joystick { opacity: min(1, calc(.55 * var(--nb-touch-k, 1))); }
html.is-mobile #touch-controls .joystick.active { opacity: min(1, calc(.9 * var(--nb-touch-k, 1))); }
html.is-mobile #touch-controls .touch-btn { opacity: min(1, calc(.8 * var(--nb-touch-k, 1))); }
html.is-mobile #touch-controls .touch-btn.pressed { opacity: min(1, calc(.2 + .8 * var(--nb-touch-k, 1))); }
html.is-mobile #touch-controls .touch-util-btn, html.is-mobile .room-tools > * { opacity: min(1, var(--nb-touch-k, 1)); }