/* Shared My Poker Helper navigation */
.mph-global-header {
  width: min(1100px, calc(100% - 40px));
  margin: 10px auto 12px;
  position: sticky;
  top: 10px;
  z-index: 10000;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 18px;
  background: rgba(11, 18, 38, .94);
  color: #e5e7eb;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.mph-global-header * { box-sizing: border-box; }
.mph-global-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 58px;
  padding: 8px 10px 8px 12px;
  width: 100%;
}

.mph-global-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: min(460px, 50vw);
  flex: 0 1 auto;
  color: #e5e7eb;
  text-decoration: none;
}
.mph-global-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .3px;
  color: #ecfdf5;
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(34,197,94,.72));
  border: 1px solid rgba(34,197,94,.35);
}
.mph-global-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mph-global-name { font-weight: 850; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mph-global-subtitle { color: #9aa4b2; font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mph-global-actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mph-global-auth-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34,197,94,.34);
  border-radius: 14px;
  background: rgba(34,197,94,.12);
  color: #ecfdf5;
  padding: 9px 13px;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.mph-global-auth-link:hover { background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.55); }
.mph-global-auth-link:focus-visible { outline: 3px solid rgba(34,197,94,.35); outline-offset: 2px; }

.mph-global-auth-link.login {
  border-color: rgba(34,197,94,.34);
  background: rgba(34,197,94,.12);
  color: #ecfdf5;
}
.mph-global-auth-link.login:hover { background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.55); }
.mph-global-auth-link.logout {
  border-color: rgba(245,158,11,.5);
  background: rgba(245,158,11,.16);
  color: #fde68a;
}
.mph-global-auth-link.logout:hover { background: rgba(245,158,11,.25); border-color: rgba(245,158,11,.72); }
.mph-global-home-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 14px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 9px 13px;
  text-decoration: none;
  font-weight: 750;
  white-space: nowrap;
}
.mph-global-home-btn:hover { background:#172033; border-color: rgba(34,197,94,.35); }
.mph-global-menu-btn {
  appearance: none;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 14px;
  background: #111827;
  color: #f8fafc;
  min-height: 42px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.mph-global-menu-btn:hover { filter: brightness(1.08); }
.mph-global-menu-btn:focus-visible { outline: 3px solid rgba(59,130,246,.45); outline-offset: 2px; }
.mph-global-menu-icon { font-size: 20px; line-height: 1; transform: translateY(-1px); }
.mph-global-panel {
  display: none;
  border-top: 1px solid rgba(148, 163, 184, .16);
  padding: 12px;
  gap: 10px;
}
.mph-global-panel.open { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mph-global-link,
.mph-global-close {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 13px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 9px 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
}
.mph-global-link:hover,
.mph-global-close:hover { background: #172033; border-color: rgba(34,197,94,.35); }
.mph-global-link.primary { background: #1c7c42; border-color: rgba(34,197,94,.5); color: #fff; }
.mph-global-link.active { border-color: rgba(34,197,94,.58); box-shadow: inset 0 0 0 1px rgba(34,197,94,.25); }
.mph-global-close { background: #1f2937; }
body.mph-global-nav-ready { padding-top: 0; }
body.mph-global-nav-ready header:not(.mph-global-header) { display: none !important; }
body.mph-global-nav-ready .mph-menu-bar { display: none !important; }
/* Keep the hamburger consistently on the far right of the shared header on every page */
.mph-global-top > .mph-global-actions { margin-left: auto !important; justify-content: flex-end !important; }
.mph-global-menu-btn { flex: 0 0 auto; }
body.mph-global-nav-ready .mph-global-header { display: block !important; }
body.mph-global-nav-ready .mph-global-top { width: 100% !important; }


@media (max-width: 760px) {
  .mph-global-header { width: calc(100% - 20px); margin: 8px auto 10px; top: 6px; border-radius: 16px; }
  .mph-global-top { min-height: 56px; padding: 7px 8px 7px 10px; gap: 8px; }
  .mph-global-logo { width: 40px; height: 40px; border-radius: 12px; }
  .mph-global-subtitle { display: none; }
  .mph-global-name { font-size: 13px; letter-spacing: -0.2px; }
  .mph-global-auth-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34,197,94,.34);
  border-radius: 14px;
  background: rgba(34,197,94,.12);
  color: #ecfdf5;
  padding: 9px 13px;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.mph-global-auth-link:hover { background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.55); }
.mph-global-auth-link:focus-visible { outline: 3px solid rgba(34,197,94,.35); outline-offset: 2px; }

.mph-global-auth-link.login {
  border-color: rgba(34,197,94,.34);
  background: rgba(34,197,94,.12);
  color: #ecfdf5;
}
.mph-global-auth-link.login:hover { background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.55); }
.mph-global-auth-link.logout {
  border-color: rgba(245,158,11,.5);
  background: rgba(245,158,11,.16);
  color: #fde68a;
}
.mph-global-auth-link.logout:hover { background: rgba(245,158,11,.25); border-color: rgba(245,158,11,.72); }
.mph-global-menu-btn { min-height: 40px; padding: 8px 11px; }
  .mph-global-menu-label { display: inline; }
  .mph-global-panel.open { grid-template-columns: 1fr; padding: 10px; }
  .mph-global-link, .mph-global-close { justify-content: flex-start; min-height: 44px; padding: 10px 12px; }
}
@media (min-width: 761px) {
  .mph-global-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(720px, calc(100vw - 32px));
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 18px;
    background: rgba(11, 18, 38, .98);
    box-shadow: 0 18px 48px rgba(0,0,0,.36);
  }
}

/* Reduce landing page gap after the shared header */
body.mph-global-nav-ready .hero { padding-top: 10px !important; }
body.mph-global-nav-ready > .wrap { margin-top: 8px !important; }
body.mph-global-nav-ready .container:first-child,
body.mph-global-nav-ready .wrap:first-child { margin-top: 0 !important; }
@media (max-width:720px){ body.mph-global-nav-ready .hero { padding-top: 8px !important; } }

@media (max-width: 480px) {
  .mph-global-brand { max-width: calc(100% - 118px); gap: 6px; }
  .mph-global-logo { width: 34px; height: 34px; font-size: 12px; }
  .mph-global-auth-link { min-height: 36px; padding: 7px 8px; font-size: 12px; border-radius: 12px; }
  .mph-global-menu-btn { min-height: 36px; padding: 7px 8px; border-radius: 12px; }
}

/* Mobile auth color variants */
.mph-global-auth-link.login { border-color: rgba(34,197,94,.34); background: rgba(34,197,94,.12); color: #ecfdf5; }
.mph-global-auth-link.logout { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.16); color: #fde68a; }


/* Discrete plan indicator reused across authenticated pages */
.mph-page-heading,
.mph-plan-fallback,
.page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mph-page-heading h1 { margin-right: auto; }
.mph-plan-fallback { margin: 0 0 12px; }
.mph-plan-indicator {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, .20);
  background: rgba(15, 23, 42, .72);
  color: #cbd5e1;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.mph-plan-indicator strong { color: #f8fafc; }
.mph-plan-upgrade {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.32);
  color: #bbf7d0;
  font-weight: 800;
  text-decoration: none;
}
.mph-plan-upgrade:hover { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.52); }
@media (max-width: 700px) {
  .mph-page-heading,
  .mph-plan-fallback,
  .page-title { align-items: center; }
  .mph-page-heading h1 { font-size: 22px; line-height: 1.15; }
  .mph-page-heading h1 small { display:block; margin-top:4px; font-size:13px; }
  .mph-plan-indicator { font-size: 11px; padding: 6px 8px; gap: 6px; }
  .mph-plan-upgrade { padding: 4px 7px; }
}

@media (max-width: 380px) {
  .mph-global-name { font-size: 12px; }
  .mph-global-auth-link { font-size: 11px; padding: 6px 7px; }
  .mph-global-menu-label { display: inline !important; }
  .mph-global-brand { max-width: calc(100% - 104px); }
}


/* True fullscreen mode for the Timer page: hide shared navigation and plan chrome.
   This lives here so it overrides the shared header's normal display:block !important rule. */
html.fs .mph-global-header,
body.fs .mph-global-header,
html:fullscreen .mph-global-header,
body:fullscreen .mph-global-header,
html.fs body.mph-global-nav-ready .mph-global-header,
body.fs.mph-global-nav-ready .mph-global-header,
html.fs .mph-global-panel,
body.fs .mph-global-panel,
html.fs .mph-plan-indicator,
body.fs .mph-plan-indicator,
html.fs .mph-plan-fallback,
body.fs .mph-plan-fallback {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.fs body,
body.fs {
  padding-top: 0 !important;
}

/* Mobile header overflow fix: keep Login / Home / Menu compact on all pages */
@media (max-width: 560px) {
  .mph-global-header {
    width: calc(100% - 12px);
    margin: 6px auto 8px;
    border-radius: 14px;
  }
  .mph-global-top {
    min-height: 46px;
    padding: 6px;
    gap: 5px;
    flex-wrap: nowrap;
  }
  .mph-global-brand {
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
  }
  .mph-global-logo {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    font-size: 10px;
  }
  .mph-global-title {
    min-width: 0;
  }
  .mph-global-name {
    font-size: 10px;
    max-width: 64px;
    letter-spacing: -0.45px;
  }
  .mph-global-actions {
    flex: 0 0 auto;
    gap: 4px;
    min-width: 0;
  }
  .mph-global-auth-link,
  .mph-global-home-btn,
  .mph-global-menu-btn {
    min-height: 30px !important;
    padding: 5px 6px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    gap: 3px;
  }
  .mph-global-home-btn span:first-child,
  .mph-global-menu-icon {
    font-size: 13px;
    line-height: 1;
  }
  .mph-global-menu-label {
    display: inline !important;
  }
  .mph-global-panel.open {
    padding: 8px;
  }
  .mph-global-link,
  .mph-global-close {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }
}

@media (max-width: 380px) {
  .mph-global-name { max-width: 52px; font-size: 9.5px; }
  .mph-global-logo { width: 28px; height: 28px; min-width: 28px; }
  .mph-global-auth-link,
  .mph-global-home-btn,
  .mph-global-menu-btn {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 10px !important;
  }
  .mph-global-menu-label { display: inline !important; }
}


/* Final mobile header sizing: preserve Login / Home / Menu layout while keeping app name visible */
@media (max-width: 560px) {
  .mph-global-header { width: calc(100% - 8px) !important; margin: 5px auto 8px !important; border-radius: 13px !important; }
  .mph-global-top { min-height: 42px !important; padding: 5px !important; gap: 4px !important; flex-wrap: nowrap !important; }
  .mph-global-brand { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; gap: 4px !important; }
  .mph-global-logo { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 8px !important; font-size: 8.5px !important; }
  .mph-global-title { min-width: 0 !important; }
  .mph-global-name { max-width: none !important; font-size: 10.5px !important; line-height: 1.05 !important; letter-spacing: -0.55px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .mph-global-actions { flex: 0 0 auto !important; gap: 3px !important; min-width: 0 !important; }
  .mph-global-auth-link,
  .mph-global-home-btn,
  .mph-global-menu-btn { min-height: 28px !important; padding: 4px 5px !important; border-radius: 8px !important; font-size: 10px !important; line-height: 1 !important; gap: 2px !important; }
  .mph-global-home-btn span:first-child,
  .mph-global-menu-icon { font-size: 11px !important; line-height: 1 !important; }
  .mph-global-menu-label { display: inline !important; }
}
@media (max-width: 390px) {
  .mph-global-logo { display:none !important; }
  .mph-global-name { font-size: 10px !important; max-width: 86px !important; }
  .mph-global-auth-link,
  .mph-global-home-btn,
  .mph-global-menu-btn { padding-left: 4px !important; padding-right: 4px !important; font-size: 9.5px !important; }
  .mph-global-home-btn span:first-child { display:none !important; }
}
@media (max-width: 340px) {
  .mph-global-name { max-width: 72px !important; font-size: 9.5px !important; }
  .mph-global-auth-link,
  .mph-global-home-btn,
  .mph-global-menu-btn { font-size: 9px !important; padding-left: 3px !important; padding-right: 3px !important; }
}