/* Bonus Math Lab: cyan-to-violet-to-pink accent, a live bonus simulation on the home page. */
:root {
  --grad: linear-gradient(120deg, #22d3ee 0%, #8b5cf6 50%, #ec4899 100%);
  --grad-warm: linear-gradient(120deg, #a5f3fc 0%, #c4b5fd 50%, #f9a8d4 100%);
  --accent: #a78bfa;
  --accent-hi: #ddd6fe;
  --accent-soft: rgba(167, 139, 250, .12);
  --glow: 0 18px 48px -18px rgba(139, 92, 246, .55);
}
body::before {
  background:
    radial-gradient(52rem 34rem at 12% -8%, rgba(34, 211, 238, .13), transparent 62%),
    radial-gradient(46rem 30rem at 92% -4%, rgba(236, 72, 153, .11), transparent 60%),
    radial-gradient(40rem 28rem at 50% 108%, rgba(139, 92, 246, .09), transparent 60%);
}
.card-ic { background: linear-gradient(140deg, rgba(34, 211, 238, .2), rgba(236, 72, 153, .12)); border-color: rgba(196, 181, 253, .3); color: #ddd6fe; }
.stat b.long { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); overflow-wrap: anywhere; }

/* home: the live bonus simulation */
.bar-stage { margin: .9rem 0 1rem; }
.bar { display: flex; height: 1.4rem; border-radius: 999px; overflow: hidden; background: #1f2937; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.bar i { display: block; height: 100%; }
.bar .done { width: 0; background: linear-gradient(90deg, #22d3ee, #8b5cf6); transition: width .25s; }
.bar .bust { width: 0; background: linear-gradient(90deg, #9f1239, #4c0519); transition: width .25s; }

/* cover art per family */
.fam-bonus { background: radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, .34), rgba(12, 14, 26, .9) 70%); color: #ddd6fe; }
.fam-wagering { background: radial-gradient(120% 140% at 100% 0%, rgba(34, 211, 238, .3), rgba(12, 14, 26, .9) 70%); color: #a5f3fc; }
.fam-spins { background: radial-gradient(120% 140% at 0% 100%, rgba(236, 72, 153, .3), rgba(12, 14, 26, .9) 70%); color: #fbcfe8; }
.fam-concept { background: radial-gradient(120% 140% at 100% 100%, rgba(167, 139, 250, .3), rgba(12, 14, 26, .9) 70%); color: #e9d5ff; }

.result-grid b { font-size: clamp(1rem, .9rem + .45vw, 1.25rem); overflow-wrap: anywhere; }
.result-grid .bad b { color: #fca5a5; }
td.bad { color: #fca5a5; }