/* ================= RUGSWEEPER: COMPETE screens + hub widgets (js/compete.js) =================
   The hub's dark AAA console look (css/hub.css, css/profile.css): dark glass panels with cut corners,
   Michroma labels, Oswald numbers, Archivo Black titles (fonts from css/style.css). */

.cp,
.cpw {
  --cp-pump: #2fe07a;
  --cp-dump: #ff3b4a;
  --cp-gold: #ffd21a;
  --cp-ink: #e9f3ee;
  --cp-dim: #8fa198;
  --cp-line: rgba(255, 255, 255, 0.08);
  --cp-cut: 12px;
  --cp-label: "Michroma", Arial, sans-serif;
  --cp-num: "Oswald", "Arial Narrow", sans-serif;
  --cp-title: "Archivo Black", "Arial Black", sans-serif;
}

.cp {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--cp-ink);
  background: #040607;
  font-family: var(--cp-num);
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cp.in { opacity: 1; transform: none; }
.cp.out { opacity: 0; transform: translateX(32px); transition-duration: 0.2s; }

.cp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 80% 0%, rgba(47, 224, 122, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255, 210, 26, 0.06), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(ellipse at 60% 40%, #0f1a16, #040607 70%);
}
.cp > * { position: relative; }

/* ---------- top bar ---------- */

.cp-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(4, 6, 7, 0.6);
  backdrop-filter: blur(8px);
}
.cp-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 6px 14px 6px 8px;
  border: 0;
  font: 10px var(--cp-label);
  letter-spacing: 0.16em;
  color: var(--cp-ink);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
}
.cp-back svg { width: 18px; height: 18px; }
.cp-back:hover { background: rgba(255, 255, 255, 0.12); }
.cp-toptext { min-width: 0; }
.cp-kicker { font: 9px var(--cp-label); letter-spacing: 0.3em; color: var(--cp-gold); white-space: nowrap; }
.cp-toptitle { margin: 2px 0 0; font: 400 clamp(22px, 2.6vw, 34px)/1 var(--cp-title); }
.cp-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.cp-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cp-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font: 8.5px var(--cp-label);
  letter-spacing: 0.16em;
  color: var(--cp-dim);
}
.cp-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-offline {
  display: inline-block;
  padding: 3px 8px;
  font: 8.5px var(--cp-label);
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(255, 59, 74, 0.85);
}

/* ---------- shared bits ---------- */

.cp-box {
  padding: 14px;
  background: linear-gradient(160deg, rgba(20, 28, 32, 0.92), rgba(7, 9, 11, 0.92));
  box-shadow: inset 0 0 0 1px var(--cp-line);
  clip-path: polygon(var(--cp-cut) 0, 100% 0, 100% calc(100% - var(--cp-cut)), calc(100% - var(--cp-cut)) 100%, 0 100%, 0 var(--cp-cut));
  min-width: 0;
}
/* The body scrolls; its sections keep their natural height instead of shrinking into each other. */
.cp-body > * { flex-shrink: 0; }
.cp-panel { padding: 0; }

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  font: 11px var(--cp-label);
  letter-spacing: 0.14em;
  color: #06140b;
  background: linear-gradient(180deg, #5effa0, #1fc061);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 0.15s, transform 0.15s;
}
.cp-btn:hover:not(:disabled) { filter: brightness(1.12); }
.cp-btn:active:not(:disabled) { transform: scale(0.97); }
.cp-btn:disabled { cursor: default; opacity: 0.45; filter: grayscale(0.6); }
.cp-btn.ghost { color: #dfe9e3; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.cp-btn.cp-small { min-height: 32px; padding: 5px 12px; font-size: 9.5px; }
.cp-btn:focus-visible, .cp-back:focus-visible, .cp-tab:focus-visible, .cpw-pill:focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; }

.cp-ico { display: inline-block; vertical-align: middle; object-fit: contain; }
.cp-note { font: 14px/1.35 var(--cp-num); color: #b9c6bf; }
.cp-note b { color: var(--cp-ink); }
.cp-note.pad, .cp-fine { padding: 8px 4px; margin: 0; }
.cp-fine { font-size: 13px; color: var(--cp-dim); }
.cp-lead { font: 500 17px/1.35 var(--cp-num); color: #dfe9e3; }
.cp-big { font-family: var(--cp-title); font-weight: 400; color: var(--cp-ink); }

.cp-chip {
  display: inline-block;
  padding: 2px 6px;
  font: 7.5px var(--cp-label);
  letter-spacing: 0.12em;
  color: var(--cp-ink);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}
.cp-chip.gold { color: #1a1300; background: var(--cp-gold); box-shadow: none; }
.cp-chip.laser { color: #fff; background: rgba(255, 42, 42, 0.85); box-shadow: none; }

.cp-stamp {
  display: inline-block;
  padding: 3px 7px;
  font: 7.5px var(--cp-label);
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--cp-dump);
}
.cp-stamp.ok { color: #06140b; background: var(--cp-pump); }

.cp-happy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font: 9px var(--cp-label);
  letter-spacing: 0.14em;
  color: var(--cp-gold);
  background: rgba(255, 210, 26, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 26, 0.35);
  white-space: nowrap;
}
.cp-happy small { font: 600 13px var(--cp-num); letter-spacing: 0.02em; color: var(--cp-ink); }
.cp-happy.on { color: #06140b; background: var(--cp-gold); animation: cp-pulse 1.2s ease-in-out infinite; }
.cp-happy.on small { color: #06140b; }
@keyframes cp-pulse { 50% { box-shadow: 0 0 22px rgba(255, 210, 26, 0.55); } }

.cp-cd { font: 9px var(--cp-label); letter-spacing: 0.16em; color: var(--cp-dim); white-space: nowrap; }
.cp-cd b { margin-left: 6px; font: 600 17px var(--cp-num); letter-spacing: 0.02em; color: var(--cp-pump); font-variant-numeric: tabular-nums; }

/* ---------- avatars ---------- */

.cp-ava {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--s, 40px);
  height: var(--s, 40px);
  overflow: hidden;
  background: #0b1210;
  box-shadow: inset 0 0 0 2px var(--ring, var(--cp-pump));
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
}
.cp-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.cp-ava.sold img { filter: grayscale(1) brightness(0.6); }
.cp-rip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font: 7px/1.6 var(--cp-label);
  font-style: normal;
  letter-spacing: 0.14em;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}
.cp-ava.laser::before,
.cp-ava.laser::after {
  content: "";
  position: absolute;
  top: 30%;
  width: 70%;
  height: 3px;
  background: linear-gradient(90deg, #ffd0d0, #ff2a2a 40%, transparent);
  box-shadow: 0 0 6px #ff2a2a;
  pointer-events: none;
}
.cp-ava.laser::before { left: 38%; transform: rotate(28deg); transform-origin: 0 50%; }
.cp-ava.laser::after { left: 58%; transform: rotate(28deg); transform-origin: 0 50%; }
.cp-crest { width: var(--s, 40px); height: var(--s, 40px); }

/* ---------- tabs ---------- */

.cp-tabs { display: flex; flex: none; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tab {
  flex: 1 0 auto;
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  font: 9px var(--cp-label);
  letter-spacing: 0.16em;
  color: var(--cp-dim);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  white-space: nowrap;
}
.cp-tab:hover { color: var(--cp-ink); }
.cp-tab[aria-selected="true"] { color: #06140b; background: var(--cp-pump); }

.cp-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.cp-pick { display: inline-flex; gap: 8px; align-items: center; font: 9px var(--cp-label); letter-spacing: 0.16em; color: var(--cp-gold); }
.cp-select {
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  font: 600 15px var(--cp-num);
  color: var(--cp-ink);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.cp-select option { color: #000; }
.cp-fb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 14px; color: #ffb0b0; background: rgba(255, 59, 74, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 59, 74, 0.4); }
.cp-fb b { color: #fff; }

/* ---------- podium ---------- */

.cp-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 10px;
  padding: 26px 14px 0;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 210, 26, 0.1), transparent 70%);
}
.cp-pod { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.cp-pod-face { position: relative; }
.cp-crown {
  position: absolute;
  left: 50%;
  top: -22px;
  z-index: 1;
  width: 40px;
  height: 22px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cpath d='M3 23 L6 5 L15 15 L22 2 L29 15 L38 5 L41 23 Z' fill='%23ffd21a'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 210, 26, 0.6));
}
.cp-pod.p1 .cp-ava { --ring: var(--cp-gold); box-shadow: inset 0 0 0 3px var(--cp-gold); }
.cp-pod-name { max-width: 100%; }
.cp-pod-name b { display: block; font: 600 17px/1.1 var(--cp-num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pod-name small, .cp-who small { display: block; font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: #5f7068; }
.cp-pod-val { font: 700 18px var(--cp-num); color: var(--cp-pump); font-variant-numeric: tabular-nums; }
.cp-pod-val small, .cp-val small { margin-left: 4px; font: 7.5px var(--cp-label); letter-spacing: 0.14em; color: var(--cp-dim); }
.cp-pod-val em, .cp-val em { margin-left: 6px; padding: 2px 5px; font: normal 7px var(--cp-label); letter-spacing: 0.12em; color: #06140b; background: var(--cp-pump); vertical-align: 2px; }
.cp-pod-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px var(--cp-line);
}
.cp-pod-block .cp-big { font-size: 34px; line-height: 1; color: #d6e2dc; }
.cp-pod.p1 .cp-pod-block { min-height: 100px; background: linear-gradient(180deg, rgba(255, 210, 26, 0.28), rgba(255, 210, 26, 0.04)); }
.cp-pod.p1 .cp-pod-block .cp-big { color: var(--cp-gold); text-shadow: 0 0 18px rgba(255, 210, 26, 0.5); }
.cp-pod.p2 .cp-pod-block { min-height: 72px; }
.cp-pod.p3 .cp-pod-block { min-height: 54px; }
.cp-pod.p3 .cp-pod-block .cp-big { color: #e0a060; }
.cp-pod.empty .cp-pod-block small { font: 7.5px var(--cp-label); letter-spacing: 0.14em; color: var(--cp-dim); }
.cp-pod .cp-tags { justify-content: center; }

/* ---------- rows ---------- */

.cp-rows { list-style: none; margin: 0; padding: 0; }
.cp-row {
  display: grid;
  grid-template-columns: 34px 36px 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 12px;
  font-size: 16px;
}
.cp-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.cp-row.me { background: rgba(47, 224, 122, 0.12); box-shadow: inset 3px 0 0 var(--cp-pump); }
.cp-row.me .cp-who b { color: var(--cp-pump); }
.cp-row.sold .cp-who b { text-decoration: line-through; text-decoration-color: var(--cp-dump); }
.cp-rk { font-weight: 700; text-align: right; color: var(--cp-dim); font-variant-numeric: tabular-nums; }
.cp-dl { font: 600 12px var(--cp-num); text-align: center; }
.cp-dl.up { color: var(--cp-pump); }
.cp-dl.down { color: var(--cp-dump); }
.cp-dl.new { font: 7px var(--cp-label); letter-spacing: 0.1em; color: var(--cp-gold); }
.cp-dl.same { color: #4c5a53; }
.cp-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.cp-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cp-who small { flex-basis: 100%; }
.cp-tags { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cp-lv { font: 8px var(--cp-label); letter-spacing: 0.14em; color: var(--cp-dim); white-space: nowrap; }
.cp-val { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-tomb { vertical-align: middle; }

.cp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.cp-empty p { max-width: 460px; margin: 0; font: 500 17px/1.4 var(--cp-num); color: #b9c6bf; }

/* ---------- sticky "me" bar ---------- */

.cp-mebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 0 12px;
  background: linear-gradient(180deg, transparent, #040607 30%);
}
.cp-mebar:empty { display: none; }
.cp-me-in,
.cp-me-out {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(160deg, rgba(20, 40, 30, 0.95), rgba(7, 12, 10, 0.95));
  box-shadow: inset 0 0 0 1px rgba(47, 224, 122, 0.35);
  clip-path: polygon(var(--cp-cut) 0, 100% 0, 100% calc(100% - var(--cp-cut)), calc(100% - var(--cp-cut)) 100%, 0 100%, 0 var(--cp-cut));
}
.cp-me-in .cp-rk { min-width: 46px; font: 700 22px var(--cp-num); color: var(--cp-pump); }
.cp-me-in .cp-who { flex: 0 1 auto; }
.cp-me-in .cp-who small { font: 7.5px var(--cp-label); letter-spacing: 0.16em; color: var(--cp-gold); }
.cp-gap { flex: 1; min-width: 0; font: 500 16px/1.25 var(--cp-num); color: #dfe9e3; }
.cp-gap b { color: var(--cp-gold); font-weight: 700; }
.cp-me-in .cp-val { color: var(--cp-pump); font-size: 18px; }
.cp-me-out > span:not(.cp-ava) { flex: 1; font: 500 16px var(--cp-num); color: #dfe9e3; }

/* ---------- quests ---------- */

.cp-streak {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(20, 28, 32, 0.92), rgba(7, 9, 11, 0.92));
  box-shadow: inset 0 0 0 1px var(--cp-line);
}
.cp-streak-n { display: inline-flex; align-items: center; gap: 8px; }
.cp-streak-n b { font-size: 34px; line-height: 1; color: var(--cp-gold); }
.cp-streak-n small, .cp-freezes small { font: 8px var(--cp-label); letter-spacing: 0.16em; color: var(--cp-dim); }
.cp-freezes { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.cp-freeze.used { opacity: 0.35; }
.cp-dots, .cpw-dots { display: inline-flex; gap: 6px; }
.cp-dots i, .cpw-dots i { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); transform: rotate(45deg); }
.cp-dots i.on, .cpw-dots i.on { background: var(--cp-pump); box-shadow: 0 0 8px rgba(47, 224, 122, 0.6); }

.cp-quests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-quest { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.cp-quest.done { box-shadow: inset 0 0 0 1px rgba(47, 224, 122, 0.5); background: linear-gradient(160deg, rgba(20, 48, 32, 0.92), rgba(7, 12, 10, 0.92)); }
.cp-q-top { display: flex; align-items: center; gap: 8px; }
.cp-genre { padding: 3px 7px; font: 7.5px var(--cp-label); letter-spacing: 0.16em; color: #06140b; background: var(--cp-pump); }
.cp-genre.g-arcade { background: #43b4ca; }
.cp-genre.g-social { background: var(--cp-gold); }
.cp-stars { color: var(--cp-gold); font-size: 14px; letter-spacing: 1px; }
.cp-stars i { font-style: normal; color: #34413b; }
.cp-q-pts { margin-left: auto; font: 700 16px var(--cp-num); color: var(--cp-pump); }
.cp-q-text { margin: 0; flex: 1; font: 500 19px/1.25 var(--cp-num); color: var(--cp-ink); }
.cp-meter { height: 8px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cp-meter > i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #1fc061, #5effa0); box-shadow: 0 0 10px rgba(47, 224, 122, 0.5); }
.cp-q-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 14px var(--cp-num); color: #b9c6bf; }
.cp-q-foot .cp-note { font-size: 12px; color: var(--cp-dim); }

.cp-crate-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.cp-crate-art { width: 92px; flex: none; }
.cp-crate-art.ready { animation: cp-wiggle 1.4s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 210, 26, 0.45)); }
@keyframes cp-wiggle { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-6deg); } 84% { transform: rotate(5deg); } 92% { transform: rotate(-3deg); } }
.cp-crate-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cp-crate-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #b9c6bf; }
.cp-crate-txt > b { font: 400 20px var(--cp-title); color: var(--cp-ink); }
.cp-crate-txt span b { color: var(--cp-gold); }
.cp-crate-txt .cp-btn { align-self: flex-start; }

/* crate opening */
.cp-crate-open {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 7, 0.88);
  backdrop-filter: blur(6px);
  transition: opacity 0.18s;
}
.cp-crate-open.out { opacity: 0; }
.cp-crate-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(380px, 90%); }
.cp-crate-stage > .cp-crate-svg { width: 150px; filter: drop-shadow(0 0 24px rgba(255, 210, 26, 0.4)); }
.cp-crate-open.go .cp-crate-box { animation: cp-shake 0.5s steps(6) 2; transform-origin: 60px 100px; }
.cp-crate-open.go .cp-crate-lid { animation: cp-lid 0.5s 0.95s cubic-bezier(0.3, 1.6, 0.6, 1) forwards; transform-origin: 60px 40px; }
@keyframes cp-shake { 0%, 100% { transform: none; } 33% { transform: rotate(-5deg) translateX(-3px); } 66% { transform: rotate(5deg) translateX(3px); } }
@keyframes cp-lid { to { transform: translate(40px, -70px) rotate(35deg); opacity: 0; } }
.cp-confetti { position: absolute; left: 50%; top: 70px; width: 0; height: 0; }
.cp-confetti i { position: absolute; width: 8px; height: 8px; background: var(--c); opacity: 0; }
.cp-crate-open.go .cp-confetti i { animation: cp-pop var(--t) 1.05s ease-out forwards; }
@keyframes cp-pop {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(180deg); }
}
.cp-loot { padding: 16px 20px; text-align: center; opacity: 0; transform: scale(0.6); }
.cp-crate-open.go .cp-loot { animation: cp-in 0.35s 1.3s cubic-bezier(0.3, 1.6, 0.6, 1) forwards; }
@keyframes cp-in { to { opacity: 1; transform: none; } }
.cp-loot-k { font: 8.5px var(--cp-label); letter-spacing: 0.22em; color: var(--cp-gold); }
.cp-loot-name { margin: 6px 0; font-size: 28px; line-height: 1.1; }
.cp-loot-pts { font: 700 18px var(--cp-num); color: var(--cp-pump); }
.cp-loot-err { margin: 0; padding: 12px; color: #ffd0d4; background: rgba(255, 59, 74, 0.15); box-shadow: inset 0 0 0 1px rgba(255, 59, 74, 0.5); }
.cp-collect { opacity: 0; }
.cp-crate-open.go .cp-collect { animation: cp-in 0.2s 1.6s forwards; }
.cp-crate-stage.err .cp-collect, .cp-crate-stage.err .cp-loot-err { animation: none; opacity: 1; }

/* ---------- hub widgets ---------- */

.cpw { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-family: var(--cp-num); color: var(--cp-ink); }
.cpw-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cpw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  font: 500 14px/1 var(--cp-num);
  color: var(--cp-ink);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  cursor: pointer;
}
button.cpw-pill:hover { background: rgba(255, 255, 255, 0.12); }
.cpw-pill[hidden] { display: none; }
.cpw-k { font: 8px var(--cp-label); letter-spacing: 0.16em; color: var(--cp-gold); }
.cpw-rival .lose { color: var(--cp-dump); font-weight: 600; }
.cpw-rival .win { color: var(--cp-pump); font-weight: 600; }
.cpw-dots i { width: 9px; height: 9px; }
.cpw-crate { padding: 2px 5px; font: 7px var(--cp-label); letter-spacing: 0.12em; color: #1a1300; background: var(--cp-gold); }
.cpw-happy { cursor: default; font: 8.5px var(--cp-label); letter-spacing: 0.12em; color: var(--cp-gold); box-shadow: inset 0 0 0 1px rgba(255, 210, 26, 0.35); }
.cpw-happy small { font: 600 13px var(--cp-num); letter-spacing: 0; color: var(--cp-ink); }
.cpw-happy.on { color: #06140b; background: var(--cp-gold); animation: cp-pulse 1.2s ease-in-out infinite; }
.cpw-happy.on small { color: #06140b; }
.cpw-off { padding: 3px 7px; font: 7.5px var(--cp-label); letter-spacing: 0.14em; color: #fff; background: rgba(255, 59, 74, 0.85); }
.cpw-off[hidden] { display: none; }

.cpw-ticker {
  position: relative;
  overflow: hidden;
  height: 30px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px var(--cp-line);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cpw-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: cpw-scroll var(--dur, 40s) linear infinite;
}
.cpw-track:not([style*="--dur"]) { animation: none; padding-left: 12px; }
.cpw-ticker:hover .cpw-track { animation-play-state: paused; }
@keyframes cpw-scroll { to { transform: translateX(-50%); } }
.cpw-ev { display: inline-flex; align-items: center; gap: 6px; padding: 0 26px 0 0; font-size: 14px; color: #dfe9e3; }
.cpw-ev small { font: 7.5px var(--cp-label); letter-spacing: 0.12em; color: var(--cp-dim); }
.cpw-dup, .cpw-gap { display: inline-flex; }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .cp-top { gap: 10px; }
  .cp-back { padding-right: 10px; }
  .cp-top-r .cp-happy { padding: 6px 8px; }
  .cp-body { padding-top: 12px; gap: 10px; }
  .cp-row { grid-template-columns: 26px 28px 30px minmax(0, 1fr) auto; gap: 7px; padding: 6px 8px; font-size: 15px; }
  .cp-lv { display: none; }
  .cp-podium { padding: 24px 4px 0; gap: 6px; }
  .cp-pod-name b { font-size: 14px; }
  .cp-pod .cp-tags { display: none; }
  .cp-pod-block .cp-big { font-size: 26px; }
  .cp-quests { grid-template-columns: 1fr; }
  .cp-me-in { flex-wrap: wrap; row-gap: 4px; }
  .cp-gap { flex-basis: 100%; order: 5; font-size: 14px; }
  .cp-me-out { flex-wrap: wrap; }
  .cp-me-out .cp-btn { width: 100%; }
  .cp-crate-row { flex-wrap: wrap; }
  .cp-crate-art { width: 70px; }
  .cp-open { width: 100%; }
}

@media (max-width: 420px) {
  .cp-lb .cp-top-r { display: none; }
  .cp-cd { font-size: 0; }
  .cp-cd b { margin: 0; font-size: 15px; }
  .cp-toptitle { font-size: 20px; white-space: nowrap; }
  .cp-pod-face .cp-ava { --s: 54px !important; }
  .cp-pod.p1 .cp-pod-face .cp-ava { --s: 68px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cp, .cp.in, .cp.out { transition: opacity 0.2s; transform: none; }
  .cp-happy.on, .cpw-happy.on, .cp-crate-art.ready, .cpw-track { animation: none !important; }
}

/* RANKED tab: prize pool header */
.cp-prize { display: block; width: 100%; overflow-wrap: anywhere; }
.cp-prize b { color: #b8860b; }
.pz-proofs a { color: inherit; text-decoration: underline; }