/* App layout of the homepage (phones and touch tablets, html.gt-app; see mobile-shell.css).
   Lives in the .gtm-home block of index.html; the PC sections it replaces carry .gtd-only.
   Colours come from index.css (--gt-*). */
:root { --gtm-dot: rgba(16, 24, 32, .2); --gtm-good: #138a5e; }
[data-bs-theme="dark"] { --gtm-dot: rgba(255, 255, 255, .2); --gtm-good: #34d399; }

.gtm-home { max-width: 1180px; margin: 0 auto; padding: 0 var(--gtm-gutter) .5rem; }
.gtm-home a { color: inherit; text-decoration: none; }
.gtm-home h1, .gtm-home h2, .gtm-home h3 { color: var(--gt-text); }
/* The whole mode card opens the mode (link on its title, for search engines too); Play stays on top. */
.gtm-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.gtm-card-foot { z-index: 2; }

/* Accent text that stays readable on both themes (yellow on white is not). */
.gtm-card, .gtm-task, .gtm-continue { --accent-ink: color-mix(in srgb, var(--accent) 72%, var(--gt-text)); }
[data-bs-theme="dark"] .gtm-card, [data-bs-theme="dark"] .gtm-task, [data-bs-theme="dark"] .gtm-continue { --accent-ink: var(--accent); }
/* Discovery and the first step use the brand colour: teal in light theme, yellow in dark. */
.gtm-card[data-mode="discovery"], .gtm-continue.is-brand { --accent: var(--gt-brand) !important; }


/* Hero: the homepage's real city dots, lit one after another */
.gtm-hero { padding-top: 6px; }
.gtm-map { position: relative; margin: 0 calc(-1 * var(--gtm-gutter)); }
.gtm-map svg { display: block; width: 100%; height: auto; aspect-ratio: 620 / 316; }
.gtm-map::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, var(--gt-bg)); pointer-events: none; }
.gtm-land { fill: color-mix(in srgb, var(--gt-text) 7%, transparent); stroke: none; }
.gtm-dot { fill: var(--gtm-dot); transition: fill .6s ease, opacity .6s ease; }
.gtm-dot.is-lit { fill: color-mix(in srgb, var(--gt-brand) 70%, transparent); }
.gtm-dot.is-active { fill: var(--gt-brand); filter: drop-shadow(0 0 6px var(--gt-brand)); }
.gtm-map-caption { position: absolute; left: var(--gtm-gutter); bottom: 6px; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; max-width: calc(100% - 2 * var(--gtm-gutter)); padding: .32rem .7rem; border: 1px solid var(--gt-border); border-radius: 999px; background: var(--gt-navbar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .76rem; font-weight: 650; white-space: nowrap; }
#gtm-found-name { overflow: hidden; text-overflow: ellipsis; }
.gtm-map-count { color: var(--gt-muted); font-weight: 500; }
.gtm-map-count strong { color: var(--gt-text); }
.gtm-live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gtm-good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gtm-good) 22%, transparent); }
.gtm-greeting { margin: 1.05rem 0 .35rem; color: var(--gt-brand); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.gtm-hero h1 { margin: 0; font-size: clamp(1.8rem, 8.4vw, 2.2rem); font-weight: 820; line-height: 1.06; letter-spacing: -.035em; }
.gtm-hero h1 span { display: block; }
/* Returning players: the headline shrinks so "Today" stays on the first screen. */
.gtm-hero.is-returning .gtm-greeting { margin-top: .8rem; }
.gtm-hero.is-returning h1 { font-size: clamp(1.25rem, 6vw, 1.5rem); letter-spacing: -.02em; }
.gtm-gradient { padding-bottom: .08em; background: linear-gradient(105deg, var(--gt-brand), color-mix(in srgb, var(--gt-brand) 48%, #ff8f1f)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Continue / start card */
.gtm-continue { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; margin-top: 1.15rem; padding: .95rem; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--gt-border)); border-radius: 22px; background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--gt-card); box-shadow: var(--gt-shadow-soft); }
.gtm-continue-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); font-size: 1.35rem; }
.gtm-continue-body { display: grid; gap: .1rem; min-width: 0; }
.gtm-continue-body small { color: var(--accent-ink); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gtm-continue-body strong { font-size: 1.12rem; line-height: 1.2; }
.gtm-continue-body > span { display: -webkit-box; overflow: hidden; color: var(--gt-muted); font-size: .82rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gtm-play-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 84px; min-height: 48px; padding: 0 1rem; border-radius: 999px; background: var(--gt-btn); color: var(--gt-btn-contrast); font-weight: 800; box-shadow: 0 8px 22px color-mix(in srgb, var(--gt-btn) 30%, transparent); }
.gtm-play-btn i { font-size: 1.2rem; }
.gtm-geoscore { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; padding: .7rem .2rem; color: var(--gt-muted); font-size: .84rem; }
.gtm-geoscore i:first-child { color: #8d63ff; font-size: 1.05rem; }
.gtm-geoscore span { flex: 1; }

/* Sections */
.gtm-section { margin-top: 1.9rem; }
.gtm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.gtm-section-head h2 { margin: 0; font-size: 1.18rem; font-weight: 780; letter-spacing: -.015em; }
.gtm-kicker { display: block; margin-bottom: .15rem; color: var(--gt-muted); font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.gtm-head-link { display: inline-flex; align-items: center; gap: .15rem; color: var(--gt-brand); font-size: .84rem; font-weight: 700; white-space: nowrap; }

/* Today */
.gtm-today-progress { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.gtm-today-progress svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.gtm-ring-track, .gtm-ring-value { fill: none; stroke-width: 4; }
.gtm-ring-track { stroke: var(--gt-border); }
.gtm-ring-value { stroke: var(--gtm-good); stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.gtm-today { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.gtm-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; min-height: 68px; padding: .7rem .85rem; border: 1px solid var(--gt-border-soft); border-radius: 18px; background: var(--gt-card); }
.gtm-task-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); font-size: 1.15rem; }
.gtm-task-body { display: grid; gap: .08rem; min-width: 0; }
.gtm-task-body strong { font-size: .97rem; }
.gtm-task-body small { overflow: hidden; color: var(--gt-muted); font-size: .8rem; line-height: 1.3; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gtm-task-streak { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .5rem; border-radius: 999px; background: color-mix(in srgb, #ff8f1f 15%, transparent); color: color-mix(in srgb, #ff8f1f 80%, var(--gt-text)); font-size: .78rem; font-weight: 800; }
.gtm-task-streak[hidden] { display: none; }
.gtm-task-check { color: var(--gt-muted); font-size: 1.05rem; }
.gtm-task.is-done { border-color: color-mix(in srgb, var(--gtm-good) 35%, var(--gt-border-soft)); background: color-mix(in srgb, var(--gtm-good) 6%, var(--gt-card)); }
.gtm-task.is-done .gtm-task-check { color: var(--gtm-good); font-size: 1.35rem; }

/* Mode carousel */
.gtm-carousel-pos { color: var(--gt-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.gtm-chips { display: flex; gap: .45rem; margin: 0 calc(-1 * var(--gtm-gutter)) .8rem; padding: 0 var(--gtm-gutter); overflow-x: auto; scrollbar-width: none; }
.gtm-chips::-webkit-scrollbar { display: none; }
.gtm-chip { display: inline-flex; flex: none; align-items: center; gap: .35rem; height: 36px; padding: 0 .9rem; border: 1px solid var(--gt-border); border-radius: 999px; background: var(--gt-surface); color: var(--gt-text); font-size: .85rem; font-weight: 650; }
.gtm-chip.is-active { border-color: transparent; background: var(--gt-btn); color: var(--gt-btn-contrast); }
.gtm-carousel { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gtm-gutter)); padding: 2px var(--gtm-gutter) 6px; overflow-x: auto; scroll-padding-inline: var(--gtm-gutter); scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gtm-carousel::-webkit-scrollbar { display: none; }
.gtm-card { position: relative; display: flex; flex: 0 0 84%; flex-direction: column; min-height: 262px; padding: 1.05rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--gt-border-soft)); border-radius: 24px; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 17%, transparent), transparent 58%), linear-gradient(160deg, var(--gt-card), color-mix(in srgb, var(--accent) 5%, var(--gt-card))); scroll-snap-align: start; }
.gtm-card[hidden] { display: none; }
.gtm-card-bg { position: absolute; right: -14px; bottom: -26px; color: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 8.5rem; line-height: 1; transform: rotate(-12deg); pointer-events: none; }
.gtm-card-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.gtm-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-ink); font-size: 1.25rem; }
.gtm-card-tag { overflow: hidden; color: var(--accent-ink); font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-align: right; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.gtm-card h3 { position: static; margin: .85rem 0 .35rem; font-size: 1.32rem; font-weight: 780; letter-spacing: -.02em; }
.gtm-card p { position: relative; display: -webkit-box; margin: 0; overflow: hidden; color: var(--gt-muted); font-size: .88rem; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.gtm-card-meta { position: relative; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; }
.gtm-card-meta > span { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border-radius: 999px; background: var(--gt-surface-2); color: var(--gt-muted); font-size: .74rem; }
.gtm-card-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .9rem; }
.gtm-card-stat { min-width: 0; overflow: hidden; color: var(--accent-ink); font-size: .8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gtm-card-stat[hidden] { display: block; visibility: hidden; }
.gtm-card-play { display: inline-flex; flex: none; align-items: center; gap: .25rem; min-height: 44px; padding: 0 1.05rem; border-radius: 999px; background: var(--gt-btn); color: var(--gt-btn-contrast); font-size: .92rem; font-weight: 800; }
.gtm-card-play i { font-size: 1.15rem; }
.gtm-dots { display: flex; justify-content: center; gap: 5px; margin-top: .55rem; }
.gtm-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--gt-border); transition: width .25s ease, background .25s ease; }
.gtm-dots span.is-active { width: 18px; background: var(--gt-brand); }

/* Live top 3 */
.gtm-top3 { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.gtm-top3 li { display: grid; grid-template-columns: 2rem 36px minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .6rem .8rem; border: 1px solid var(--gt-border-soft); border-radius: 16px; background: var(--gt-card); }
.gtm-top3 li.is-loading, .gtm-top3 li.is-empty { display: block; color: var(--gt-muted); font-size: .86rem; }
.gtm-top3 li.is-me { border-color: color-mix(in srgb, var(--gt-brand) 45%, var(--gt-border)); }
.gtm-top3-rank { color: var(--gt-muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.gtm-top3 li:nth-child(1) .gtm-top3-rank { color: #f5b301; }
.gtm-top3 li:nth-child(2) .gtm-top3-rank { color: #9aa7b4; }
.gtm-top3 li:nth-child(3) .gtm-top3-rank { color: #c27a45; }
.gtm-top3-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gt-surface-2); font-weight: 800; }
.gtm-top3-name { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.gtm-top3-score { text-align: right; }
.gtm-top3-score strong { display: block; font-variant-numeric: tabular-nums; }
.gtm-top3-score small { color: var(--gt-muted); font-size: .66rem; font-weight: 700; letter-spacing: .06em; }

/* Progress */
.gtm-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gtm-progress div { display: grid; gap: .1rem; padding: .8rem .75rem; border: 1px solid var(--gt-border-soft); border-radius: 16px; background: var(--gt-card); }
.gtm-progress strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.gtm-progress small { color: var(--gt-muted); font-size: .72rem; line-height: 1.25; }

/* Guest reminder, right under the continue card: same look as the PC reminder (index.css),
   with a filled Google button that stays readable on both themes. */
.gtm-guest { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; margin-top: .9rem; padding: .9rem 2.6rem .9rem .9rem; border: 1px solid color-mix(in srgb, var(--gt-brand) 34%, var(--gt-border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--gt-brand) 12%, var(--gt-card)), var(--gt-card)); box-shadow: var(--gt-shadow-soft); }
.gtm-guest[hidden] { display: none; }
.gtm-guest-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gt-brand); color: var(--gt-brand-contrast); font-size: 1.15rem; }
.gtm-guest-copy { min-width: 0; }
.gtm-guest-copy strong { display: block; color: var(--gt-text); font-size: .95rem; font-weight: 820; line-height: 1.3; }
.gtm-guest-copy small { display: block; margin-top: .2rem; color: var(--gt-muted); font-size: .8rem; line-height: 1.4; }
.gtm-guest-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.gtm-guest-google, .gtm-guest-signin { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: 0 1rem; border-radius: 999px; font-size: .86rem; font-weight: 800; }
.gtm-guest-google { background: var(--gt-btn); color: var(--gt-btn-contrast) !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--gt-btn) 28%, transparent); }
.gtm-guest-g { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-size: .78rem; font-weight: 900; }
.gtm-guest-signin { border: 1px solid var(--gt-border); color: var(--gt-text) !important; }
.gtm-guest-signin[hidden] { display: none; }
.gtm-guest-close { position: absolute; top: .55rem; right: .55rem; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--gt-muted); }
.gtm-guest-close:hover, .gtm-guest-close:focus-visible { background: var(--gt-surface-2); color: var(--gt-text); }

/* What's new */
.gtm-news { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-top: 1.9rem; padding: .9rem; border: 1px solid var(--gt-border-soft); border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--gt-brand) 9%, var(--gt-card)), var(--gt-card)); }
.gtm-news-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--gt-surface-2); color: var(--gt-brand); font-size: 1.15rem; }
.gtm-news-body { display: grid; gap: .1rem; min-width: 0; }
.gtm-news-body small { color: var(--gt-brand); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gtm-news-body strong { font-size: .96rem; }
.gtm-news-body > span { display: -webkit-box; overflow: hidden; color: var(--gt-muted); font-size: .8rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ------------------------------------------------------------ tablets
   The same page uses the whole width: wider gutters, several cards per row. */
@media (min-width: 600px) {
  .gtm-section { margin-top: 2.4rem; }
  .gtm-section-head h2 { font-size: 1.35rem; }
  .gtm-card { flex-basis: clamp(290px, 44%, 380px); min-height: 280px; }
  .gtm-progress strong { font-size: 1.6rem; }
}
@media (min-width: 760px) {
  .gtm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 2rem; padding-top: 1.6rem; }
  .gtm-map { order: 2; margin: 0; }
  .gtm-map-caption { left: 10px; max-width: calc(100% - 20px); }
  .gtm-hero-copy { order: 1; }
  .gtm-greeting { margin-top: 0; }
  .gtm-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
  .gtm-hero.is-returning h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
  .gtm-home-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .gtm-home-main > * { grid-column: 1 / -1; }
  .gtm-home-main > .gtm-half { grid-column: auto; }
  /* Side-by-side sections: titles on the same line whether or not they have a kicker. */
  .gtm-half .gtm-section-head { min-height: 46px; }
  /* The three daily challenges side by side, as tiles. */
  .gtm-today { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .gtm-task { grid-template-columns: auto 1fr auto; grid-template-areas: "icon streak check" "body body body"; align-items: start; align-content: start; gap: .8rem .6rem; height: 100%; padding: 1rem; }
  .gtm-task-icon { grid-area: icon; }
  .gtm-task-streak { grid-area: streak; justify-self: end; }
  .gtm-task-check { grid-area: check; }
  .gtm-task-body { grid-area: body; }
  .gtm-task-body small { -webkit-line-clamp: 3; }
}
@media (min-width: 1000px) {
  .gtm-card { flex-basis: clamp(290px, 31%, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gtm-dot, .gtm-ring-value, .gtm-dots span { transition: none; }
}