/*
 * BetBattles levels + rewards (js/core/levels.js, js/you/rewards.js), Party Night style.
 *   .tag.lv · .lv-pip ........ a player's level, tier-coloured: the "Lv 23" tag next to the name, or (game mode, and
 *                              phone seats/standings, where names need the room) the "23" pip on the Chipper's
 *                              bottom-right, like your chip in the app bar
 *   .lv-badge ................ the tier badge (svg drawn in code)
 *   .me-av.lv-ring ........... the app bar: the level ring on your chip (Rewards opens from the bell's panel,
 *                              css/notify.css; nothing level-ish ever shows in game mode: ADDENDUM item 8)
 *   .rw-* .................... the Rewards sheet
 * Tier colours arrive as an inline --tc (like --pc for players); nothing here defines a design token.
 */

/* ---------- the Lv tag (sits with the kit's .tag, so every surface's tag sizing applies) ---------- */
.tag.lv {
  --tc: var(--ink-3);
  background: color-mix(in srgb, var(--tc) 17%, transparent);
  color: color-mix(in srgb, var(--tc) 72%, #fff);
  text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.lv-pip {
  --tc: var(--ink-3);
  position: absolute; right: -7px; bottom: -4px; z-index: 1;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  font: 800 12px/1 var(--f-ui); font-style: normal; font-variant-numeric: tabular-nums;
  color: #1A1233; background: var(--tc); box-shadow: 0 0 0 2px var(--night-0);
  pointer-events: none;
}
/* levels 100–499: three digits, set a touch tighter so the pip stays a pip */
.lv-pip.is-3 { padding: 0 3px; font-size: 11px; letter-spacing: -.04em; }
.lv-badge { display: block; flex: none; overflow: visible; }
/* game mode (the narrow rail, the phone strip and party sheet): always the pip, so names and money keep their room */
.fr-av .lv-pip { right: -9px; bottom: -2px; min-width: 17px; height: 17px; padding: 0 3px; }   /* clear of the name under it */
.fr-av .lv-pip.is-3 { padding: 0 2px; }
.row .av .lv-pip { right: -6px; bottom: -3px; }
/* lobby seats and results standings: the tag next to the name on wide screens, the pip on phones (compact tiles and
   rows), so a name never gets squeezed out */
.res-av { position: relative; }
/* wide seats: a long username keeps its line; the tags drop under it when there's no room */
@media (min-width: 701px) { .seat-name:has(.tag.lv) { flex-wrap: wrap; row-gap: 4px; } }
.seat-stage .lv-pip, .res-av .lv-pip { display: none; }
@media (max-width: 700px) {
  .seat-name .tag.lv, .st-row .who .tag.lv { display: none; }
  .seat-stage .lv-pip, .res-av .lv-pip { display: grid; }
  .seat-stage .lv-pip { right: -7px; bottom: -3px; }
  .res-av .lv-pip { right: -6px; bottom: -3px; }
}
/* the chat overlay: the tag rides in the line's text, right after the coloured name */
.cov-t .tag.lv { margin: 0 4px 0 1px; vertical-align: 1px; text-shadow: none; }
@media (max-width: 700px) { .cov-feed .tag.lv { display: none; } }     /* the phone feed is one short line each */

/* ---------- app bar: your chip ---------- */
/* your chip: a thin ring in your tier's colour that fills up toward the next level, and the level number */
.me-av.lv-ring {
  --tc: var(--ink-3); --lvp: 0%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--night-2), var(--night-2)) padding-box,
    conic-gradient(var(--tc) var(--lvp), rgba(255, 255, 255, .13) 0) border-box;
}
.me-av.lv-ring::before {
  content: attr(data-lv); position: absolute; right: -7px; bottom: -6px; z-index: 1;
  min-width: 19px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  font: 900 11.5px/1 var(--f-ui); font-variant-numeric: tabular-nums;
  color: #1A1233; background: var(--tc); box-shadow: 0 0 0 2px var(--night-0);
  pointer-events: none;
}
.me-av.lv-ring.lv-3::before { padding: 0 3px; font-size: 10.5px; letter-spacing: -.04em; }

/* ---------- the Rewards sheet ---------- */
.sheet.is-modal.rw-sheet { width: min(500px, calc(100vw - 48px)); }
.rw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.rw-hero {
  --tc: var(--gold);
  padding: 16px 18px 14px; border-radius: 22px;
  background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--tc) 24%, transparent), transparent 72%), var(--night-2);
  border: 1px solid color-mix(in srgb, var(--tc) 36%, var(--line));
}
.rw-hero-top { display: flex; align-items: center; gap: 14px; }
.rw-hero-badge { flex: none; display: grid; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; }
.rw-hero-badge.boing { animation: youBoing .62s var(--out); }
.rw-hero-t { display: grid; gap: 6px; min-width: 0; }
.rw-hero-t .label { margin: 0; }
.rw-lv { font: 800 30px/1 var(--f-display); letter-spacing: -.03em; }
.rw-tier {
  width: fit-content; padding: 4px 10px; border-radius: 999px;
  font: 800 13px/1 var(--f-ui); color: color-mix(in srgb, var(--tc) 78%, #fff);
  background: color-mix(in srgb, var(--tc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 42%, transparent);
}
.rw-bar { margin-top: 16px; height: 12px; border-radius: 99px; background: var(--night-0); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); overflow: hidden; }
.rw-bar i {
  display: block; height: 100%; min-width: 12px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 65%), var(--tc);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent);
  transition: width .6s var(--out);
}
.rw-xp { margin: 10px 0 0; font: 700 14.5px/1.3 var(--f-ui); color: var(--ink-2); }
.rw-xp b { color: var(--ink); }
.rw-how { margin: 4px 0 0; font: 600 13px/1.4 var(--f-ui); color: var(--ink-3); }

.rw-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 12px; }
.rw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rw-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; }
.rw-item:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.rw-item.is-on { background: linear-gradient(90deg, rgba(43, 216, 129, .09), rgba(43, 216, 129, .02) 75%); }
.rw-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--night-3); color: var(--ink-3); }
.rw-ic svg { width: 18px; height: 18px; }
.rw-item.is-on.tone-gold .rw-ic { background: var(--gold-soft); color: var(--gold); }
.rw-item.is-on.tone-go .rw-ic { background: var(--go-soft); color: var(--go); }
.rw-item.is-on.tone-grape .rw-ic { background: var(--grape-soft); color: var(--grape-ink); }
.rw-what { min-width: 0; }
.rw-what b { display: block; font: 700 14.5px/1.25 var(--f-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-what small { display: block; margin-top: 3px; font: 600 13px/1.3 var(--f-ui); color: var(--ink-3); }
.rw-sum { font: 800 15.5px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; }
.rw-item.is-on .rw-sum { color: var(--go); }

.rw-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rw-step {
  --tc: var(--ink-3);
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 12px 6px 10px; border-radius: 14px; border: 1.5px solid transparent;
}
.rw-step:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.rw-step.is-me { border-color: color-mix(in srgb, var(--tc) 60%, transparent); background: color-mix(in srgb, var(--tc) 11%, transparent); }
.rw-step-t { min-width: 0; }
.rw-step-t b { display: block; font: 800 14.5px/1.15 var(--f-ui); color: color-mix(in srgb, var(--tc) 76%, #fff); }
.rw-step-t small { display: block; margin-top: 2px; font: 600 13px/1.2 var(--f-ui); color: var(--ink-3); white-space: nowrap; }
.rw-step-r { min-width: 46px; text-align: right; }
.rw-step-r b { font: 800 15px/1 var(--f-ui); color: var(--ink); }
.rw-step:not(.is-me) .rw-step-r b { color: var(--ink-2); }

.rw-done { display: grid; justify-items: center; text-align: center; padding: 4px 0 2px; }
.rw-done-chip { margin: 6px 0 8px; }
.rw-done-chip .chip { animation: youPop .8s var(--spring) both; }
.rw-done > b { font: 800 26px/1.1 var(--f-display); letter-spacing: -.02em; color: var(--gold); animation: feedIn .4s var(--out) .15s both; }
.rw-done p { margin: 8px 0 0; max-width: 340px; font: 600 15px/1.45 var(--f-ui); color: var(--ink-2); animation: feedIn .4s var(--out) .22s both; }
.rw-done p b { color: var(--ink); }

.rw-foot .btn svg { width: 22px; height: 22px; }
.rw-demo { margin: 0 0 2px; text-align: center; font: 700 13px/1.3 var(--f-ui); color: var(--ink-3); }

@media (max-width: 380px) {
  .rw-hero { padding: 14px 14px 12px; }
  .rw-lv { font-size: 26px; }
  .rw-hero-badge svg { width: 52px; height: 52px; }
  .rw-step { gap: 8px; padding: 6px 10px 6px 8px; }
}