/* The ranking score: «Д-градиент» — a ring of 10 divisions, cold -> hot (the owner's choice, TASK-1140, INBOX #262, 20.10.2026).
   Spec: docs/os/work/TASK-1140/spec.md. Homepage ranking only (.ranking .ranking-list); the review head (.rv-hero) and
   .review-card keep the old ring. Loaded after rank-phone.css so the number sizes below win at the same specificity.
   Markup (partials/casino-card.html): <div class="score" style="--s:{{score}}" …> — the build always writes --s.
   The svg stays in the markup and is hidden; ::before paints the ring, ::after the hole. Colour follows the division,
   not the casino: it shows how much is scored, the number and the aria-label carry the meaning.
   Without --s the ::before background is invalid -> no ring, the number still reads. No green, yellow/gold or pure red. */
:root {
  --score-empty: #ede6f6;                                       /* empty divisions = today's pale purple track */
  --heat-1: #4c82e0; --heat-2: #5070da; --heat-3: #575dd0; --heat-4: #6149c4; --heat-5: #7339b8;
  --heat-6: #8e30aa; --heat-7: #b52f8f; --heat-8: #f76707; --heat-9: #ea580c; --heat-10: #d9480f;
}
.ranking .ranking-list .score-ring { --card: var(--surface); }   /* gaps and hole in the row's colour */
.ranking .ranking-list .score-ring svg { display: none; }
.ranking .ranking-list .score-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-conic-gradient(from -2.5deg, var(--card) 0deg 5deg, transparent 5deg 36deg),   /* 10 gaps of 5deg */
    conic-gradient(transparent 0deg calc(var(--s) * 36deg), var(--score-empty) 0deg),          /* empty after the score */
    conic-gradient(var(--heat-1) 0deg 36deg, var(--heat-2) 0deg 72deg, var(--heat-3) 0deg 108deg, var(--heat-4) 0deg 144deg,
                   var(--heat-5) 0deg 180deg, var(--heat-6) 0deg 216deg, var(--heat-7) 0deg 252deg, var(--heat-8) 0deg 288deg,
                   var(--heat-9) 0deg 324deg, var(--heat-10) 0deg);
}
.ranking .ranking-list .score-ring::after { content: ""; position: absolute; inset: 15.625%; border-radius: 50%; background: var(--card); } /* ring 10 of 64 */

/* bigger number (was 21 / 15 / 14 / 13) */
.ranking .ranking-list .score-value { position: relative; z-index: 1; font-size: 22px; }          /* 760-1199, ring 59 */
@media (min-width: 1200px) { .ranking .ranking-list .score-value { font-size: 16px; } }          /* ring 40 */
@media (max-width: 759px)  { .ranking .ranking-list .score-value { font-size: 15px; } }          /* ring 36 */
@media (max-width: 359px)  { .ranking .ranking-list .score-value { font-size: 13px; } }          /* ring 32 */

/* forced colours: no painted ring, the number stays as text */
@media (forced-colors: active) {
  .ranking .ranking-list .score-ring::before, .ranking .ranking-list .score-ring::after { display: none; }
}