/* wr_grades.css — THE GRADE COLOURS, in one place (Deploy 73e, Ali 8 Oct).

   The ladder's rungs, Lost to Made True, and the letter grades E to SSS (a companion's bond) wear the same colours everywhere:
   the front page, the game's GRADES panel, the turn cards and the ideas, a chapter's page.

   RUNGS     Lost, Told, Repeated, Remembered, Made into Song as they always were (each the colour of its loot);
             Made into Myth pale gold, Made into Legend a deeper golden orange, Made True a cycling rainbow, like Synth.pub's SSS
             (templates/battle_prose_arena.html, rainbowRide). Under reduced motion the rainbow holds still.
   LETTERS   E to S as the game had them (wr_pack.js), SS a deep gold, SSS the same rainbow.

   Use:  <span class="g-chip" data-g="myth">Made into Myth</span>     a chip with a border
         <b class="g-text" data-g="true">Made True</b>                  coloured words (the rainbow rides the letters)
         <span class="b-chip" data-b="SS">SS</span>                     a bond letter
         <div class="g-ring" data-g="true">…</div>                       a rainbow border on any box with a border-radius
         var(--g-legend), var(--b-a) ...                               the colours themselves
   data-g: lost told repeated remembered song myth legend true.  data-b: E D C B A S SS SSS. */
:root {
  --g-lost: #FB7185; --g-told: #E5E7EB; --g-repeated: #4ADE80; --g-remembered: #22D3EE; --g-song: #C084FC;
  --g-myth: #FDE68A; --g-legend: #F59E0B;
  --g-true: #F0ABFC;   /* a single colour standing in for the rainbow where one colour is needed (a glow, a tint) */
  --g-rainbow: linear-gradient(90deg, #ff6b6b, #ffb36b, #ffe96b, #7de87d, #6bd0ff, #ab6bdf, #ff6bab, #ff6b6b);
  --g-rainbow-v: linear-gradient(180deg, #ff6b6b, #ffb36b, #ffe96b, #7de87d, #6bd0ff, #ab6bdf, #ff6bab, #ff6b6b);
  /* the rainbow repeats every --g-span, so even a short word shows all of it, and the ride loops without a jump */
  --g-span: 5em;   /* keep equal to the 5em in wrgRide */
  --b-e: #FB7185; --b-d: #7E86B8; --b-c: #C9C2DC; --b-b: #4ADE80; --b-a: #C084FC; --b-s: #FBBF24; --b-ss: #D97706;
  --b-sss: var(--g-true);
}

[data-g="lost"] { --gc: var(--g-lost); }
[data-g="told"] { --gc: var(--g-told); }
[data-g="repeated"] { --gc: var(--g-repeated); }
[data-g="remembered"] { --gc: var(--g-remembered); }
[data-g="song"] { --gc: var(--g-song); }
[data-g="myth"] { --gc: var(--g-myth); }
[data-g="legend"] { --gc: var(--g-legend); }
[data-g="true"] { --gc: var(--g-true); }
[data-b="E"] { --bc: var(--b-e); } [data-b="D"] { --bc: var(--b-d); } [data-b="C"] { --bc: var(--b-c); } [data-b="B"] { --bc: var(--b-b); }
[data-b="A"] { --bc: var(--b-a); } [data-b="S"] { --bc: var(--b-s); } [data-b="SS"] { --bc: var(--b-ss); } [data-b="SSS"] { --bc: var(--b-sss); }

/* the words */
.g-text[data-g] { color: var(--gc); }
/* the chips: dark inside, the colour on the border and the words, so every one reads on the night page */
.g-chip[data-g], .b-chip[data-b] {
  display: inline-block; border: 1px solid var(--gc, var(--bc)); color: var(--gc, var(--bc)); background: rgba(9, 13, 34, .72);
  border-radius: 999px; padding: 2px 9px; font: 700 11px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; white-space: nowrap;
}
.b-chip[data-b] { border-color: var(--bc); color: var(--bc); min-width: 1.6em; text-align: center; box-sizing: border-box; }
/* SS: deep gold, a touch of it inside too */
.b-chip[data-b="SS"] { background: linear-gradient(180deg, rgba(217, 119, 6, .22), rgba(9, 13, 34, .72)); }

/* MADE TRUE and SSS: the rainbow rides the letters and the border, never the fill, so the words stay legible on the night page */
.g-text[data-g="true"], .g-chip[data-g="true"], .b-chip[data-b="SSS"] {
  background-image: var(--g-rainbow); background-size: var(--g-span) 100%; background-repeat: repeat-x; background-position: 0 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: wrgRide 4s linear infinite;
}
.g-chip[data-g="true"], .b-chip[data-b="SSS"] { position: relative; border-color: transparent; }
.g-chip[data-g="true"]::before, .b-chip[data-b="SSS"]::before, .g-ring[data-g="true"]::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--g-rainbow); background-size: 12em 100%; background-repeat: repeat-x; animation: wrgRideRing 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.g-ring[data-g="true"] { position: relative; }
@keyframes wrgRide { 0% { background-position: 0 50%; } 100% { background-position: 5em 50%; } }
@keyframes wrgRideRing { 0% { background-position: 0 50%; } 100% { background-position: 12em 50%; } }
@keyframes wrgRideV { 0% { background-position: 50% 0; } 100% { background-position: 50% 5em; } }

/* a bar in the rainbow (a ladder row's edge): class g-bar, data-g="true" */
.g-bar[data-g="true"] { background-image: var(--g-rainbow-v); background-size: 100% 5em; background-repeat: repeat-y; animation: wrgRideV 4s linear infinite; }

/* still under reduced motion: the gradient reads without moving */
@media (prefers-reduced-motion: reduce) {
  .g-text[data-g="true"], .g-chip[data-g="true"], .b-chip[data-b="SSS"], .g-chip[data-g="true"]::before, .b-chip[data-b="SSS"]::before,
  .g-ring[data-g="true"]::before, .g-bar[data-g="true"], .g-bar[data-g="true"]::before { animation: none !important; }
}