/* =========================================================================
   EMPIRIUM OS — MOBILE: THE GRID (focus rewards)

   Styles for the reward panel on the Focus Sessions screen. Scoped under
   .fg-* and, for the palette, under .fg-card — the neon-on-black city is a
   deliberately hotter surface than the rest of the app, and none of it may
   leak into the navy shell around it.

   PALETTE IS TOKENISED, NOT HARD-CODED. Everything the SVG draws with
   (--fg-neon, --fg-hot, the tower and sky ramps) is declared once on
   .fg-card. The skyline in js/mobile-focus-rewards.js references those
   variables by name inside its gradients and patterns, so re-skinning the
   city — a seasonal palette, a level-tier colour — is an edit to this block
   and nothing else. It also means the SVG inherits the app's accent rather
   than duplicating the hex.

   NO CANVAS, NO IMAGES. The city is inline SVG and the heatmap is a flex
   grid of spans. Both are sharp at any density, both re-render from cache
   with zero network, and both cost nothing to redraw when the panel repaints
   after a session ends.
   ========================================================================= */

.fg-card{
  /* The city's own palette. Built out of the app accent so the reward reads
     as part of the same product, pushed hotter and darker than the shell. */
  --fg-neon:#93DCF0;
  --fg-hot:#FF5D8F;
  --fg-win:#BFF0FF;
  --fg-sky-top:#05060F;
  --fg-sky-bot:#0B1030;
  --fg-tower-top:#0A1236;
  --fg-tower-bot:#050713;
  --fg-haze:rgba(147,220,240,.20);

  padding-bottom:14px;
}

/* ---------------- head: level badge + district ---------------- */
.fg-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }

.fg-level{
  flex:none; width:52px; height:52px; border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.04));
  border:1px solid var(--accent);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.18) inset;
}
.fg-level b{
  font-family:var(--font-display); font-size:22px; font-weight:700;
  line-height:1; color:var(--accent);
}
.fg-level span{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:1.2px;
  color:var(--faint); margin-top:2px;
}

.fg-head-main{ flex:1; min-width:0; }
.fg-district{
  font-family:var(--font-display); font-size:17px; font-weight:600;
  letter-spacing:.3px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fg-next{
  margin-top:3px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.5px; color:var(--muted);
}

/* ---------------- progress to the next level ---------------- */
.fg-bar{
  height:5px; border-radius:3px; overflow:hidden;
  background:var(--card-subtle); border:1px solid var(--line);
  margin-bottom:12px;
}
.fg-bar i{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--accent-soft), var(--accent));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.5);
  transition:width .5s var(--ease-hud, ease);
}

/* ---------------- the skyline ----------------
   preserveAspectRatio="none" on the SVG plus a fixed CSS height is what lets
   one 320-wide viewBox fill any phone: the city stretches horizontally with
   the card and keeps its height, which is exactly right for a skyline (a
   wider city, not a zoomed one). */
.fg-sky{
  display:block; width:100%; height:132px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--fg-sky-top);
  margin-bottom:12px;
}

/* The one moving thing on the panel: the spire beacons. Slow, low-contrast,
   and flattened entirely under reduced-motion at the foot of this file. */
.fg-beacon{ animation:fg-pulse 3.2s ease-in-out infinite; transform-origin:center; }
@keyframes fg-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---------------- stat tiles ---------------- */
.fg-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
  margin-bottom:14px;
}
.fg-stat{
  padding:9px 4px; text-align:center;
  background:var(--card-subtle); border:1px solid var(--line);
  border-radius:var(--r-sm);
  min-width:0;
}
.fg-stat-v{
  font-family:var(--font-display); font-size:14px; font-weight:600;
  color:var(--text); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fg-stat-l{
  margin-top:3px;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--accent);
}
.fg-stat-s{ margin-top:1px; font-size:9px; line-height:1.3; color:var(--faint); }

/* Four tiles is tight on a 320px phone — drop to two rows rather than
   letting the values ellipsis away. */
@media (max-width:359px){
  .fg-stats{ grid-template-columns:repeat(2, 1fr); }
}

/* ---------------- heatmap ----------------
   18 columns of 7 days. The grid is the only thing on this panel that can
   overflow horizontally on a very narrow phone, so it scrolls in its own
   track rather than forcing the card wider. */
.fg-heat{ margin-bottom:10px; }

.fg-heat-grid{
  display:flex; gap:3px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fg-heat-grid::-webkit-scrollbar{ display:none; }

.fg-col{ display:flex; flex-direction:column; gap:3px; flex:1 1 0; min-width:9px; }

.fg-cell{
  display:block; width:100%; aspect-ratio:1; border-radius:2px;
  background:var(--card-subtle);
  border:1px solid transparent;
}
/* Five steps of the accent, floor to ceiling. l0 is deliberately visible
   rather than invisible: an empty day is a day you can see you missed. */
.fg-cell.l0{ background:rgba(var(--accent-rgb),.05); }
.fg-cell.l1{ background:rgba(var(--accent-rgb),.22); }
.fg-cell.l2{ background:rgba(var(--accent-rgb),.42); }
.fg-cell.l3{ background:rgba(var(--accent-rgb),.68); }
.fg-cell.l4{
  background:var(--accent);
  box-shadow:0 0 6px rgba(var(--accent-rgb),.55);
}
.fg-cell.is-future{ background:transparent; border-color:var(--line-soft); }
.fg-cell.is-today{ border-color:var(--fg-hot); }

.fg-heat-months{
  display:flex; gap:3px; margin-top:4px;
}
.fg-mo{
  flex:1 1 0; min-width:9px;
  font-family:var(--font-mono); font-size:8px; letter-spacing:.4px;
  color:var(--faint); white-space:nowrap;
}

.fg-heat-key{
  display:flex; align-items:center; justify-content:flex-end; gap:3px;
  margin-top:8px;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--faint);
}
.fg-heat-key .fg-cell{ width:9px; height:9px; flex:none; aspect-ratio:auto; }
.fg-heat-key span:first-child{ margin-right:3px; }
.fg-heat-key span:last-child{ margin-left:3px; }

/* ---------------- legend ---------------- */
.fg-legend{
  margin:0; padding-top:10px; border-top:1px solid var(--line-soft);
  font-size:11px; line-height:1.5; color:var(--faint);
}

@media (prefers-reduced-motion:reduce){
  .fg-beacon{ animation:none; opacity:.8; }
  .fg-bar i{ transition:none; }
}