/* GeoTrainers app layout for phones and touch tablets (index, stats, stats-mode, leaderboards).
   A script in each page's <head> sets html.gt-app before the first paint on screens up to
   759 px, and on touch screens (no hover, coarse pointer) up to 1366 px. PCs never get it:
   their layout is untouched. .gtm-only blocks exist only in the app layout, .gtd-only ones
   only in the PC layout. The shell has its own --sh-* tokens (the homepage palette) so the
   app bar and the tab bar look the same on every page, whatever the page's own colours. */

html:not(.gt-app) .gtm-only { display: none !important; }
.gt-app .gtd-only { display: none !important; }

:root {
  --sh-brand: #0c7489;
  --sh-btn: #0c7489;
  --sh-btn-contrast: #ffffff;
  --sh-bg: #f3f6f7;
  --sh-card: #ffffff;
  --sh-text: #101820;
  --sh-muted: #5e6972;
  --sh-border: rgba(16, 24, 32, .12);
  --sh-border-soft: rgba(16, 24, 32, .09);
  --sh-surface: rgba(12, 116, 137, .055);
  --sh-navbar-bg: rgba(243, 246, 247, .88);
  --gtm-tabbar: 64px;
  --gtm-gutter: 16px;
}
[data-bs-theme="dark"] {
  --sh-brand: #fee715;
  --sh-btn: #fee715;
  --sh-btn-contrast: #101820;
  --sh-bg: #0b1118;
  --sh-card: #111b24;
  --sh-text: #f4f7fa;
  --sh-muted: #a6b0ba;
  --sh-border: rgba(255, 255, 255, .13);
  --sh-border-soft: rgba(255, 255, 255, .085);
  --sh-surface: rgba(255, 255, 255, .045);
  --sh-navbar-bg: rgba(11, 17, 24, .88);
}
@media (min-width: 600px) { :root { --gtm-gutter: 28px; } }
@media (min-width: 760px) { :root { --gtm-gutter: 32px; } }

/* Room for the fixed tab bar under the last content. */
.gt-app body { padding-bottom: calc(var(--gtm-tabbar) + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
.gt-app #gt-scroll-progress { display: none; }

/* Bootstrap .g-5 rows (3rem gutter) overflow the 12 px container padding by 12 px; on phones that
   widens the layout viewport and pushes the fixed tab bar off screen. */
.gt-app .row.g-5 { --bs-gutter-x: 1.5rem; }

/* The site navbar becomes the app bar: logo, theme and language. Menus and account move to the tab bar. */
.gt-app .gt-navbar { position: sticky !important; top: 0; z-index: 1030; min-height: 0 !important; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 0 0 !important; border-bottom: 1px solid var(--sh-border-soft); background: var(--sh-navbar-bg) !important; box-shadow: none !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.gt-app .gt-navbar > .container { flex-wrap: nowrap; max-width: 1180px; height: 58px; padding-inline: var(--gtm-gutter); }
.gt-app .gt-navbar .navbar-brand img { width: auto !important; height: 34px !important; }
.gt-app .gt-navbar .navbar-toggler,
.gt-app .gt-navbar .navbar-nav,
.gt-app .gt-navbar .gt-nav-account,
.gt-app .gt-navbar .gt-admin-badge { display: none !important; }
.gt-app .gt-navbar .navbar-collapse { display: flex !important; flex: 0 0 auto; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.gt-app .gt-navbar .gt-nav-actions { display: flex; flex-wrap: nowrap; gap: .45rem; margin: 0; padding: 0; border: 0; }
.gt-app .gt-navbar .gt-icon-btn { width: 40px; height: 40px; border-radius: 50%; }

/* Bottom tab bar */
.gtm-tabbar { position: fixed; bottom: 0; left: 0; z-index: 1040; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: calc(var(--gtm-tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); padding-inline: max(env(safe-area-inset-left), calc((100% - 620px) / 2)); border-top: 1px solid var(--sh-border-soft); background: var(--sh-navbar-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.gtm-tabbar a, .gtm-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 0; padding: 0; border: 0; background: none; color: var(--sh-muted); font-size: .7rem; font-weight: 650; text-decoration: none; }
.gtm-tabbar a > span, .gtm-tabbar button > span { max-width: 100%; overflow: hidden; padding: 0 3px; text-overflow: ellipsis; white-space: nowrap; }
.gtm-tabbar i { font-size: 1.25rem; line-height: 1; }
.gtm-tabbar .is-active { color: var(--sh-text); }
.gtm-tabbar .is-active i { color: var(--sh-brand); }
.gtm-tabbar .gtm-tab-play i { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -24px; border: 4px solid var(--sh-bg); border-radius: 50%; background: var(--sh-btn); color: var(--sh-btn-contrast); font-size: 1.35rem; box-shadow: 0 8px 20px color-mix(in srgb, var(--sh-btn) 35%, transparent); }
.gtm-tabbar .gtm-tab-play > span { color: var(--sh-text); }
.gtm-tab-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .78rem; font-weight: 800; }
.gtm-tab-avatar.has-initial { background: var(--sh-btn); color: var(--sh-btn-contrast); }
.gtm-tab-avatar i { font-size: 1.25rem; }
.gtm-tabbar :focus-visible, .gtm-sheet :focus-visible { outline: 3px solid color-mix(in srgb, var(--sh-brand) 62%, transparent); outline-offset: 2px; border-radius: 12px; }

/* "Play" sheet: every mode in one tap */
.gtm-sheet-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(4, 8, 12, .55); opacity: 0; transition: opacity .25s ease; }
.gtm-sheet { position: fixed; bottom: 0; left: 50%; z-index: 1060; width: min(100%, 760px); max-height: 84vh; padding: .5rem var(--gtm-gutter) calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 26px 26px 0 0; background: var(--sh-card); color: var(--sh-text); box-shadow: 0 -20px 60px rgba(0, 0, 0, .3); transform: translate(-50%, 100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.gtm-sheet.is-open { transform: translate(-50%, 0); }
.gtm-sheet-backdrop.is-open { opacity: 1; }
.gtm-sheet-grip { width: 42px; height: 5px; margin: 0 auto .6rem; border-radius: 999px; background: var(--sh-border); }
.gtm-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.gtm-sheet-head h2 { margin: 0; color: var(--sh-text); font-size: 1.15rem; font-weight: 780; }
.gtm-sheet-close { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--sh-border); border-radius: 50%; background: var(--sh-surface); color: var(--sh-text); }
.gtm-launcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gtm-launcher a { --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--sh-text)); display: grid; justify-items: center; align-content: start; gap: .3rem; height: 100%; padding: .8rem .35rem; border-radius: 16px; background: var(--sh-surface); color: var(--sh-text); text-align: center; text-decoration: none; }
[data-bs-theme="dark"] .gtm-launcher a { --accent-ink: var(--accent); }
.gtm-launcher a[data-mode="discovery"] { --accent: var(--sh-brand) !important; }
.gtm-launcher-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); font-size: 1.3rem; }
.gtm-launcher strong { font-size: .8rem; line-height: 1.2; }
.gtm-launcher small { color: var(--sh-muted); font-size: .66rem; line-height: 1.2; }
@media (min-width: 600px) { .gtm-launcher { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gtm-launcher { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Horizontal chip rows (mode switcher of the stats dashboard). */
.gtm-chips-row { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.gtm-chips-row::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) { .gtm-sheet, .gtm-sheet-backdrop { transition: none; } }