/* Pluto: the home screen, plans, the report choice, route packs, and making communities. */

/* ---------- Home ---------- */
.hm__when { margin-bottom: 8px; font-size: 13.5px; color: var(--muted); }
.hm .megrid > div { min-width: 0; }
.hmhero { margin-bottom: 10px; padding: 24px; border-radius: 32px; background: #0a0a0a; color: #fff; }
.hmhero__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; font-size: 13px; color: rgba(255,255,255,.62); }
.hmhero__top b { font-weight: 600; color: #fff; }
.hmhero h2 { margin-top: 18px; font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -.04em; }
.hmhero__big { display: flex; align-items: center; gap: 10px; font-size: 46px !important; }
.hmhero__big .coinart { width: 40px; height: 43px; }
.hmhero p { margin: 8px 0 20px; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.62); }
.hmhero__go { background: var(--accent); color: var(--on-accent); }
.hmhero__go svg { width: 20px; height: 20px; }
.hmacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.hmact { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border-radius: 28px; background: var(--surface); text-align: left; transition: transform .2s var(--spring); }
.hmact:active { transform: scale(.97); }
.hmact svg { width: 24px; height: 24px; margin-bottom: 18px; }
.hmact b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.hmact span { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.hm .growth { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hm .card > h3 { margin-bottom: 8px; }
.hm .card > p { margin-bottom: 0; }
.hmlink { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hmdot { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 18px; background: var(--surface-2); }
.hmdot .fbadge { margin: 0 !important; }
.hmcount { padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; }
.hmchat { display: block; padding: 8px 0; }
.hmchat b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.hmchat span { display: block; overflow: hidden; margin-top: 1px; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; opacity: .8; }
.hmchat.is-new b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
#hmchats .btn { height: 48px; margin-top: 10px; }
.hmrank { display: flex; align-items: center; gap: 14px; }
.hmrank__badge { flex: none; width: 70px; height: 70px; }
.hmrank__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hmrank__t small { font-size: 12.5px; color: var(--muted); }
.hmrank__t b { font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.hmrank__t .earn__bar { margin: 5px 0 2px; }
.hmpay { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14.5px; }
.hmpay b { min-width: 0; font-weight: 500; }
.hmpay em { flex: none; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-style: normal; font-weight: 700; }
.hmpay span { flex: none; font-size: 12.5px; color: var(--muted); }
.hmup .btn { height: 50px; }
.hmloc { margin-bottom: 10px; }
/* The balance chart: a glowing line in the app colour over a fading fill, on quiet gridlines. Slide across it to read a day. */
.cchart__wrap { margin-top: 18px; }
.cchart__plot { position: relative; height: 176px; touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.cchart { display: block; width: 100%; height: 100%; overflow: visible; }
.cchart__grid { stroke: rgba(255,255,255,.08); stroke-width: 1; stroke-dasharray: 3 5; }
.cchart__glow { fill: none; stroke: var(--accent); stroke-width: 9; stroke-opacity: .22; stroke-linejoin: round; stroke-linecap: round; }
.cchart__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cchart__y { position: absolute; left: 0; transform: translateY(-100%); padding-bottom: 3px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); pointer-events: none; }
.cchart__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--accent), 0 0 16px var(--accent); pointer-events: none; }
.cchart__hair { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.3); pointer-events: none; }
.cchart__hair[hidden], .cchart__tip[hidden] { display: none; }
.cchart__tip { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 14px; background: #fff; color: #0a0a0a; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.cchart__tip b { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.cchart__tip span:last-child { font-size: 11px; color: rgba(0,0,0,.6); }
.cchart__x { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
/* The way in chooser, on first run and in Settings. */
.setup__secret .waypanel { margin: 0; }
.wayline small, .waylabel { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.wayline b { display: block; margin-top: 3px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.waylabel { margin: 16px 0 8px; }
.waychips { display: flex; flex-wrap: wrap; gap: 8px; }
.waychip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text); font-size: 13.5px; font-weight: 500; transition: transform .2s var(--spring); }
.waychip:active { transform: scale(.96); }
.waychip.is-on { background: #fff; color: #0a0a0a; }
.wayinput, .authf input { width: 100%; height: 54px; padding: 0 22px; border: 0; outline: 0; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--text); font: inherit; font-size: 16px; }
.wayinput:focus, .authf input:focus { background: rgba(255,255,255,.13); }
.wayinput { letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.wayerr, .auth__err { margin: 8px 0 0; font-size: 13px; color: #ff8a80; }
.wayerr[hidden], .auth__err[hidden] { display: none; }
/* Log in and sign up. */
.auth .setup__sub { margin-bottom: 24px; }
.auth .setup__sub b { color: var(--text); font-weight: 600; }
.authf { display: block; margin-bottom: 12px; }
.authf small { display: block; margin: 0 0 6px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.auth__go { margin-top: 16px; }
.auth__link { color: var(--text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth__forgot { display: block; margin: 2px 0 0 auto; font-size: 13.5px; }
.auth__switch { margin-top: 20px; text-align: center; font-size: 14.5px; color: var(--muted); }
/* Log in and sign up: rendered art on black, so the images melt into the page. */
.setup.auth { display: block; padding: 0; background: #000; }
.auth h1 { font-size: clamp(38px, 6vw, 52px); }
.auth__in { width: min(420px, 100%); margin: 0; }
.auth__side { position: relative; z-index: 1; display: flex; justify-content: center; padding: 8px 20px 36px; }
.auth__alt { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--text); font-size: 15px; font-weight: 600; transition: transform .2s var(--spring); }
.auth__alt:active { transform: scale(.98); }
.auth__alt svg { width: 22px; height: 22px; }
.auth__or { margin: 14px 0 2px; text-align: center; font-size: 13px; color: var(--muted); }
.tf__quick { margin-top: 0; margin-bottom: 14px; }
.auth__or + form { margin-top: 10px; }
.authpw { position: relative; display: block; }
.authpw input { padding-right: 56px; }
.authpw__eye { position: absolute; top: 50%; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; transform: translateY(-50%); color: var(--muted); }
.authpw__eye svg { width: 20px; height: 20px; }
.authf input::placeholder { color: var(--muted); }
/* A panel in the app colour with faint streets across it. The render sits on top in screen mode, so its black falls away. */
.aart { position: relative; isolation: isolate; height: 270px; overflow: hidden; background: radial-gradient(70% 48% at 50% 40%, color-mix(in srgb, var(--accent) 46%, transparent), transparent), linear-gradient(165deg, color-mix(in srgb, var(--accent) 34%, #0b0b12), color-mix(in srgb, var(--accent) 12%, #08080c) 58%, #060608); -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.aart::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000, transparent); mask-image: radial-gradient(75% 65% at 50% 42%, #000, transparent); }
.aart__img { position: absolute; inset: 0; background: 50% 0 / cover no-repeat; mix-blend-mode: screen; opacity: 0; transition: opacity .4s var(--ease); }
.auth[data-step="form"] .aart__img--map, .auth[data-step="welcome"] .aart__img--hero, .auth[data-step="splash"] .aart__img--hero { opacity: 1; }
.aart__img--hero { background-image: url("../img/auth-hero-red.webp"); }
.aart__img--map { background-image: url("../img/auth-map-red.webp"); }
[data-accent="blue"] .aart__img--hero { background-image: url("../img/auth-hero-blue.webp"); }
[data-accent="blue"] .aart__img--map { background-image: url("../img/auth-map-blue.webp"); }
[data-accent="green"] .aart__img--hero { background-image: url("../img/auth-hero-green.webp"); }
[data-accent="green"] .aart__img--map { background-image: url("../img/auth-map-green.webp"); }
.aart__logo, .aart__line, .aart__brand { display: none; }
/* Phone flow. Splash: the art fills the screen with the logo under it. */
.auth[data-step="splash"] .aart { position: absolute; inset: 0; height: auto; -webkit-mask-image: none; mask-image: none; }
.auth[data-step="splash"] .aart__img--hero { background-size: auto 100%; }
.auth[data-step="splash"] .aart__logo { position: absolute; left: 50%; top: 66%; display: block; width: 104px; height: 104px; transform: translateX(-50%); color: #fff; filter: drop-shadow(0 0 30px var(--accent)); }
.aart__logo svg { display: block; width: 100%; height: 100%; }
.auth[data-step="splash"] .auth__side { display: none; }
/* Welcome: the whole map up top, then the logo and the ways in. */
.auth[data-step="welcome"] { display: flex; flex-direction: column; }
.auth[data-step="welcome"] .aart { flex: 1 0 auto; height: auto; min-height: 400px; }
.auth[data-step="welcome"] .aart__img--hero { background-size: 112% auto; }
.auth[data-step="welcome"] .auth__side { flex: none; margin-top: -84px; padding-top: 0; }
/* Forms: a close up of the map behind the top, with everything centred over it. */
.auth[data-step="form"] .aart { height: 240px; -webkit-mask-image: linear-gradient(#000 38%, transparent 92%); mask-image: linear-gradient(#000 38%, transparent 92%); }
.auth[data-step="form"] .auth__side { margin-top: -106px; }
/* Steps with no logo of their own start below the art. */
#authstep > .tf__h:first-child { padding-top: 66px; }
.auth__mark + h1 { margin-top: 0; }
.auth__in { text-align: center; }
.auth__in .authf, .auth__err { text-align: left; }
.auth .setup__sub { margin-left: auto; margin-right: auto; }
.auth__mark { display: block; width: 56px; height: 56px; margin: 0 auto 12px; color: #fff; filter: drop-shadow(0 0 22px var(--accent)); }
.auth__mark svg { display: block; width: 100%; height: 100%; }
.auth__social { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; margin-top: 12px; border-radius: 999px; background: #fff; color: #0a0a0a; font-size: 15px; font-weight: 600; transition: transform .2s var(--spring); }
.auth__social:active, .auth__round:active { transform: scale(.97); }
.auth__social svg { width: 22px; height: 22px; }
.auth__rounds { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.auth__round { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: transform .2s var(--spring); }
.auth__round svg { width: 24px; height: 24px; }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.auth .tf__p { margin-left: auto; margin-right: auto; }
.tf__key, .tf__codes, .tf__opt { text-align: left; }
.tf__acts { justify-content: center; }
/* Desktop: the art on the left, the form on the right. */
@media (min-width: 900px) {
  .setup.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; padding: 24px; overflow: hidden; }
  .auth .aart { height: 100%; border-radius: 32px; -webkit-mask-image: none; mask-image: none; }
  .auth .aart::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
  .auth .aart__img--hero { background-size: auto 122%; }
  .auth .aart__img--hero { opacity: 1; }
  .auth .aart__img--map { display: none; }
  .auth__mark { display: none; }
  #authstep > .tf__h:first-child { padding-top: 0; }
  .auth[data-step] .auth__side { margin-top: 0; }
  .auth[data-step="form"] .aart { height: 100%; -webkit-mask-image: none; mask-image: none; }
  .auth__in { text-align: left; }
  .auth__or + form { margin-top: 10px; }
  .aart__line { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px; display: block; font-size: clamp(32px, 3.4vw, 50px); font-weight: 500; line-height: 1.08; letter-spacing: -.04em; color: #fff; }
  .aart__brand { position: absolute; z-index: 1; left: 24px; top: 24px; display: flex; align-items: center; gap: 12px; color: #fff; }
  .aart__brand svg { width: 38px; height: 38px; }
  .aart__brand b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
  .auth__side { display: block; height: 100%; overflow-y: auto; padding: 0 24px; }
  .auth__in { margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
}
/* Enabling quick access. */
.qa { text-align: center; padding-top: 8px; }
.qa__tile { display: inline-grid; place-items: center; width: 92px; height: 92px; margin-bottom: 22px; border-radius: 26px; background: rgba(255,255,255,.05); box-shadow: 0 0 44px color-mix(in srgb, var(--accent) 35%, transparent); }
.qa__tile i { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 19px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #1b1b1f), #101013); }
.qa__tile svg { width: 40px; height: 40px; }
/* Two-factor and the transaction password. */
.tf__h { font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -.03em; }
.auth .tf__h { font-size: clamp(32px, 5vw, 40px); letter-spacing: -.04em; }
.tf__p { margin: 10px 0 20px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tf__foot { margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.tf__opt { width: 100%; margin-bottom: 10px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.08); text-align: left; }
.tf__key { margin-bottom: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.08); }
.tf__key small { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tf__key code, .tf__codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.5; word-break: break-word; }
.tf__acts { margin-bottom: 16px; }
.tf__codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.08); }
.tf__go { margin-top: 8px; }
.tf__back { display: block; margin: 14px auto 0; font-size: 13.5px; }
.set-secure .authf input { background: rgba(255,255,255,.08); }
.txsheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px 16px 96px; background: rgba(0,0,0,.6); pointer-events: auto; }
.txsheet__in { width: min(440px, 100%); margin: 0; background: #17171a; }
@media (min-width: 768px) { .txsheet { padding: 16px; } }
/* Settings extras. */
.set-card.is-on .mfrow__sw { background: var(--accent); }
.set-card.is-on .mfrow__sw::after { transform: translateX(16px); }
.set-note { margin: 10px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.set-panel > p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.set-panel__btn { height: 48px; margin-top: 16px; }
.set-who__t { min-width: 0; text-align: center; }
.set-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-times .authf { margin: 0; }
.set-copy p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.set-copy p:last-child { margin-bottom: 0; }
.set-copy b { color: var(--text); font-weight: 600; }
.prio__mine { margin-bottom: 14px; }
.prio__x { display: grid; place-items: center; width: 16px; height: 16px; }
.prio__x svg { width: 14px; height: 14px; }
.hmprio { font-style: normal; font-weight: 600; color: var(--text); }
/* The default profile image: the Pluto logo on a glow of the accent colour. */
.avdef { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 22%, rgba(var(--accent-rgb),.8), #0a0a0a 72%); color: #fff; }
.avdef svg { width: 62% !important; height: 62% !important; }
/* Profile */
.pfhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.pfhead .h1 { margin: 0; }
.pfgear { width: 60px; height: 60px; }
.pfgear svg { width: 32px; height: 32px; }
.pfpic { position: relative; flex: none; display: block; width: 96px; height: 96px; cursor: pointer; }
.pfpic__img { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #0a0a0a; }
.pfpic__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pfpic__badge { position: absolute; right: -8px; bottom: -8px; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); pointer-events: none; }
.pfpic__edit { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0a0a0a; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pfpic__edit svg { width: 16px; height: 16px; }
.pfme { gap: 18px; }
.pfme__t { min-width: 0; }
.pfme h2 { margin: 0 0 2px; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; text-transform: none; transform: none; }
.pfuid { display: block; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pfme p { margin: 0; font-size: 13px; line-height: 1.35; }
.pfme p b { color: var(--text); font-weight: 600; }
/* Settings, after the Spins layout */
.setp { width: 980px; max-width: 100%; margin: 0 auto; }
.set-who { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 30px; }
.set-who__pic { display: block; width: 100px; height: 100px; overflow: hidden; border-radius: 50%; background: #0a0a0a; }
.set-who__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.set-who h2 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; }
.set-group { margin-bottom: 30px; }
.set-group h3 { margin-bottom: 14px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 28px; text-align: left; transition: transform .2s var(--spring); }
button.set-card:active { transform: scale(.98); }
.set-card__ic { flex: none; display: grid; place-items: center; width: 55px; height: 55px; border-radius: 20px; background: rgba(255,255,255,.08); }
.set-card__ic svg { width: 24px; height: 24px; }
.set-card__label { flex: 1; min-width: 0; font-size: 18px; letter-spacing: -.02em; }
.set-card__val { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--muted); }
.set-card__chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.set-card__chev svg { width: 22px; height: 22px; }
.set-card.is-danger { background: var(--red); color: #fff; }
.set-card.is-danger .set-card__ic { background: rgba(255,255,255,.14); }
.set-panel { grid-column: 1 / -1; margin: 0; }
@media (max-width: 767px) {
  .set-grid { grid-template-columns: 1fr; }
  .set-who__pic { width: 90px; height: 90px; }
  .set-who h2 { font-size: 22px; }
  .set-group { margin-bottom: 26px; }
  .set-group h3 { font-size: 16px; }
  .set-card { padding: 10px; border-radius: 22px; }
  .set-card__ic { width: 44px; height: 44px; border-radius: 16px; }
  .set-card__label { font-size: 15px; }
}
/* Over the map: the stay-out count and the stars share a row at one height, and the region floats on its own. */
.maprow { display: flex; align-items: center; gap: 8px; }
.maprow .stayout { margin: 0; align-self: auto; flex: none; }
.mapstars, .mapregion { background: var(--g-tint); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); pointer-events: none; }
.mapstars { display: flex; align-items: center; height: 48px; padding: 0 12px; border-radius: 999px; }
.mapstars[hidden], .mapregion[hidden] { display: none; }
.mapstars .heat { margin: 0; }
.mapstars .heat i { width: 20px; height: 20px; }
/* The region sits at the top of the map, under the stay-out row on a phone and beside the panel on desktop. */
.mapregion { position: absolute; z-index: 4; left: calc(var(--pw) + 40px); top: 8px; padding: 8px 16px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
@media (min-width: 768px) { .maprow { order: -1; align-self: flex-start; } }
@media (max-width: 767px) {
  .mapctl .maprow { flex: none; order: -1; margin-bottom: auto; }
  .mapregion { left: 14px; top: 140px; }
  .mapregion.is-high { top: 76px; }
  .mapctl .mapstars { pointer-events: none; }
  .mapbtns.is-high { top: 14px; }
}
.balpill { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 4px 8px 4px 4px; border-radius: 999px; background: var(--g-card); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); font-variant-numeric: tabular-nums; }
.balpill__bal { display: flex; align-items: center; gap: 10px; }
.balpill__bal b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.balpill__ci { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #0a0a0a; }
.balpill__ci .coinart { width: 100%; height: auto; }
.mktbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mktbar .back { margin: 0; }
/* On desktop the balance lives at the top right of the top bar, on every screen. */
.topbal { grid-column: 3; justify-self: end; }
.app[data-screen="market"] .topbal .hmplus { display: none; }
@media (min-width: 768px) { .mktbar .balpill { display: none; } .app .dock { max-height: calc(100% - 276px); } } /* the dock stays clear of the map buttons */
.mkt { -webkit-backdrop-filter: blur(8px) saturate(140%) !important; backdrop-filter: blur(8px) saturate(140%) !important; }
/* The plus beside a balance opens the Coin Shop. */
.hmplus { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.hmplus svg { width: 18px; height: 18px; }
/* Coin Shop: packs in a grid, each with a stack that grows with the amount. */
.mktgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
@media (min-width: 768px) { .mktgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .mkt__art { width: 240px; max-width: calc(100% - 20px); margin-left: auto; margin-right: auto; } }
.mkt { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 24px; text-align: left; transition: transform .2s var(--spring); }
.mkt:active { transform: scale(.97); }
.mkt__top { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 0; }
.mkt__top b .amt { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.mkt__top b .coinart { width: 20px; height: auto; }
.mkt__top small { font-size: 12px; color: var(--muted); }
.mkt__art { position: relative; height: 112px; margin: 2px 10px 8px; }
.mkt__stack { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; overflow: visible; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.mkt__coin { position: absolute; left: 6%; bottom: 0; width: 66px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.mkt__coin .coinart { display: block; width: 100%; height: auto; }
.mkt__price { display: grid; place-items: center; height: 44px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Map filter */
.filterbtn { position: relative; }
.filterbtn.is-on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.mfrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; text-align: left; opacity: .55; transition: opacity .15s; }
.mfrow.is-on { opacity: 1; }
.mfrow > b { flex: 1; font-size: 14.5px; font-weight: 500; }
.mfrow__i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #0a0a0a; color: #fff; font-style: normal; }
.mfrow__i svg { width: 15px; height: 15px; }
.mfrow__sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.18); transition: background .15s; }
.mfrow__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mfrow.is-on .mfrow__sw { background: var(--accent); }
.mfrow.is-on .mfrow__sw::after { transform: translateX(16px); }
.mfall { width: 100%; margin-top: 8px; }
/* Your point on the map: an arrowhead that turns with you, centred exactly on you. */
.you, .you.is-located { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 0; border-radius: 0; background: none; box-shadow: none; z-index: 2; }
.you::after { display: none; }
.you__hand { position: relative; z-index: 1; display: block; width: 100%; height: 100%; transform: rotate(var(--hand, 0deg)); transition: transform .2s linear; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.you__hand svg { display: block; width: 100%; height: 100%; }
.hm .hmloc > p { margin-bottom: 14px; }
.hmshell { position: relative; display: flex; flex-direction: column; height: 100%; }
/* A game-style scene behind Home. It stays put while the cards scroll over it. */
.app:is([data-screen="home"], [data-screen="market"])::before { inset: 0; width: auto; height: auto; border-radius: 0; opacity: 1; filter: none; transform: none; background: url("../img/home-bg.webp") 50% 30% / cover no-repeat; -webkit-mask-image: linear-gradient(#000 55%, transparent 90%); mask-image: linear-gradient(#000 55%, transparent 90%); }
.hmshell > * { position: relative; }
.hm :is(.hmhero, .hmact, .card, .stat) { -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
@media (max-width: 767px) { .app:is([data-screen="home"], [data-screen="market"])::before { background-size: auto 440px; background-position: 0 0; -webkit-mask-image: linear-gradient(#000 180px, transparent 420px); mask-image: linear-gradient(#000 180px, transparent 420px); } }
.hmshell .scroll { flex: 1; min-height: 0; }
.hmhud, .hmm { display: none; }
/* The phone's top bar, after a game's player bar: image, name and rank to the left, balance to the right. */
@media (max-width: 767px) {
  .hm { padding-bottom: 86px; }
  .hmhud { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 10px; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .hmhud__me { display: flex; align-items: center; height: 48px; border-radius: 999px; background: var(--g-card); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
  .hmhud__me { min-width: 0; gap: 10px; padding: 4px 20px 4px 4px; }
  .hmhud__av { position: relative; flex: none; width: 40px; height: 40px; }
  .hmhud__pic { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #0a0a0a; color: #fff; cursor: pointer; }
  .hmhud__pic img { width: 100%; height: 100%; object-fit: cover; }
  .hmhud__pic svg { width: 24px; height: 24px; }
  .hmhud__badge { position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; object-fit: contain; pointer-events: none; }
  .hmhud__t { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
  .hmhud__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
  .hmhud__t span { font-size: 12.5px; color: var(--muted); }
  /* The bar already shows these */
  .hm .hmrank, .hmhero--foot .hmhero__top > span, .hmhero__big { display: none !important; }
  .hmhero--foot .hmhero__top { min-height: 0; }
  .hmshell .page { padding-top: 6px; }
  .hmm { display: block; }
  .hmhero h2.hmm { margin-top: 10px; }
}

/* ---------- Plans ---------- */
.plans { max-width: 820px; }
.plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { display: flex; flex-direction: column; margin: 0; }
.plan.is-on { box-shadow: inset 0 0 0 2px var(--text); }
.plan small { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan h2 { margin-top: 4px; font-size: 32px; font-weight: 500; letter-spacing: -.04em; }
.plan > p { margin: 6px 0 16px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.plan ul { flex: 1; margin: 0 0 20px; padding: 0; list-style: none; }
.plan li { display: flex; gap: 9px; padding: 6px 0; font-size: 14px; line-height: 1.35; }
.plan li svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
@media (max-width: 767px) { .plans__grid { grid-template-columns: 1fr; } .plans { padding-bottom: 20px; } }

/* ---------- Report: the first choice ---------- */
.repc { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 0 20px 20px; }
.repc > .rep__x { flex: none; background: var(--surface); color: var(--text); }
.repc__in { width: 100%; max-width: 620px; margin: auto; padding: 24px 0; }
.repopt { display: flex; align-items: flex-start; gap: 16px; width: 100%; margin-bottom: 10px; padding: 22px; border-radius: 32px; background: var(--surface); text-align: left; transition: transform .2s var(--spring); }
.repopt:active { transform: scale(.98); }
.repopt__i { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 20px; background: var(--surface-2); }
.repopt__i svg { width: 26px; height: 26px; }
.repopt__t { flex: 1; min-width: 0; }
.repopt__t b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.repopt__t > span { display: block; margin: 4px 0 12px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.repopt__tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-style: normal; font-weight: 700; }
.repopt__tag--rank { background: var(--text); color: var(--surface); }
.rep__skip { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rep__safe { margin-top: 10px; font-size: 13.5px; font-weight: 600; }
.rep__form .opts--unrest { grid-template-columns: 1fr 1fr; }

/* ---------- City unrest badge ---------- */
.fico { display: block; width: 70%; height: 70%; }
.brand__mark { color: #fff; }
.brand__mark svg { width: 26px; height: 26px; }

/* ---------- Route packs ---------- */
.rtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.rtop .back { margin: 0; }
.rpack { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 8px; padding: 16px 18px; border-radius: 24px; background: var(--surface-2); text-align: left; transition: transform .2s var(--spring); }
:root[data-theme="dark"] .rpack { background: rgba(255,255,255,.08); }
.rpack:not([disabled]):active { transform: scale(.98); }
.rpack[disabled] { opacity: .5; cursor: default; }
.rpack__n { flex: none; width: 46px; font-size: 32px; font-weight: 500; letter-spacing: -.04em; }
.rpack__t { flex: 1; min-width: 0; }
.rpack__t b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.rpack__t span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.rpack__p { flex: none; text-align: right; font-size: 15px; font-weight: 700; }
.rpack__p small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.rpack.is-best { background: #0a0a0a; color: #fff; box-shadow: 0 0 0 2px var(--accent); }
:root[data-theme="dark"] .rpack.is-best { background: rgba(255,255,255,.14); }
.rpack.is-best .rpack__t span, .rpack.is-best .rpack__p small { color: rgba(255,255,255,.62); }
.rpack__tag { display: inline-block; margin-bottom: 5px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; }
.rmore { display: block; width: 100%; padding: 14px; text-align: center; font-size: 14px; font-weight: 600; }

/* ---------- Communities ---------- */
.iglabel { display: flex; align-items: center; justify-content: space-between; }
.igadd { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.igadd svg { width: 15px; height: 15px; }
:root[data-theme="dark"] .dock .igadd { background: rgba(255,255,255,.12); }
.ighead__info { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.ignew { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.ignew h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.igcreate { margin-bottom: 26px; }
.igcreate input, .igcreate textarea { display: block; width: 100%; margin-bottom: 8px; padding: 12px 14px; border: 0; outline: 0; border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; resize: none; }
.igcreate input::placeholder, .igcreate textarea::placeholder { color: var(--muted); }
.igcreate .btn { height: 48px; }
:root[data-theme="dark"] .dock .igcreate input, :root[data-theme="dark"] .dock .igcreate textarea { background: rgba(255,255,255,.1); }
.igfind { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.igfind__t { flex: 1; min-width: 0; }
.igfind__t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.igfind__t span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.igjoin { flex: none; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.igsheet { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--surface); animation: fade .15s; }
:root[data-theme="dark"] .igsheet { background: #141416; }
.igsheet__in { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }
.igsheet__top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 20px; text-align: center; }
.igsheet__top b { margin-top: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.igsheet__top span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.igsheet__mem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 0; text-align: left; font-size: 14.5px; }
.igsheet__mem .igav { width: 40px; height: 40px; font-size: 12px; }
.igleave { display: block; width: 100%; margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--surface-2); color: var(--red); font-size: 14.5px; font-weight: 600; }

/* ---------- An amount: the number, then the coin ---------- */
.amt { display: inline-flex; align-items: center; gap: .25em; white-space: nowrap; vertical-align: -.22em; }
.hmact .amt { display: inline-flex; margin: 0; font-size: inherit; }
.amt .coinart { flex: none; width: 1.15em; height: auto; }
.hmact > span { display: inline-flex; align-items: center; gap: 4px; }

/* Icon wells and small round controls are frosted glass, never a solid dark fill. */
:is(.txrow__i, .hmdot, .brow__dot:not(.brow__dot--moving, .brow__dot--cooled), .brow__chev, .set-card__ic, .repopt__i, .mfrow__i, .auth__round, .back, .balpill__ci, .cmt__av, .mapkey__top button, .brand__mark, .hmhud__pic, .igav) {
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}

/* Code and PIN boxes: tall glass rectangles over one invisible input. */
.tf__label { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); text-align: left; }
.cbox { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 56px)); justify-content: center; gap: 8px; margin: 4px 0 18px; }
.cbox__in { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: transparent; caret-color: transparent; font-size: 16px; }
.cbox__in::selection { background: none; color: transparent; }
.cbox__cell { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 14px; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); transition: box-shadow .15s; }
.cbox.is-secret .cbox__cell { font-size: 30px; }
.cbox__in:focus ~ .cbox__cell.is-next { box-shadow: 0 0 0 2px var(--accent); }
.cbox ~ .auth__err { margin-top: -6px; text-align: center; }

/* The report camera: live video, the shutter centred, upload beside it. */
.rep__cam[hidden], .rep__still[hidden], .rep__blocked[hidden], .shutter[hidden] { display: none; }
.rep__ctrl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; padding: 0 20px; }
.rep__ctrl .shutter { grid-column: 2; }
.shutter:disabled { opacity: .5; }
.rep__up { grid-column: 1; justify-self: start; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #fff; cursor: pointer; }
.rep__up svg { box-sizing: content-box; width: 22px; height: 22px; padding: 13px; border-radius: 50%; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rep__blocked { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px; text-align: center; color: #fff; }
.rep__blocked h2 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; }
.rep__blocked p { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.75); }
.rep__blocked .btn { align-self: center; cursor: pointer; }

/* On desktop the security steps line up on the left edge, like the log in form. On a phone they stay centred. */
@media (min-width: 900px) {
  .auth .tf__p { max-width: none; margin-left: 0; margin-right: 0; }
  .auth .cbox { justify-content: start; }
  .auth .cbox ~ .auth__err { text-align: left; }
  .auth .tf__back { margin-left: 0; }
  .auth .tf__label { text-align: left; }
  .auth .tf__acts { justify-content: flex-start; }
  .auth .qa, .auth .qa .tf__p { text-align: left; }
}