/* ═══════════════════════════════════════════════════════════════
   MY STATS — dashboard styling
   Loads after shared/css/pages.css, which holds the rest of the My Stats layout
   (hero, profile, dog picker); this file owns the stats section.
   Tokens come from shared/css/core.css.
   ═══════════════════════════════════════════════════════════════ */

/* Per-game accents, borrowed from the homepage's plate accents so a card is
   identifiable before its title is read. */
.ms-stats {
  --pawdle-accent:     #C98526;
  --pawdleplus-accent: #7B4A5C;
  --connect-accent:    #BF4E1C;
  --pawpaths-accent:   #5C7647;
}

/* The inner wrapper owns the gutter. shared/css/pages.css also pads the section, and
   the two together left only 302px of card inside a 390px phone. */
.ms-stats { padding-inline: 0 }

.ms-stats .ms-stats-inner {
  max-width: 1440px;
  padding-inline: clamp(18px, 5vw, 72px);
}

.ms-stats .ms-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Cross-game strip ─────────────────────────────────────────
   Six figures, so it divides cleanly at two, three and six columns and
   never leaves an item stranded on its own row. */
.ms-stats .ms-crossgame-box {
  margin-top: 30px;
  padding: 24px clamp(18px, 2.4vw, 30px) 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.ms-stats .ms-crossgame-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 24px;
  margin-top: 18px;
}

.ms-stats .ms-cg-label {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

.ms-stats .ms-cg-val {
  margin-top: 7px;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Game cards ───────────────────────────────────────────────
   Two across on desktop, never four: four narrow columns cannot hold a
   label and a value on one line. */
.ms-stats .ms-game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ms-stats .ms-game-box {
  position: relative;
  padding: 0 clamp(18px, 2.4vw, 28px) 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow: hidden;
}

/* The accent is the card's identity, so it is the one place colour is spent. */
.ms-stats .ms-game-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent, var(--line-firm));
}
.ms-stats .ms-game-box--pawdle     { --accent: var(--pawdle-accent) }
.ms-stats .ms-game-box--pawdleplus { --accent: var(--pawdleplus-accent) }
.ms-stats .ms-game-box--connect    { --accent: var(--connect-accent) }
.ms-stats .ms-game-box--pawpaths   { --accent: var(--pawpaths-accent) }

.ms-stats .ms-game-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.ms-stats .ms-game-name-lbl {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}
.ms-stats a.ms-game-name-lbl:hover { color: var(--accent) }

.ms-stats .ms-game-meta {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Stat rows ────────────────────────────────────────────────
   The value has to outweigh its label: this page exists for the numbers. */
.ms-stats .ms-sec-lbl-inner {
  margin: 18px 0 8px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent, var(--muted));
}

.ms-stats .msg-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}

.ms-stats .msg-label {
  font-family: var(--f-sans);
  font-size: .84rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.ms-stats .msg-val {
  font-family: var(--f-sans);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ms-stats .msg-val.hi { color: var(--accent, var(--rust)) }

.ms-stats .msg-divider {
  height: 1px;
  margin: 14px 0 2px;
  background: var(--line);
}

.ms-stats .msg-empty {
  padding: 26px 0 14px;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
}
/* The same loading voice the games use, in the card's own accent. */
.ms-stats .msg-loading {
  padding: 26px 0 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--accent, var(--muted));
}
.ms-stats .msg-empty a {
  color: var(--accent, var(--rust));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Guess distribution ───────────────────────────────────────
   Kept from the old page: the clearest thing on it, and it reports
   solves by guess count, never a win total. */
.ms-stats .ms-dist {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ms-stats .ms-dist-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px;
}

.ms-stats .ms-dist-n,
.ms-stats .ms-dist-count {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ms-stats .ms-dist-count { text-align: right }

.ms-stats .ms-dist-track {
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.ms-stats .ms-dist-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, var(--rust));
  min-width: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .ms-stats .ms-dist-fill { transition: width .5s cubic-bezier(.16, .84, .44, 1) }
}

/* ── Catch-Up Paws ────────────────────────────────────────────
   One quiet block under the month's figures: three pips for the month's
   Paws, one line of status, and the covered days. The card accent marks
   the paws; text stays in ink so it keeps its contrast. */
.ms-stats .ms-cup {
  margin-top: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.ms-stats .ms-cup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ms-stats .ms-cup-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 18px to look at, 44px to tap. */
.ms-stats .ms-cup-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-firm);
  border-radius: 50%;
  font-family: var(--f-sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.ms-stats .ms-cup-help::after { content: ""; position: absolute; inset: -13px }
.ms-stats .ms-cup-help:hover,
.ms-stats .ms-cup-help:focus-visible { color: var(--ink); border-color: var(--accent, var(--rust)) }
.ms-stats .ms-cup-help:focus-visible { outline: 2px solid var(--accent, var(--rust)); outline-offset: 2px }

.ms-stats .ms-cup-pips { display: inline-flex; gap: 6px }
.ms-stats .ms-cup-pip { display: block; width: 15px; height: 15px; color: var(--line-firm) }
.ms-stats .ms-cup-pip .dp-paw { display: block; width: 100%; height: 100% }
.ms-stats .ms-cup-pip.is-used { color: var(--accent, var(--rust)) }
/* Ready but unspent: drawn in outline. */
.ms-stats .ms-cup-pip.is-available { color: var(--accent, var(--rust)) }
.ms-stats .ms-cup-pip.is-available .dp-paw g { fill: transparent; stroke: currentColor; stroke-width: 1.1 }
.ms-stats .ms-cup-pip.is-expired { color: var(--line) }

.ms-stats .ms-cup-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 7px 0 0;
}
.ms-stats .ms-cup-status strong {
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.ms-stats .ms-cup-status span {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}

.ms-stats .ms-cup-days {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.ms-stats .ms-cup-day {
  display: grid;
  grid-template-columns: 4.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent, var(--rust)) 8%, transparent);
  font-size: .8125rem;
}
.ms-stats .ms-cup-day-date {
  font-family: var(--f-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ms-stats .ms-cup-day-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
}
.ms-stats .ms-cup-day-kind .dp-paw { width: 11px; height: 11px; flex: none; color: var(--accent, var(--rust)) }
.ms-stats .ms-cup-day-pts {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* The explainer: closed by default, one line until asked. */
.ms-stats .ms-cup-explainer {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.ms-stats .ms-cup-explainer summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px clamp(18px, 2.4vw, 28px);
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-lg);
}
.ms-stats .ms-cup-explainer summary::-webkit-details-marker { display: none }
.ms-stats .ms-cup-explainer summary:focus { outline: none }
.ms-stats .ms-cup-explainer summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px }
.ms-stats .ms-cup-explainer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--rust);
  background: rgba(191,78,28,.09);
}
.ms-stats .ms-cup-explainer-mark .dp-paw { width: 15px; height: 15px }
.ms-stats .ms-cup-explainer-title {
  font-family: var(--f-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ms-stats .ms-cup-explainer-chev {
  flex: none;
  width: 8px;
  height: 8px;
  margin: -3px 4px 0 auto;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.ms-stats .ms-cup-explainer[open] .ms-cup-explainer-chev { margin-top: 3px; transform: rotate(-135deg) }
@media (prefers-reduced-motion: no-preference) {
  .ms-stats .ms-cup-explainer-chev { transition: transform .3s var(--e-out), margin .3s var(--e-out) }
}
.ms-stats .ms-cup-explainer-body {
  max-width: 64ch;
  padding: 0 clamp(18px, 2.4vw, 28px) 22px calc(clamp(18px, 2.4vw, 28px) + 44px);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ms-stats .ms-cup-explainer-body p { margin: 0 }
.ms-stats .ms-cup-explainer-body ul { margin: 10px 0 0; padding-left: 1.1em }
.ms-stats .ms-cup-explainer-body li + li { margin-top: 5px }
.ms-stats .ms-cup-explainer-body li::marker { color: var(--rust) }

/* ── Responsive ───────────────────────────────────────────────
   Three breakpoints, each fixing a specific measured failure:
   the six-up strip is too tight below 1100, two cards are too narrow
   below 900, and a full card is most of a phone screen below 620. */
@media (max-width: 1100px) {
  .ms-stats .ms-crossgame-grid { grid-template-columns: repeat(3, 1fr) }
}

/* Two columns hold down to about 760, where a card is still wider than the
   phone card that already works. Below that, one column. */
@media (max-width: 760px) {
  .ms-stats .ms-game-grid { grid-template-columns: minmax(0, 1fr); gap: 16px }
}

/* Four games make a long phone page whatever happens, so the card itself is
   tightened rather than hiding numbers behind a tap. */
@media (max-width: 620px) {
  .ms-stats .ms-crossgame-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 18px }
  .ms-stats .ms-crossgame-box { border-radius: var(--r-md); padding: 18px 16px 20px; margin-top: 24px }
  .ms-stats .ms-game-grid { gap: 14px; margin-top: 16px }
  .ms-stats .ms-game-box { border-radius: var(--r-md); padding: 0 16px 18px }
  .ms-stats .ms-game-hd { padding: 18px 0 12px }
  .ms-stats .ms-game-name-lbl { font-size: 1.25rem }
  .ms-stats .ms-game-meta { font-size: .6rem }
  .ms-stats .ms-sec-lbl-inner { margin: 14px 0 4px }
  .ms-stats .msg-row { padding: 5px 0 }
  .ms-stats .msg-label { font-size: .8rem }
  .ms-stats .msg-val { font-size: 1rem }
  .ms-stats .msg-divider { margin: 10px 0 0 }
  .ms-stats .ms-dist { margin-top: 14px; padding-top: 12px; gap: 4px }
  .ms-stats .ms-dist-track { height: 7px }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
.dp-dark .ms-stats .ms-crossgame-box,
.dp-dark .ms-stats .ms-game-box { background: var(--night-2); border-color: var(--night-line) }
.dp-dark .ms-stats .ms-cg-label { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-cg-val { color: var(--cream) }
.dp-dark .ms-stats .ms-game-hd { border-color: var(--night-line) }
.dp-dark .ms-stats .ms-game-name-lbl { color: var(--cream) }
.dp-dark .ms-stats .ms-game-meta { color: var(--cream-mute) }
.dp-dark .ms-stats .msg-label { color: rgba(244,234,214,.78) }
.dp-dark .ms-stats .msg-val { color: var(--cream) }
.dp-dark .ms-stats .msg-divider { background: var(--night-line) }
.dp-dark .ms-stats .msg-empty { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-dist { border-color: var(--night-line) }
.dp-dark .ms-stats .ms-dist-n,
.dp-dark .ms-stats .ms-dist-count { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-dist-track { background: var(--night-line) }
.dp-dark .ms-stats .ms-cup { border-color: var(--night-line) }
.dp-dark .ms-stats .ms-cup-label,
.dp-dark .ms-stats .ms-cup-status span { color: var(--cream-mute) }
.dp-dark .ms-stats .ms-cup-help { color: var(--cream-mute); border-color: rgba(244,234,214,.28) }
.dp-dark .ms-stats .ms-cup-help:hover,
.dp-dark .ms-stats .ms-cup-help:focus-visible { color: var(--cream) }
.dp-dark .ms-stats .ms-cup-pip { color: rgba(244,234,214,.26) }
.dp-dark .ms-stats .ms-cup-pip.is-used,
.dp-dark .ms-stats .ms-cup-pip.is-available { color: var(--accent, var(--amber)) }
.dp-dark .ms-stats .ms-cup-pip.is-expired { color: var(--night-line) }
.dp-dark .ms-stats .ms-cup-status strong,
.dp-dark .ms-stats .ms-cup-day-pts { color: var(--cream) }
.dp-dark .ms-stats .ms-cup-day-date,
.dp-dark .ms-stats .ms-cup-day-kind { color: rgba(244,234,214,.78) }
.dp-dark .ms-stats .ms-cup-day { background: color-mix(in srgb, var(--accent, var(--amber)) 14%, transparent) }
.dp-dark .ms-stats .ms-cup-explainer { background: var(--night-2); border-color: var(--night-line) }
.dp-dark .ms-stats .ms-cup-explainer-title { color: var(--cream) }
.dp-dark .ms-stats .ms-cup-explainer-mark { color: var(--amber); background: rgba(201,133,38,.14) }
.dp-dark .ms-stats .ms-cup-explainer-chev { border-color: var(--cream-mute) }
.dp-dark .ms-stats .ms-cup-explainer-body { color: rgba(244,234,214,.78) }
.dp-dark .ms-stats .ms-cup-explainer-body li::marker { color: var(--amber) }