/* ── Progress rings ─────────────────────────────────────────────────────────
   The SVG built by src/ui/ring.js. Each ring has a dim under-track and a bright
   rounded arc in the same colour; a centre slot carries a number, star or flame.
   Colour comes inline (per ring) from the --ring-* tokens; everything else here. */

.ring-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}
.ring { display: block; width: 100%; height: 100%; }
.ring-track { opacity: var(--ring-track); }
.ring-arc {
  transition: stroke-dashoffset var(--duration-3) var(--ease);
}

/* the number / glyph that sits in the hole */
.ring-center {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.ring-center svg {
  width: 52%; height: 52%;
  fill: none; stroke: currentColor;
  stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round;
}
/* a completed cluster fills its centre glyph in the accent (star, flame) */
.ring-center.is-done { color: var(--accent); }
.ring-center.is-done svg { fill: var(--accent); stroke: var(--accent); }

/* a checkmark is a drawn line, not a filled shape — filling it closes the open
   path into a blob that reads as a triangle. Keep it stroked, just in accent. */
.ring-center.is-mark { color: var(--accent); }
.ring-center.is-mark svg { fill: none; stroke: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .ring-arc { transition: none; }
}

/* ── where rings live ──────────────────────────────────────────────────────
   The mode cards, chapter cards, calendar days, and the daily difficulty grid
   each carry a ring in place of (or around) their old glyph. */

/* game home — a ring leads each mode card */
.mode-card .mode-ring { flex: none; display: inline-flex; }
.mode-ring-n { font-size: var(--text-sm); font-weight: 500; }

/* journey — a chapter's greek numeral sits inside its completion ring */
.cc-mark { margin-top: 0; }
.cc-mark .ring-wrap { display: inline-flex; }
.cc-glyph { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--accent); line-height: 1; }

/* daily month header — a ring beside the month name */
.cal-title { display: flex; align-items: center; gap: var(--space-4); }
.cal-title .month { min-width: 0; }

/* daily calendar — every day is a ring holding its number, or a star when done */
.cal-cell.ring-cell {
  border: none; background: none; padding: 0; gap: 0; overflow: visible;
}
.cal-cell.ring-cell.play { cursor: pointer; }
.cal-cell.ring-cell.play:hover { background: none; }
.cal-cell.ring-cell.play:hover .ring-wrap { transform: scale(1.08); }
.cal-cell.ring-cell .ring-wrap { transition: transform var(--t); }
.cal-cell.ring-cell.sel .ring-wrap { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent-line); border-radius: var(--radius-full); }
.cal-day { font-family: var(--font-mono); font-size: var(--text-md); color: var(--dim); }
.cal-cell.today .cal-day { color: var(--accent); }
.cal-cell.future .cal-day { color: var(--mute); }

/* daily difficulty grid — three gated cards, each with a ring */
.daily-grid { max-width: 480px; margin-top: var(--space-5); }
.daily-diff .lvcard-idx { font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.daily-diff .lvcard-mini { min-height: 66px; }
/* the ready-to-play difficulty: a filled accent disc with a chevron — a clear
   "start" affordance, distinct from the hollow check-ring of a solved one (a
   bare ring here read as a broken/half-drawn icon). */
.daily-play {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--on-accent);
}
.daily-play svg {
  width: 24px; height: 24px; margin-left: 2px;   /* optical-centre the chevron */
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* The daily ring's centre streak number (Phase 2/3 of dailyRings). */
.ring-center.ring-base { font-family: var(--font-mono); font-weight: 600; color: var(--ring-easy); font-size: 0.9em; line-height: 1; }
.ring-center.ring-base-lg { font-size: 1.15em; }