/*
 * Monthly contest stats (stats.php).
 *
 * Builds on home.css (panels, buttons, avatars) and poetry.css (the poem
 * rows): this file adds the month totals, the Go Hard ranking, the place
 * numbers and the phone rules for #pv-stats. main4.css still styles the
 * header, the contest box, the login box and the side bar.
 */

/* ---- Month totals ---------------------------------------------------- */
.pvs-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #262626;
}
.pvs-tiles div { padding: 12px; border: 1px solid #262626; border-radius: 8px; background: #111; text-align: center; }
.pvs-tiles dt { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--pvh-muted); }
.pvs-tiles dd { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--pvh-gold-bright); }

/* ---- Go Hard ranking ------------------------------------------------- */
.pvs-gohard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pvs-gohard__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #111;
}
.pvs-gohard__row .pvh-avatar { flex: none; width: 48px; height: 48px; font-size: 20px; }
.pvs-gohard__row--lead {
  grid-column: 1 / -1;
  padding: 16px;
  border: 2px solid var(--pvh-gold-deep);
  background: linear-gradient(160deg, #1d1606, #0e0e0e 55%);
}
.pvs-gohard__row--lead .pvh-avatar { width: 80px; height: 80px; font-size: 32px; }
.pvs-gohard__who { min-width: 0; }
.pvs-gohard__who a { display: block; font-size: 15px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.pvh .pvs-gohard__who a { color: #fff; }
.pvh .pvs-gohard__who a:hover { color: var(--pvh-gold-bright); }
.pvs-gohard__row--lead .pvs-gohard__who a { font-size: 20px; }
.pvs-gohard__who .pvh-muted { display: block; }

.pvs-rank {
  flex: none;
  width: 28px;
  font-size: 16px;
  font-weight: 700;
  text-align: right;
  color: var(--pvh-muted);
}
.pvs-rank--1 { color: var(--pvh-gold-bright); font-size: 22px; }
.pvs-rank--2 { color: #d9d9d9; }
.pvs-rank--3 { color: #cd7f32; }

/* ---- Top Spot place numbers ------------------------------------------ */
.pvs-place { margin-right: 4px; color: var(--pvh-gold-bright); }

/* ---- Phones ---------------------------------------------------------- */
@media (max-width: 760px) {
  #pv-stats #site-wrapper,
  #pv-stats #top-wrapper,
  #pv-stats #middle-wrapper,
  #pv-stats #left-col,
  #pv-stats #right-col,
  #pv-stats #bottom-wrapper,
  #pv-stats #bottom-menu {
    width: auto;
    float: none;
  }
  #pv-stats #site-wrapper { padding: 0 12px; }
  #pv-stats #top-wrapper { height: auto; overflow: hidden; }
  #pv-stats #top-wrapper #logo { float: none; }
  #pv-stats #logo img { max-width: 70%; height: auto; }
  #pv-stats #top-wrapper #top-menu { float: none; }
  #pv-stats #bottom-wrapper { height: auto; }
  #pv-stats #right-col { padding: 0; margin-top: 14px; }

  .pvs-tiles { grid-template-columns: repeat(2, 1fr); }
  .pvs-tiles dd { font-size: 22px; }
  .pvl-row.pvl-feat { padding: 18px 16px; }
}