/* community.css — the Community tab (public/js/community.js).
 *
 * Its own file for the same reason the panel builds itself in JS: app.css is at
 * its size budget and the rule is split, not grow.
 *
 * Nothing here scrolls. The tab is one column of blocks inside #comBody, which
 * public/js/pager.js measures and pages, so a phone gets pages instead of a
 * scrollbar. Every block is therefore sized in a way that can survive being the
 * only thing on a page: no fixed heights that assume a desktop.
 */

.com-body { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* On a wide screen the two charts sit side by side, so the whole page is one page:
   stacked, they came to more than a 1280x800 stage could hold and the reader had
   to click through to find out when people play. The tiles and the two buttons
   still span the full width. The pager groups by row, so this stays pageable. */
@media (min-width: 900px) {
  .com-body { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .com-tiles, .com-links { grid-column: 1 / -1; }
}

/* --- The three headline numbers ------------------------------------------- */
.com-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.com-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 14px 10px; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
}
.com-tile-n { font-size: 28px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.1; color: #fff; }
.com-tile-l { font-size: 12.5px; color: #c3cbe8; }
/* "Not in yet" is a different state from zero and has to look like one. A tile
   reading 0 says nobody plays; this says we can't see the number right now. */
.com-tile-na { font-size: 13px; font-weight: 600; color: #8b97bd; }
.com-tile-s { font-size: 11px; color: #8b97bd; }

/* --- Blocks --------------------------------------------------------------- */
.com-block {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 14px;
}
.com-block h3 { font-size: 15px; font-weight: 800; letter-spacing: 0.2px; }
.com-sub { font-size: 12.5px; color: #8b97bd; margin: 4px 0 10px; line-height: 1.5; }
.com-failed { margin-bottom: 12px; }

/* --- New accounts per day ------------------------------------------------- */
/* Bars share the row evenly, so 30 days and 90 days both fit without arithmetic
   in the JS. Height is capped in vh rather than px: on a 360px-tall landscape
   phone a 120px chart plus a heading is most of the stage. */
.com-bars {
  display: flex; align-items: flex-end; gap: 2px;
  height: clamp(64px, 14vh, 120px); width: 100%;
}
.com-bar {
  flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7fe3ff, #4aa8d8);
}
/* A day nobody joined is still a day. It keeps its sliver, in a colour that reads
   as "nothing here" rather than as a very small number. */
.com-bar.is-zero { background: rgba(255,255,255,0.08); }
.com-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #8b97bd; margin-top: 6px;
}

/* --- When we play --------------------------------------------------------- */
.com-heat { display: flex; flex-direction: column; gap: 3px; }
.com-row { display: flex; align-items: center; gap: 6px; }
.com-row-l { flex: 0 0 28px; font-size: 10.5px; color: #8b97bd; text-align: right; }
/* Row height is capped rather than square. Square cells look right on a phone and
   turn a 1280px-wide grid into a 400px-tall wall of blue that pushes the rest of
   the page onto a second page. The chart is read by colour, not by area. */
.com-cells {
  display: grid; grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: clamp(7px, 2.2vh, 18px); gap: 2px; flex: 1 1 auto;
}
.com-cell { border-radius: 2px; background: rgba(255,255,255,0.05); }
/* Five bands, dimmest to brightest. Steps rather than a gradient because the eye
   reads bands, and because most of these averages sit under 1. */
.com-cell.s0 { background: rgba(255,255,255,0.05); }
.com-cell.s1 { background: rgba(127,227,255,0.22); }
.com-cell.s2 { background: rgba(127,227,255,0.45); }
.com-cell.s3 { background: rgba(127,227,255,0.70); }
.com-cell.s4 { background: #7fe3ff; }
.com-heat-axis {
  display: flex; justify-content: space-between;
  margin: 4px 0 0 34px; font-size: 10.5px; color: #8b97bd;
}
.com-legend {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  margin-top: 6px; font-size: 10.5px; color: #8b97bd;
}
.com-legend i { width: 11px; height: 11px; display: inline-block; border-radius: 2px; }

/* --- Discord + the fundraiser --------------------------------------------- */
.com-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: none; border: none; padding: 0; }
.com-cta {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff;
  /* 44px is the floor for anything tappable (docs/ui-rules.xml). These are well
     over it, and the whole card is the target, not just the words. */
  min-height: 64px; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05);
  transition: transform var(--dur-1, 120ms) var(--ease, ease), background var(--dur-1, 120ms) var(--ease, ease);
}
.com-cta:hover { background: rgba(255,255,255,0.09); }
.com-cta:active { transform: translateY(1px); }
.com-cta-ico { font-size: 24px; flex: 0 0 auto; }
.com-cta-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.com-cta-text b { font-size: 14.5px; font-weight: 800; }
.com-cta-text small { font-size: 11.5px; color: #b3bcdc; line-height: 1.45; }
.com-cta-discord { border-color: rgba(114,137,218,0.45); background: rgba(114,137,218,0.16); }
.com-cta-discord:hover { background: rgba(114,137,218,0.26); }
.com-cta-fund { border-color: rgba(127,227,255,0.40); background: rgba(127,227,255,0.13); }
.com-cta-fund:hover { background: rgba(127,227,255,0.22); }

/* One column below the width where two cards would each be a word wide. Same
   breakpoint the tiles use, so the whole page reflows at once rather than in
   two awkward stages. */
@media (max-width: 560px) {
  .com-links { grid-template-columns: 1fr; }
  /* Tighter on a phone so the headline numbers and the growth chart land on the
     SAME page. Splitting those two is the one split that costs something: the
     first thing a player sees would be three numbers and a lot of empty space. */
  .com-body { gap: 10px; }
  .com-block { padding: 11px; }
  .com-block h3 { font-size: 14px; }
  .com-sub { margin: 3px 0 7px; font-size: 12px; }
  .com-bars { height: clamp(56px, 12vh, 90px); }
  .com-tiles { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .com-tile { padding: 10px 6px; }
  .com-tile-n { font-size: 21px; }
  .com-tile-l { font-size: 11px; }
  .com-tile-s { display: none; }
}

/* A landscape phone has roughly 200px of stage to work with, so it needs the same
   tightening for the opposite reason: not enough height rather than not enough
   width. Keyed on height so it does not fire on a short desktop window's width. */
@media (max-height: 460px) {
  .com-body { gap: 10px; }
  .com-block { padding: 11px; }
  .com-sub { margin: 3px 0 6px; font-size: 12px; }
  .com-bars { height: clamp(48px, 18vh, 80px); }
  .com-tile { padding: 9px 8px; }
  .com-tile-n { font-size: 21px; }
  .com-tile-s { display: none; }
}