/* Progress features shared by every page: streak badge in the bonus button, daily-contest card (contest page), share card. */

/* streak day inside the header bonus button */
.bonus .b-streak {
  display: inline-grid; place-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font: 800 0.68rem/1.4 var(--display); letter-spacing: 0.02em; color: #2a1a00;
  background: linear-gradient(180deg, #ffe08a, #f0a500); box-shadow: 0 0 12px -2px var(--gold);
}
.bonus .b-short .b-streak { margin-left: 4px; }

/* ---- daily mini contest card (injected under the weekly prizes) ---- */
.dl-card { display: grid; gap: 14px; padding: 20px; position: relative; overflow: hidden; isolation: isolate; }
.dl-card::before {
  content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -90px; top: -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 201, 64, 0.28), transparent);
}
.dl-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.dl-head h2 { font-size: 1.05rem; margin: 0; }
.dl-head .dl-prize { font: 800 1.1rem/1.2 var(--display); color: var(--gold); text-shadow: 0 0 18px rgba(255, 201, 64, 0.4); }
.dl-sub { color: var(--mute); font-size: var(--step--1); margin: -4px 0 0; }
.dl-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.dl-col { display: grid; gap: 8px; align-content: start; }
.dl-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dl-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--well); box-shadow: 0 0 0 1px var(--line) inset; }
.dl-list .who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.dl-list .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dl-list .dl-mult { font: 800 1rem/1 var(--display); color: var(--win); font-variant-numeric: tabular-nums; }
.dl-list li:first-child .dl-mult { color: var(--gold); }
.dl-list .gtag-name { display: none; }
.dl-winner { display: grid; gap: 8px; padding: 14px; border-radius: var(--r); background: linear-gradient(160deg, hsl(42 60% 22% / 0.9), rgba(22, 19, 49, 0.96) 75%); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.25) inset; }
.dl-winner .who { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.dl-winner .dl-mult { font: 800 1.6rem/1 var(--display); color: var(--gold); }
.dl-winner .muted, .dl-empty { color: var(--mute); font-size: var(--step--1); }
.dl-ends { color: var(--dim); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- share card: floats above the game after a big own win ---- */
.sh-card {
  position: fixed; z-index: 55; right: 20px; bottom: 90px; width: min(360px, calc(100vw - 32px));
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px;
  border-radius: var(--r-lg); color: var(--ink);
  background: linear-gradient(135deg, rgba(60, 40, 120, 0.96), rgba(22, 19, 49, 0.98) 70%);
  box-shadow: var(--shadow), 0 0 0 1px rgba(177, 140, 255, 0.35) inset, 0 0 40px -10px rgba(139, 92, 255, 0.8);
  transform: translateY(16px); opacity: 0; transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
.sh-card.is-on { transform: none; opacity: 1; }
.sh-card .sh-mult { grid-row: 1 / 3; font: 800 1.9rem/1 var(--display); color: var(--gold); letter-spacing: -0.03em; text-shadow: 0 0 22px rgba(255, 201, 64, 0.5); }
.sh-card .sh-text { font-weight: 800; }
.sh-card .sh-sub { color: var(--mute); font-size: var(--step--1); }
.sh-card .sh-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.sh-card .btn { min-height: 38px; padding: 0 14px; font-size: var(--step--1); }
.sh-card .sh-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--dim); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
.sh-card .sh-close:hover { color: var(--ink); }
@media (max-width: 760px) { .sh-card { right: 16px; left: 16px; width: auto; bottom: calc(96px + env(safe-area-inset-bottom)); } }