/**
 * YouGoNow App Mode — only applies when Android (or UA) adds html.yg-app
 * Turns the marketing site into a denser app shell (Alpha WebView).
 */
html.yg-app .yg-topbar,
html.yg-app .demo,
html.yg-app .sticky,
html.yg-app #sticky {
  display: none !important;
}

html.yg-app #authBtn,
html.yg-app #accountBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.yg-app body,
html.yg-app body.ygd-page {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

html.yg-app body.has-demo header.site {
  top: 0 !important;
}

/* —— Top site chrome (replaced by native bottom nav) —— */
html.yg-app header.site {
  top: 0 !important;
  z-index: 50 !important;
}

html.yg-app header.site .hd nav {
  display: none !important;
}

html.yg-app header.site .hd .hd-cta {
  display: none !important;
}

html.yg-app #langCur {
  display: none !important;
}

/* —— Cookie banner / Cookies page entry —— */
html.yg-app #ck,
html.yg-app .ck,
html.yg-app #ckOpen,
html.yg-app a[href*="/cookies"],
html.yg-app button[data-i18n="lgCookies"] {
  display: none !important;
}

/* —— Homepage: strip marketing; keep ticket / how / invite / vote / short FAQ —— */
html.yg-app body.home .ticker,
html.yg-app .ticker,
html.yg-app section#trust,
html.yg-app section#pot,
html.yg-app section#live,
html.yg-app .hero .storyrow,
html.yg-app .hero .trow,
html.yg-app .hero .tzn,
html.yg-app .paychips,
html.yg-app #trips .inc,
html.yg-app footer.home-foot,
html.yg-app footer.ygd-foot {
  display: none !important;
}

/* Keep top hero photo; kill empty gap under header */
html.yg-app .hero {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 64px !important;
  padding-bottom: 8px !important;
  justify-content: flex-start !important;
}
html.yg-app body.has-demo .hero {
  padding-top: 64px !important;
}
html.yg-app .hero-in {
  padding-top: 4px !important;
  padding-bottom: 12px !important;
}
html.yg-app .hero .hgrid {
  gap: 12px !important;
  align-items: start !important;
}
html.yg-app .hero .gstage {
  display: flex !important;
  order: -1 !important;
  justify-content: center !important;
  margin: 0 !important;
}
html.yg-app .hero .glass {
  margin-top: 0 !important;
}
html.yg-app .hero .hl .hh1 {
  font-size: clamp(26px, 7vw, 36px) !important;
}
html.yg-app .hero .hbar {
  margin-top: 10px !important;
}

/* Injected compact how + split chart */
html.yg-app #ygAppHomeBrief {
  display: block !important;
  padding: 28px 16px 8px !important;
}
html.yg-app #ygAppHomeBrief .yg-brief-card {
  border: 1px solid rgba(217, 178, 90, 0.28);
  border-radius: 18px;
  padding: 18px;
  background: rgba(10, 42, 34, 0.55);
}
html.yg-app #ygAppHomeBrief h2 {
  font-family: Fraunces, serif;
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--fg, #f6efe2);
}
html.yg-app #ygAppHomeBrief p,
html.yg-app #ygAppHomeBrief li {
  color: var(--mist, rgba(246, 239, 226, 0.74));
  font-size: 15px;
  line-height: 1.45;
}
html.yg-app #ygAppHomeBrief .yg-split {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 10px;
}
html.yg-app #ygAppHomeBrief .yg-split i:nth-child(1) { flex: 70; background: #d9b25a; }
html.yg-app #ygAppHomeBrief .yg-split i:nth-child(2) { flex: 5; background: #5fb39a; }
html.yg-app #ygAppHomeBrief .yg-split i:nth-child(3) { flex: 25; background: rgba(246, 239, 226, 0.22); }
html.yg-app #ygAppHomeBrief .yg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--mist, rgba(246, 239, 226, 0.74));
}

html.yg-app .yg-app-auth-extra {
  display: block !important;
  margin: 12px 0;
}

html.yg-app .yg-app-auth-extra select {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 12px;
  font-size: 16px;
}

/* —— Social share buttons → native Share Sheet (JS) —— */
html.yg-app .shares .btn-wa,
html.yg-app .shares .btn-tg,
html.yg-app .shares .btn-x,
html.yg-app #shWa,
html.yg-app #shTg,
html.yg-app #shX {
  display: none !important;
}

/* —— Email remind → push in app —— */
html.yg-app #remForm,
html.yg-app .remp {
  display: none !important;
}

html.yg-app .yg-app-push-note {
  display: block !important;
  margin-top: 12px;
  color: var(--mist, rgba(246, 239, 226, 0.74));
  font-size: 14px;
  line-height: 1.45;
}

/* —— Vote: email field hidden; account-based (JS fills when logged in) —— */
html.yg-app #voteForm #vEmail,
html.yg-app #vote .gnote {
  display: none !important;
}

html.yg-app .yg-app-vote-note {
  display: block !important;
  margin-top: 10px;
  color: var(--mist, rgba(246, 239, 226, 0.74));
  font-size: 13px;
}

/* —— FAQ: short list + full rules link —— */
html.yg-app #faq details:nth-of-type(n + 4) {
  display: none !important;
}

html.yg-app .yg-app-rules-link {
  display: inline-flex !important;
  margin-top: 16px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(217, 178, 90, 0.45);
  color: var(--gold, #d9b25a);
  text-decoration: none;
  font-weight: 600;
}

/* —— Footer: legal essentials only —— */
html.yg-app footer.home-foot .foot-links a[href*="/support"],
html.yg-app footer.home-foot .foot-links a[href*="/contact"],
html.yg-app footer.home-foot .foot-links a[href*="/live"],
html.yg-app footer.home-foot .foot-links button[data-legal],
html.yg-app footer.ygd-foot a[href*="/support"],
html.yg-app footer.ygd-foot a[href*="/contact"],
html.yg-app footer.ygd-foot a[href*="/live"] {
  display: none !important;
}

html.yg-app footer.home-foot .foot-top span {
  font-size: 12px !important;
}

/* —— Typography & sections —— */
html.yg-app .wrap {
  padding-inline: 16px !important;
}

html.yg-app .sec {
  padding-block: 48px !important;
}

html.yg-app .sec-h {
  font-size: clamp(28px, 7.5vw, 40px) !important;
  margin: 8px 0 10px !important;
  line-height: 1.1 !important;
}

html.yg-app .sec-sub {
  font-size: 15px !important;
  max-width: none !important;
  line-height: 1.45 !important;
}

html.yg-app .sec .btn,
html.yg-app .ygd-page-main .btn,
html.yg-app .drawer .btn,
html.yg-app .ygd-dash .btn {
  min-height: 48px !important;
}

html.yg-app .arch,
html.yg-app .step,
html.yg-app .vopt,
html.yg-app .gcard,
html.yg-app .invite,
html.yg-app .bundle {
  border-radius: 18px !important;
}

html.yg-app .steps {
  gap: 12px !important;
}

html.yg-app .step {
  padding: 16px !important;
}

html.yg-app .invite {
  padding: 20px !important;
}

html.yg-app .arches,
html.yg-app .wall,
html.yg-app .vgrid,
html.yg-app .tgrid {
  gap: 12px !important;
}

html.yg-app details summary {
  min-height: 52px !important;
  padding-block: 14px !important;
  font-size: 16px !important;
}

html.yg-app footer {
  font-size: 12px !important;
  border-top-color: rgba(217, 178, 90, 0.2) !important;
}

html.yg-app footer .wrap {
  padding-block: 16px 20px !important;
  gap: 10px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

html.yg-app footer img {
  height: 22px !important;
}

html.yg-app footer nav,
html.yg-app footer .f-links,
html.yg-app footer .foot-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
}

/* —— Inner pages —— */
html.yg-app .ygd-page-main,
html.yg-app .ygd-legacy {
  padding: 72px 16px 28px !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

html.yg-app .ygd-page-main h1 {
  font-size: clamp(26px, 6.5vw, 34px) !important;
  margin: 0 0 10px !important;
}

html.yg-app .ygd-page-main .lead {
  font-size: 15px !important;
  margin-bottom: 18px !important;
}

html.yg-app .ygd-dash {
  gap: 16px !important;
}

html.yg-app .ygd-dash__hero {
  padding: 18px !important;
  border-radius: 18px !important;
  gap: 14px !important;
}

html.yg-app .ygd-dash__hero h1 {
  font-size: 28px !important;
}

html.yg-app .ygd-dash__lead {
  font-size: 14px !important;
}

html.yg-app .ygd-dash__hero-actions {
  width: 100% !important;
}

html.yg-app .ygd-dash__hero-actions .btn,
html.yg-app .ygd-dash__hero-actions .ygd-dash__remind {
  flex: 1 1 auto !important;
  justify-content: center !important;
}

html.yg-app .ygd-dash__stats {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html.yg-app .ygd-dash__stat {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html.yg-app .ygd-dash__tabs {
  position: sticky !important;
  top: calc(52px + env(safe-area-inset-top, 0px)) !important;
  z-index: 20 !important;
  background: rgba(6, 16, 13, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px !important;
  border-radius: 14px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.yg-app .ygd-dash__tabs button {
  flex: 1 0 auto !important;
  min-height: 44px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}

html.yg-app .ygd-dash__banner,
html.yg-app .ygd-dash__invite,
html.yg-app .ygd-dash__tablewrap,
html.yg-app .ygd-card,
html.yg-app .ygd-panel {
  border-radius: 16px !important;
}

html.yg-app .ygd-dash__invite {
  padding: 16px !important;
}

html.yg-app .ygd-dash__invite h3 {
  font-size: 20px !important;
}

html.yg-app .ygd-dash__tablewrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px !important;
}

html.yg-app .ygd-dash__table {
  min-width: 520px !important;
}

html.yg-app .ygd-form input,
html.yg-app .ygd-form select,
html.yg-app .ygd-form textarea,
html.yg-app .ygd-dash__filters select {
  min-height: 48px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

html.yg-app .ygd-alert {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
}

/* Account legal strip (store checklist) */
html.yg-app .yg-app-account-legal {
  display: block !important;
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(217, 178, 90, 0.22);
  color: var(--mist, rgba(246, 239, 226, 0.74));
  font-size: 13px;
  line-height: 1.5;
}

html.yg-app .yg-app-account-legal a {
  color: var(--gold, #d9b25a);
  text-decoration: none;
  margin-right: 12px;
}

/* —— Auth / buy drawer as bottom sheet —— */
html.yg-app .scrim {
  z-index: 70 !important;
}

html.yg-app .drawer {
  z-index: 71 !important;
  top: auto !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-height: 90% !important;
  border-radius: 22px 22px 0 0 !important;
  transform: translateY(105%) !important;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}

html.yg-app .drawer.open {
  transform: none !important;
}

html.yg-app .drawer h2 {
  font-size: 26px !important;
}

html.yg-app .drawer .btn-gold {
  min-height: 52px !important;
  width: 100% !important;
}

html.yg-app .field input {
  min-height: 50px !important;
  font-size: 16px !important;
}

html.yg-app .lang-banner {
  top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  left: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  font-size: 13px !important;
  border-radius: 14px !important;
}

html.yg-app .ygd-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html.yg-app .ygd-actions .btn {
  width: 100% !important;
}

html.yg-app .yg-toast {
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  border-radius: 14px !important;
}