/* iOS Capacitor safe-area and native-feel adjustments. Only active when capacitor.js adds the .capacitor class to . */ html.capacitor body { /* Pad for the notch / Dynamic Island */ padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Bottom nav needs extra padding for home indicator */ html.capacitor .bottom-nav, html.capacitor .nav-bottom { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } /* Pages without a bottom nav still need bottom safe area */ html.capacitor body { padding-bottom: env(safe-area-inset-bottom); } /* Disable iOS text selection rubber-band on non-interactive elements */ html.capacitor body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* Allow selection in content areas where users might want to copy */ html.capacitor .prediction-content, html.capacitor .narrative-text, html.capacitor .analysis-text, html.capacitor .transcript, html.capacitor .agent-entry, html.capacitor pre, html.capacitor code { -webkit-user-select: text; user-select: text; } /* Smooth scrolling for iOS */ html.capacitor .scrollable { -webkit-overflow-scrolling: touch; } /* Disable pull-to-refresh (Capacitor handles this) */ html.capacitor, html.capacitor body { overscroll-behavior: none; } /* ══════════════════════════════════════════════════════════════ Mobile layout fixes (applies to all mobile, not just Capacitor) ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Fix 1: Team name truncation ────────────────────────── Remove the 90px max-width that causes ellipsis on mobile. Single-column grid at ≤680px gives plenty of room. */ .card-name, .card-team-block.home .card-name { max-width: none; } /* ── Fix 2: Hide duplicate nav links on mobile ──────────── Only when bottom nav is present (authenticated users). Keeps Login/Signup/Upgrade visible for non-auth users. */ body.has-bottom-nav .nav .nav-link { display: none !important; } /* game.html: Track Record & My Picks sit after .nav-spacer */ body.has-bottom-nav .nav .nav-spacer ~ .back-link { display: none !important; } /* Hide search bar on small screens for auth users — bottom nav + game cards already provide discovery */ body.has-bottom-nav .nav .nav-search-wrap { display: none; } /* Also hide badges that clutter the header on game detail */ body.has-bottom-nav .nav .nav-badge, body.has-bottom-nav .nav .nav-user, body.has-bottom-nav .nav .nav-signout { display: none; } /* ── Fix 3: Prevent logo wrapping to two lines ────────── */ .nav-logo { white-space: nowrap; font-size: clamp(14px, 4vw, 20px) !important; flex-shrink: 0; } /* ── Fix 4: Confidence scale — full-width on mobile ───── */ #scale-panel { border-radius: 8px; margin-left: -0.25rem; margin-right: -0.25rem; } .scale-outer { min-height: 150px; } /* Consensus bar dots: allow more width, relax 48% constraint */ .cbar-side { max-width: 65%; } .cbar-section { padding: 0.75rem 1rem; } /* ── Fix 5: Game detail header simplified ─────────────── */ .sport-tag { margin-left: auto; } /* ── Fix 6: General mobile polish ─────────────────────── */ /* Minimum 44px tap targets */ .card-chip { min-height: 32px; padding: 0.3rem 0.55rem; display: inline-flex; align-items: center; } .prop-pill { min-height: 32px; padding: 0.25rem 0.5rem; display: inline-flex; align-items: center; } .stab { min-height: 36px; padding: 0.35rem 0.65rem; display: inline-flex; align-items: center; } .sport-tab { min-height: 40px; padding: 0.45rem 0.85rem; display: inline-flex; align-items: center; } .back-link { min-height: 44px; display: inline-flex; align-items: center; } .bottom-nav-btn { min-height: 52px; } .featured-cta { min-height: 48px; } /* Prevent horizontal scroll */ html, body { overflow-x: hidden; } /* Card internal padding — ensure at least 12px */ .card-body { padding: 0.85rem 0.9rem; } /* Top-picks cards: stack single column handled by existing CSS at 680px but ensure padding is comfortable */ .top-pick-card { padding: 0.85rem 1rem; } /* Scale market toggle buttons: bigger tap targets on mobile */ #scale-panel .stab { min-height: 36px; font-size: 0.68rem; padding: 0.35rem 0.7rem; } /* Odds table pills on game detail page */ .odds-col { min-height: 44px; } /* Game header: tighter padding on mobile */ .game-header-inner { padding: 1rem 1.15rem; } .page { padding: 1rem; } }