.native-route-loading[hidden] { display: none !important; }
html[data-native-app] .native-route-loading {
  position: fixed; z-index: 45;
  top: var(--native-loading-top, var(--native-header-height));
  left: var(--native-rail-width, 0px); right: 0;
  bottom: calc(var(--native-nav-height) + var(--native-safe-bottom));
  padding: 28px 24px; background: var(--page); overflow: hidden;
}
html[data-native-app] .native-loading-label { display: block; margin-bottom: 28px; color: var(--muted); }
html[data-native-app] .native-loading-bar { height: 64px; max-width: 900px; margin-bottom: 18px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
html[data-native-app] .native-loading-bar:nth-child(2) { width: 55%; height: 24px; }
html[data-native-app].native-route-pending .native-action-dock { display: none !important; }
html[data-native-app].native-route-pending body { overflow: hidden; }
html[data-native-app] {
  --native-safe-bottom: env(safe-area-inset-bottom, 0px);
  --native-nav-height: 64px;
  --native-header-height: 64px;
  --native-action-height: 72px;
  scroll-padding-top: 116px;
  scroll-padding-bottom: 150px;
}
/* Authenticated content is never revealed before the native shell grants access. */
html[data-native-pin]:not(.native-pin-unlocked) body:not(.auth-mode) > :not(.native-pin-pending) { visibility: hidden !important; }
.native-pin-pending { display: none; }
html[data-native-pin]:not(.native-pin-unlocked) body:not(.auth-mode) > .native-pin-pending {
  display: grid; position: fixed; inset: 0; place-items: center; padding: 24px;
  color: var(--ink); background: var(--page); z-index: 200;
}
/* FMX already crops its browser to the safe area. Do not inset the web twice. */
html[data-native-app][data-safe-area-owner="native"] { --native-safe-bottom: 0px; }
html[data-native-app] .native-tab-hidden,
html[data-native-app] .native-docked-source,
html[data-native-app] .native-nav[hidden],
html[data-native-app] .native-action-dock[hidden] { display: none !important; }
html[data-native-app] body { padding-bottom: calc(var(--native-nav-height) + var(--native-safe-bottom)); }
html[data-native-app].native-has-action body { padding-bottom: calc(var(--native-nav-height) + var(--native-action-height) + var(--native-safe-bottom)); }
html[data-native-app] body.auth-mode { padding-bottom: 0; }
html[data-native-app] .app-header { position: sticky; top: 0; z-index: 50; height: auto; }
html[data-native-app] .header-inner {
  display: flex;
  align-items: center;
  min-height: var(--native-header-height);
  height: auto;
  padding: 8px 14px;
  gap: 10px;
}
html[data-native-app] .header-inner > :is(.brand-link, .top-nav, .mobile-menu-button),
html[data-native-app] .header-actions > .wallet-chip,
html[data-native-app] .mobile-drawer,
html[data-native-app] .room-screen > .back-link { display: none !important; }
html[data-native-app] .native-page-title { font-size: 18px; line-height: 1.2; font-weight: 750; flex: 1; min-width: 0; overflow-wrap: anywhere; }
html[data-native-app] .header-actions { margin-left: auto; width: auto; flex: 0 0 auto; gap: 8px; }
html[data-native-app] :is(.icon-chip, .profile-chip) { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 8px; }
html[data-native-app] .profile-chip > :is(b, svg) { display: none; }
html[data-native-app] .profile-chip .profile-avatar { width: 24px; height: 24px; font-size: 16px; line-height: 1; border: 0; background: none; box-shadow: none; }
html[data-native-app] .profile-chip .profile-avatar::after { display: none; }
html[data-native-app] :is(.native-back, .native-header-action) { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); flex-shrink: 0; border-radius: 8px; }
html[data-native-app] .account-menu { top: var(--native-header-height); background: var(--solid); max-height: calc(100dvh - 150px); overflow-y: auto; }
html[data-native-app] .notification-menu { top: var(--native-header-height); background: var(--solid); }
html[data-native-app] .native-nav {
  position: fixed;
  z-index: 60;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--native-nav-height) + var(--native-safe-bottom));
  padding: 4px 8px calc(4px + var(--native-safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--solid);
}
html[data-native-app] .native-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); text-decoration: none; min-width: 0; font-size: 11px; line-height: 1.2; font-weight: 650; text-align: center; border-radius: 8px; }
html[data-native-app] .native-nav-link .svg-icon { width: 22px; height: 22px; }
html[data-native-app] .native-nav-brand { display: none; }
html[data-native-app] .native-nav-link[aria-current="page"] { color: var(--accent-bright); background: var(--glow); }
html[data-native-app] .native-action-dock { position: fixed; z-index: 59; bottom: calc(var(--native-nav-height) + var(--native-safe-bottom)); left: 0; right: 0; padding: 10px 14px; height: var(--native-action-height); background: var(--solid); border-top: 1px solid var(--line); }
html[data-native-app] .native-action-dock .btn { min-height: 52px; height: 52px; font-size: 16px; border-radius: 8px; }
html[data-native-app] :is(.rooms-hero, .bets-hero, .wallet-hero-copy, .profile-hero) > :is(h1, p, .pill),
html[data-native-app] :is(.rooms-hero, .bets-hero, .profile-hero) > div > :is(h1, p, .pill) { display: none; }
html[data-native-app] .profile-hero > div:first-child { display: none; }
html[data-native-app] .rooms-hero { gap: 0; }
html[data-native-app] .rooms-hero,
html[data-native-app] .bets-hero,
html[data-native-app] .wallet-hero-copy,
html[data-native-app] .hero-actions:has(.native-docked-source) { display: none; }
html[data-native-app] .rooms-screen { gap: 16px; }
html[data-native-app] .native-guide-dismiss { display: block; margin: 16px auto 0; min-height: 44px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent-bright); font-weight: 700; }
html[data-native-app] .native-room-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: sticky; top: var(--native-header-height); z-index: 20; background: var(--page); border-bottom: 1px solid var(--line); grid-column: 1 / -1; }
html[data-native-app] .native-room-tab { min-width: 0; min-height: 48px; font-size: 12px; font-weight: 700; padding: 10px 3px; background: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
html[data-native-app] .native-room-tab[aria-selected="true"] { color: var(--accent-bright); border-bottom-color: var(--accent); }
html[data-native-app] .room-layout { gap: 16px; }
html[data-native-app] .room-main-col > .chat-panel { margin: 0; }
html[data-native-app] .room-main-col > #outcomes { margin-top: 0; }
html[data-native-app] :is(.modal-backdrop, .share-sheet, .native-amount-backdrop) {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgb(0 0 0 / .48);
  backdrop-filter: blur(6px);
}
html[data-native-app] :is(.modal-panel, .share-sheet-panel, .native-sheet-panel) {
  position: relative;
  align-self: flex-end;
  width: 100%;
  max-width: 600px;
  max-height: calc(var(--native-visible-height, 100dvh) - 24px);
  min-width: 0;
  margin: 0;
  padding: 30px 18px calc(20px + var(--native-safe-bottom));
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--line);
  background: var(--solid);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: native-sheet-in .18s ease-out;
}
html[data-native-app] :is(.modal-panel, .share-sheet-panel, .native-sheet-panel):focus { outline: none; }
html[data-native-app] :is(.modal-panel, .share-sheet-panel, .native-sheet-panel)::before { content: ""; position: absolute; top: 10px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 2px; background: var(--muted); opacity: .5; }
html[data-native-app] :is(.modal-panel, .share-sheet-panel, .native-sheet-panel) h2 { padding-right: 36px; font-size: 24px; }
html[data-native-app] .native-sheet-close { position: absolute; top: 16px; right: 12px; width: 44px; height: 44px; font-size: 28px; line-height: 1; border: 0; border-radius: 8px; background: var(--surface-2); color: var(--ink); }
html[data-native-app].native-sheet-open { overflow: hidden; }
html[data-native-app].native-sheet-open :is(.native-nav, .native-action-dock) { visibility: hidden; }
html[data-native-app].native-keyboard :is(.native-nav, .native-action-dock) { display: none; }
html[data-native-app].native-keyboard body { padding-bottom: 0; }
@keyframes native-sheet-in { from { transform: translateY(32px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-native-app] .native-sheet-panel { animation: none; } }

/* One adaptive app shell for tablets and desktop WebViews; ordinary web is unchanged. */
@media (min-width: 768px) {
  html[data-native-app] {
    --native-rail-width: 88px;
    --native-nav-height: 0px;
    --native-header-height: 72px;
    scroll-padding-top: 132px;
  }
  html[data-native-app] body { padding-left: var(--native-rail-width); }
  html[data-native-app] body.auth-mode { padding-left: 0; }
  html[data-native-app] .native-nav {
    inset: 0 auto 0 0;
    width: var(--native-rail-width);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 8px calc(12px + var(--native-safe-bottom));
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  html[data-native-app] .native-nav-brand {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; flex: 0 0 48px; margin-bottom: 20px; color: var(--ink); text-decoration: none;
  }
  html[data-native-app] .native-nav-brand .brand-mark { width: 40px; height: 40px; border-radius: 8px; font-size: 16px; }
  html[data-native-app] .native-nav-brand strong { display: none; font-size: 19px; }
  html[data-native-app] .native-nav-link { flex: 0 0 auto; min-height: 64px; padding: 8px 4px; font-size: 11px; }
  html[data-native-app] .native-nav-link:hover { background: var(--surface-2); color: var(--ink); }
  html[data-native-app] .native-nav-link[aria-current="page"] { background: var(--glow); color: var(--accent-bright); }
  html[data-native-app] :is(.native-nav-link, .native-nav-brand):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  html[data-native-app] .header-inner { max-width: 1440px; padding: 12px 24px; }
  html[data-native-app] .native-page-title { font-size: 20px; }
  html[data-native-app] .screen { width: 100%; max-width: 1440px; padding: 24px 24px 32px; margin-inline: auto; }
  html[data-native-app] .screen :is(main, aside, section, article, .hero-left) { min-width: 0; }
  html[data-native-app] .native-action-dock {
    display: flex; justify-content: flex-end;
    left: var(--native-rail-width); bottom: 0;
    height: calc(72px + var(--native-safe-bottom));
    padding: 10px 24px calc(10px + var(--native-safe-bottom));
  }
  html[data-native-app] .native-action-dock .btn { width: min(100%, 360px); margin-left: auto; }
  html[data-native-app] :is(.hero-card, .steps-strip, .benefit-strip, .wallet-hero, .profile-hero, .setup-main) {
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  html[data-native-app] :is(.hero-card, .wallet-hero, .profile-hero, .setup-main)::before,
  html[data-native-app] :is(.hero-card, .wallet-hero, .profile-hero, .setup-main)::after { display: none; }
  html[data-native-app] .hero-card { display: block; overflow: visible; }
  html[data-native-app] .match-title-row { gap: 12px; margin-top: 20px; }
  html[data-native-app] .match-title-row h1 { flex: 1 1 320px; min-width: 0; margin: 0; }
  html[data-native-app] :is(.match-title-row h1, .match-title-room h1, .mini-event-head h1, .result-hero h1, .setup-main h1) {
    font-size: 30px; line-height: 1.16; letter-spacing: 0; overflow-wrap: anywhere;
  }
  html[data-native-app] .meta-row { font-size: 14px; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
  html[data-native-app] .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; border-radius: 8px; }
  html[data-native-app] .stat-item { min-width: 0; padding: 16px; gap: 10px; }
  html[data-native-app] .stat-icon { width: 36px; height: 36px; flex-shrink: 0; box-shadow: none; }
  html[data-native-app] .stat-item span { font-size: 11px; overflow-wrap: anywhere; }
  html[data-native-app] .stat-item b { font-size: 22px; }
  html[data-native-app] .steps-strip { margin-top: 24px; padding-block: 18px; border-block: 1px solid var(--line); }
  html[data-native-app] .flow-block h3 { font-size: 18px; margin-bottom: 16px; }
  html[data-native-app] .step-flow { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); gap: 12px; }
  html[data-native-app] .step-flow b { font-size: 13px; overflow-wrap: anywhere; }
  html[data-native-app] .step-flow > span .svg-icon { width: 40px; height: 40px; padding: 9px; box-shadow: none; }
  html[data-native-app] .native-guide-dismiss { margin-top: 12px; min-height: 40px; }
  html[data-native-app] .section-head { margin: 24px 0 16px; gap: 12px; }
  html[data-native-app] .section-head h2 { font-size: 22px; letter-spacing: 0; }
  html[data-native-app] :is(.room-grid, .profile-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html[data-native-app] :is(.room-card, .bet-item, .profile-card) { border-radius: 8px; padding: 18px; }
  html[data-native-app] .empty-room-panel { grid-column: 1 / -1; min-height: 140px; padding: 28px 20px; border-radius: 8px; }
  html[data-native-app] .empty-room-panel h2 { font-size: 22px; }
  html[data-native-app] .benefit-strip { margin-top: 24px; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-native-app] .benefit-strip .metric-card { padding: 16px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html[data-native-app] .benefit-strip .metric-icon { width: 32px; height: 32px; flex-shrink: 0; box-shadow: none; }
  html[data-native-app] .benefit-strip :is(.metric-title, .metric-sub) { font-size: 12px; }
  html[data-native-app] .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html[data-native-app] :is(.overview-shell, .setup-layout, .room-layout, .bet-layout, .result-grid) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html[data-native-app] :is(.overview-main, .overview-side, .wallet-balance-card, .panel, .chat-panel) { border-radius: 8px; }
  html[data-native-app] .wallet-hero { display: block; }
  html[data-native-app] .wallet-balance-card { max-width: 520px; padding: 24px; }
  html[data-native-app] .wallet-balance-card strong { font-size: 36px; }
  html[data-native-app] .wallet-balance-card .btn { max-width: 300px; }
  html[data-native-app] :is(.profile-screen, .invite-screen) { max-width: 1120px; }
  html[data-native-app] .profile-card h2 { font-size: 20px; }
  html[data-native-app] .setup-workflow { gap: 24px; }
  html[data-native-app] .setup-main h1 { margin: 0 0 24px; }
  html[data-native-app] .setup-main :is(.search-field, .field) { max-width: 680px; }
  html[data-native-app] .setup-side { padding: 20px; }
  html[data-native-app] .setup-match-list { gap: 12px; }
  html[data-native-app] .setup-match-option { padding: 16px; border-radius: 8px; }
  html[data-native-app] .room-top { padding: 0; border: 0; background: none; box-shadow: none; }
  html[data-native-app] .room-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-native-app] .room-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-native-app] .room-card .room-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-native-app] .native-room-tabs { margin-bottom: 0; }
  html[data-native-app] .native-room-tab { font-size: 14px; }
  html[data-native-app] .room-side > .panel { padding: 20px; }
  html[data-native-app] .chat-panel { padding: 20px; }
  html[data-native-app] .chat-list { max-height: 460px; }
  html[data-native-app] .mini-event-head { padding: 20px; border-radius: 8px; }
  html[data-native-app] .large-title { font-size: 26px; margin: 24px 0 16px; letter-spacing: 0; }
  html[data-native-app] .result-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; border-radius: 8px; }
  html[data-native-app] .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html[data-native-app] :is(.modal-backdrop, .share-sheet, .native-amount-backdrop) { align-items: center; padding: 24px; }
  html[data-native-app] :is(.modal-panel, .share-sheet-panel, .native-sheet-panel) {
    align-self: center; max-width: 560px; max-height: calc(var(--native-visible-height, 100dvh) - 48px);
    border-radius: 8px; padding: 24px; animation: none;
  }
  html[data-native-app] :is(.modal-panel, .share-sheet-panel, .native-sheet-panel)::before { display: none; }
  html[data-native-app] .bet-side { grid-template-columns: minmax(0, 1fr); }
  html[data-native-app] .bet-side > * { grid-column: auto; grid-row: auto; min-width: 0; }
  html[data-native-app] .account-menu { right: 0; }
  html[data-native-app] .auth-wrap { min-height: calc(100dvh - var(--native-header-height)); padding: 24px; }
  html[data-native-app] .auth-card { width: 100%; max-width: 440px; padding: 28px; border-radius: 8px; }
  html[data-native-app].native-keyboard .native-nav:not([hidden]) { display: flex; }
}

@media (min-width: 1100px) {
  html[data-native-app] { --native-rail-width: 192px; }
  html[data-native-app] .native-nav { padding-inline: 12px; }
  html[data-native-app] .native-nav-brand { justify-content: flex-start; padding-left: 8px; }
  html[data-native-app] .native-nav-brand strong { display: inline; }
  html[data-native-app] .native-nav-link { min-height: 52px; flex-direction: row; justify-content: flex-start; padding: 12px; gap: 12px; font-size: 14px; text-align: left; }
  html[data-native-app] .hero-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-native-app] :is(.setup-layout, .room-layout, .bet-layout, .overview-shell, .result-grid) { grid-template-columns: minmax(0, 1fr) 280px; }
  html[data-native-app] :is(.setup-side, .room-side, .overview-side) { position: sticky; top: calc(var(--native-header-height) + 72px); }
  html[data-native-app] .setup-side { background: none; box-shadow: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 0 0 20px; }
  html[data-native-app] .room-side > .panel { background: none; border: 0; box-shadow: none; padding: 0 0 20px; border-bottom: 1px solid var(--line); border-radius: 0; }
  html[data-native-app] .overview-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-native-app] .result-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-native-app] .wallet-screen { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; }
  html[data-native-app] .wallet-screen > .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; }
  html[data-native-app] .wallet-screen > :is(.overview-shell, .status) { grid-column: 1 / -1; }
  html[data-native-app] .native-amount-backdrop.native-amount-inline {
    display: block; position: sticky; inset: auto; top: calc(var(--native-header-height) + 24px);
    padding: 0; background: none; backdrop-filter: none; z-index: auto;
  }
  html[data-native-app] .native-amount-inline .native-sheet-panel { padding: 20px; max-height: none; overflow: visible; }
  html[data-native-app] .native-amount-inline .native-sheet-close { display: none; }
  html[data-native-app] .native-amount-inline .native-sheet-panel h2 { padding-right: 0; font-size: 20px; }
}