/* Progression UI: profile card, HUD chip, lobby panels, reveal and
   toasts. Builds on the HUD tokens in style.css. */

:root {
  /* Rarity and currency */
  --pg-common: #b4b0a2;
  --pg-rare: #5d9be0;
  --pg-epic: #b07cf2;
  --pg-legendary: #f2a93b;
  --pg-secret: #4fe0c2;
  --pg-coin: #e9c15a;
  --pg-coin-edge: #8e6a1f;
  --pg-xp: #8fc4e8;
  --pg-win: var(--hud-you);
  --pg-loss: var(--hud-bot);
  --pg-danger: #d0583e;

  /* Surfaces */
  --pg-panel: rgba(19, 20, 16, 0.94);
  --pg-panel-solid: #151612;
  --pg-plate: rgba(235, 231, 220, 0.045);
  --pg-plate-hi: rgba(235, 231, 220, 0.09);
  --pg-backdrop: rgba(8, 8, 6, 0.62);
  --pg-glow: rgba(217, 173, 92, 0.35);
  --pg-default: #55585c;

  /* Swatch shading, read by progress.js */
  --pg-sheen: rgba(255, 255, 255, 0.6);
  --pg-clear: rgba(0, 0, 0, 0);
  --pg-shade: rgba(0, 0, 0, 0.5);

  /* Prize wheel, read by progress.js */
  --pg-seg-coin-s: #7d6a3e;
  --pg-seg-coin-m: #a8873c;
  --pg-seg-coin-l: #dcae48;
  --pg-seg-boost: #6fa9cf;
  --pg-seg-case: #6d8f5a;
  --pg-wheel-line: rgba(16, 17, 14, 0.9);
  --pg-wheel-text: #16150f;
  --pg-wheel-rim: #2b2c26;
  --pg-peg: #ebe7dc;

  /* Rank emblems */
  --pg-rank-bronze: #b0743f;
  --pg-rank-silver: #b9c0c6;
  --pg-rank-gold: #e5b746;
  --pg-rank-platinum: #7fd6cf;
  --pg-rank-steel: #8d9bb0;
  --pg-rank-champion: #ff6a3d;
  --pg-rank-locked: #4a4b45;

  /* Skin palettes: --skin-<tone>-<n> and an optional glow */
  --skin-wood-1: #4b5233;
  --skin-wood-2: #2f3523;
  --skin-wood-3: #6b6a45;
  --skin-wood-4: #1f221a;
  --skin-dune-1: #c2a878;
  --skin-dune-2: #9c7f52;
  --skin-dune-3: #d8c49b;
  --skin-dune-4: #7a6040;
  --skin-urban-1: #8b8d8c;
  --skin-urban-2: #5b5e60;
  --skin-urban-3: #b4b4ae;
  --skin-urban-4: #34383b;
  --skin-olive-1: #5a5f3a;
  --skin-snow-1: #dfe4e6;
  --skin-snow-2: #aab4ba;
  --skin-snow-3: #f4f6f7;
  --skin-snow-4: #7e8a92;
  --skin-ash-1: #3a3836;
  --skin-ash-2: #22201f;
  --skin-ash-3: #5a5450;
  --skin-ash-4: #7a3f26;
  --skin-pixel-1: #4e6577;
  --skin-pixel-2: #2f3f4d;
  --skin-pixel-3: #8aa0ae;
  --skin-pixel-4: #1d262e;
  --skin-rime-1: #a9cbdc;
  --skin-rime-2: #e4f1f6;
  --skin-rime-3: #6b97b2;
  --skin-rime-4: #3e6680;
  --skin-carbon-1: #1c1d1f;
  --skin-carbon-2: #44484e;
  --skin-tiger-1: #d7802e;
  --skin-tiger-2: #1b1612;
  --skin-hazard-1: #e2b322;
  --skin-hazard-2: #1e1d1a;
  --skin-copper-1: #b06a3d;
  --skin-copper-2: #e09d6e;
  --skin-copper-3: #6e3c20;
  --skin-frost-1: #cfe6f2;
  --skin-frost-2: #7fb0cf;
  --skin-frost-3: #ffffff;
  --skin-neon-1: #0e1220;
  --skin-neon-2: #3ef2e4;
  --skin-neon-3: #ff4fd8;
  --skin-neon-glow: #3ef2e4;
  --skin-magma-1: #231714;
  --skin-magma-2: #ff6a1f;
  --skin-magma-3: #ffd05a;
  --skin-magma-glow: #ff6a1f;
  --skin-gold-1: #d6a843;
  --skin-gold-2: #f8e092;
  --skin-gold-3: #8e6a1f;
  --skin-aurora-1: #0d1a2a;
  --skin-aurora-2: #4ff0a8;
  --skin-aurora-3: #6f7dff;
  --skin-aurora-4: #ff6fd0;
  --skin-aurora-glow: #4ff0a8;
  --skin-phoenix-1: #3a0f0a;
  --skin-phoenix-2: #ff8a1f;
  --skin-phoenix-3: #fff1a8;
  --skin-phoenix-glow: #ff9a2a;
  --skin-star-1: #0b0f24;
  --skin-star-2: #2b336a;
  --skin-star-3: #f4f1ff;
  --skin-star-glow: #8f9cff;
  --skin-forge-1: #5c5f63;
  --skin-forge-2: #2c2e31;
  --skin-forge-3: #c08a4a;
  --skin-champ-1: #6b1c22;
  --skin-champ-2: #e0b04c;
  --skin-champ-3: #f6e6b0;
  --skin-viper-1: #2f8a34;
  --skin-viper-2: #0f3a17;
  --skin-viper-3: #9ee05a;
  --skin-viper-4: #c81e2a;
  --skin-viper-glow: #ff5a1c;
  --skin-viper-fang: #f1ead4;
  --skin-bite-1: #e6f4fb;
  --skin-bite-2: #6fb4dc;
  --skin-bite-3: #2a6f9c;
  --skin-bite-glow: #7fd0ff;
  --skin-ghost-1: #24323b;
  --skin-ghost-2: #8fb3c2;
  --skin-ghost-3: #d6e8ee;
  --skin-ghost-glow: #9fd8e8;
  --skin-shade-1: #160f22;
  --skin-shade-2: #7a4fd6;
  --skin-shade-3: #c3a6ff;
  --skin-shade-glow: #8a5cff;
  --skin-storm-1: #10172a;
  --skin-storm-2: #4f9dff;
  --skin-storm-3: #e8f4ff;
  --skin-storm-glow: #4f9dff;
  --skin-ember-1: #1d0d0a;
  --skin-ember-2: #ff3d1f;
  --skin-ember-3: #ffb36b;
  --skin-ember-glow: #ff4a26;
  --skin-crest-1: #f1ede2;
  --skin-crest-2: #c79a3a;
  --skin-crest-3: #6b4e16;
  --skin-chrome-1: #c8ced4;
  --skin-chrome-2: #ffffff;
  --skin-chrome-3: #6f7880;
  --skin-light-1: #e9eef2;
  --skin-light-2: #b9c8d6;
  --skin-light-3: #7fd6ff;
  --skin-light-glow: #a6e6ff;
  --skin-prism-1: #0e0e18;
  --skin-prism-2: #ff5f6d;
  --skin-prism-3: #ffd65f;
  --skin-prism-4: #5fe3ff;
  --skin-prism-glow: #ffd65f;
  --skin-creator-1: #0f1512;
  --skin-creator-2: #d9ad5c;
  --skin-creator-3: #fff2cc;
  --skin-creator-glow: #d9ad5c;

  /* Weapon contract tiers */
  --skin-t-bronze-1: #6e4426;
  --skin-t-bronze-2: #c9874e;
  --skin-t-bronze-3: #f0c08e;
  --skin-t-bronze-glow: #e0904a;
  --skin-t-silver-1: #6f777e;
  --skin-t-silver-2: #d9e0e6;
  --skin-t-silver-3: #ffffff;
  --skin-t-silver-glow: #cfe6ff;
  --skin-t-gold-1: #8e6a1f;
  --skin-t-gold-2: #f2c75a;
  --skin-t-gold-3: #fff3c4;
  --skin-t-gold-glow: #ffcf5a;
  --skin-t-diamond-1: #123047;
  --skin-t-diamond-2: #7fe8ff;
  --skin-t-diamond-3: #ffffff;
  --skin-t-diamond-glow: #8ff0ff;

  /* Tournament skins and the gold trim */
  --skin-cup-rust-1: #7a3f22;
  --skin-cup-rust-2: #3a1f12;
  --skin-cup-rust-3: #d08a52;
  --skin-cup-blade-1: #2a3036;
  --skin-cup-blade-2: #c9ced2;
  --skin-cup-blade-3: #8a949c;
  --skin-cup-marksman-1: #24301f;
  --skin-cup-marksman-2: #9fc46a;
  --skin-cup-marksman-3: #e7f2c9;
  --skin-cup-crown-1: #2a2a30;
  --skin-cup-crown-2: #c9ced2;
  --skin-cup-crown-3: #ff6a3d;
  --skin-cup-crown-glow: #ff6a3d;
  --skin-trim-1: #f2c75a;
  --skin-trim-2: #fff3c4;
  --skin-trim-glow: #ffcf5a;

  /* Rank sets */
  --skin-rank-gold-1: #2a2210;
  --skin-rank-gold-2: #e5b746;
  --skin-rank-gold-3: #fff0b8;
  --skin-rank-gold-glow: #e5b746;
  --skin-rank-platinum-1: #dff4f2;
  --skin-rank-platinum-2: #7fd6cf;
  --skin-rank-platinum-3: #ffffff;
  --skin-rank-platinum-glow: #7fd6cf;
  --skin-rank-steel-1: #6a7486;
  --skin-rank-steel-2: #2c323c;
  --skin-rank-steel-3: #c8d2e0;
  --skin-rank-steel-glow: #9fb4d6;
  --skin-rank-champion-1: #140b10;
  --skin-rank-champion-2: #ff6a3d;
  --skin-rank-champion-3: #ffd05a;
  --skin-rank-champion-4: #ff4fd8;
  --skin-rank-champion-glow: #ff6a3d;

  /* Wrap palettes: --wrap-<tone>-<n> */
  --wrap-camo-1: #56603a;
  --wrap-camo-2: #333a24;
  --wrap-camo-3: #7b7a50;
  --wrap-camo-4: #23261b;
  --wrap-digital-1: #c9b182;
  --wrap-digital-2: #a3865a;
  --wrap-digital-3: #e3d2ad;
  --wrap-digital-4: #6f5838;
  --wrap-checker-1: #f1ede2;
  --wrap-checker-2: #1b1b1d;
  --wrap-arctic-1: #eef3f6;
  --wrap-arctic-2: #2e3f4f;
  --wrap-carbon-1: #18191b;
  --wrap-carbon-2: #4a4f56;
  --wrap-hex-1: #1d2226;
  --wrap-hex-2: #6fd0c4;
  --wrap-hex-3: #2f5f5a;
  --wrap-circuit-1: #0b1712;
  --wrap-circuit-2: #3dff9a;
  --wrap-circuit-3: #d8ffe9;
  --wrap-circuit-glow: #3dff9a;
  --wrap-molten-1: #1a0f0c;
  --wrap-molten-2: #ff5a1f;
  --wrap-molten-3: #ffd36b;
  --wrap-molten-glow: #ff5a1f;
  --wrap-damascus-1: #5f666c;
  --wrap-damascus-2: #c9d0d6;
  --wrap-damascus-3: #30353a;
  --wrap-galaxy-1: #070a1c;
  --wrap-galaxy-2: #3a2a6e;
  --wrap-galaxy-3: #ff7ad9;
  --wrap-galaxy-4: #e8ecff;
  --wrap-galaxy-glow: #b07cf2;
  --wrap-creator-1: #0f1512;
  --wrap-creator-2: #2a3a2e;
  --wrap-creator-3: #d9ad5c;
  --wrap-creator-4: #fff2cc;
  --wrap-creator-glow: #d9ad5c;
  --wrap-cup-rust-1: #2a1a12;
  --wrap-cup-rust-2: #d06a2a;
  --wrap-cup-blade-1: #2a3036;
  --wrap-cup-blade-2: #11151a;
  --wrap-cup-blade-3: #c9ced2;
  --wrap-cup-marksman-1: #0f170c;
  --wrap-cup-marksman-2: #9fc46a;
  --wrap-cup-marksman-3: #f2ffd6;
  --wrap-cup-marksman-glow: #9fc46a;
  --wrap-cup-crown-1: #120d10;
  --wrap-cup-crown-2: #ff6a3d;
  --wrap-cup-crown-3: #c9ced2;
  --wrap-cup-crown-4: #ffd05a;
  --wrap-cup-crown-glow: #ff6a3d;
  --wrap-final-rust-1: #6a3a22;
  --wrap-final-rust-2: #3a2216;
  --wrap-final-rust-3: #a8693e;
  --wrap-final-blade-1: #3a4046;
  --wrap-final-blade-2: #b8bec4;
  --wrap-final-marksman-1: #2a3424;
  --wrap-final-marksman-2: #8aa860;
  --wrap-final-marksman-3: #5a7040;
  --wrap-final-crown-1: #16121a;
  --wrap-final-crown-2: #3a2a3a;
  --wrap-final-crown-3: #ffb08f;
  --wrap-final-crown-glow: #ff8a5f;
  --wrap-rank-gold-1: #2a2210;
  --wrap-rank-gold-2: #e5b746;
  --wrap-rank-gold-3: #7a5e1c;
  --wrap-rank-gold-glow: #e5b746;
  --wrap-rank-platinum-1: #0f2224;
  --wrap-rank-platinum-2: #7fd6cf;
  --wrap-rank-platinum-3: #e8fffd;
  --wrap-rank-platinum-glow: #7fd6cf;
  --wrap-rank-steel-1: #8d9bb0;
  --wrap-rank-steel-2: #dfe6f0;
  --wrap-rank-steel-3: #4a5466;
  --wrap-rank-steel-glow: #9fb4d6;
  --wrap-rank-champion-1: #0c0610;
  --wrap-rank-champion-2: #3a1428;
  --wrap-rank-champion-3: #ff6a3d;
  --wrap-rank-champion-4: #ffd05a;
  --wrap-rank-champion-glow: #ff6a3d;
}

/* Hidden always wins over component display rules */
[data-pg-when][hidden], .pg-layer[hidden], .pg-panel[hidden],
.pg-reveal[hidden], .pg-case [hidden], .pg-task [hidden],
.pg-weapon [hidden], .pg-rung [hidden], .pg-slot [hidden] {
  display: none !important;
}

/* Shared bits */

.pg-dim { color: var(--hud-dim); }

.pg-label, .pg-kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.pg-kicker { color: var(--hud-accent); }
.pg-label--secret { color: var(--pg-secret); }

.pg-bar {
  height: 5px;
  background: var(--hud-line);
}

.pg-bar .bar__fill { background: var(--hud-accent); }
.pg-bar--xp .bar__fill { background: var(--pg-xp); }

.pg-level {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--pg-xp);
  border-radius: var(--radius);
  color: var(--pg-xp);
  line-height: 1.3;
}

.pg-level small {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pg-level b { font-size: var(--fs-m); }

.pg-coins {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--pg-coin);
}

.pg-coins--big { font-size: var(--fs-m); }

.pg-coin {
  display: inline-block;
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pg-sheen) 0 12%,
    var(--pg-coin) 28%, var(--pg-coin-edge) 100%);
  box-shadow: inset 0 0 0 1px var(--pg-coin-edge);
}

.pg-case-icon, .pg-case__icon {
  display: inline-block;
  width: 0.9em;
  height: 0.75em;
  border: 1px solid currentColor;
  border-radius: 1px;
  background: linear-gradient(currentColor 0 0) 50% 35% / 100% 1px
    no-repeat;
}

.pg-pill {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35rem;
  border-radius: 1em;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  color: var(--hud-text);
  background: var(--hud-line);
}

.pg-pill--hot {
  color: var(--hud-ink);
  background: var(--hud-accent);
  animation: pg-pulse 1.6s ease-in-out infinite;
}

.pg-lock {
  display: inline-block;
  width: 0.6rem;
  height: 0.5rem;
  margin-left: 0.2rem;
  border-radius: 1px;
  background: currentColor;
  position: relative;
  opacity: 0.7;
}

.pg-lock::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  bottom: 100%;
  width: 0.4rem;
  height: 0.3rem;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
  box-sizing: border-box;
}

.pg-btn {
  padding: 0.45rem 1.1rem;
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hud-ink);
  background: var(--hud-accent);
  border: 1px solid var(--hud-accent);
  border-radius: var(--radius);
  cursor: pointer;
}

.pg-btn:hover:not(:disabled) { filter: brightness(1.12); }
.pg-btn:disabled { opacity: 0.35; cursor: default; }
.pg-btn--big { padding: 0.65rem 2.4rem; font-size: var(--fs-m); }

.pg-btn--ghost {
  color: var(--hud-text);
  background: var(--pg-plate);
  border-color: var(--hud-line);
}

.pg-btn--ghost:hover:not(:disabled) {
  border-color: var(--hud-dim);
  filter: none;
}

.pg-btn--danger {
  color: var(--hud-text);
  background: transparent;
  border-color: var(--pg-danger);
}

.pg-btn--danger:hover { background: var(--pg-danger); }

.pg-tag, .pg-card__tag {
  padding: 0.05rem 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: var(--line);
  border-radius: var(--radius);
  color: var(--hud-dim);
}

.pg-tag--on { color: var(--hud-hp); border-color: var(--hud-hp); }
.pg-tag--boost { color: var(--pg-xp); border-color: var(--pg-xp); }

.pg-msg {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--pg-danger);
}

.pg-msg--info { color: var(--hud-text); }

.pg-hint {
  margin: 0;
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--hud-dim);
}

.pg-hint b { color: var(--hud-text); }

.pg-input {
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-input option { background: var(--hud-menu); }

.pg-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.4rem 0 0.5rem;
  font-size: var(--fs-s);
}

.pg-win { color: var(--pg-win); }
.pg-loss { color: var(--pg-loss); }

/* Rarity color by data-pg-rarity, used by cards, previews and rows */

[data-pg-rarity="common"] { --rarity: var(--pg-common); }
[data-pg-rarity="rare"] { --rarity: var(--pg-rare); }
[data-pg-rarity="epic"] { --rarity: var(--pg-epic); }
[data-pg-rarity="legendary"] { --rarity: var(--pg-legendary); }

/* Rank emblems: a shield cut to each tier's shape, divisions as pips */

.pg-emblem {
  --tier: var(--pg-rank-locked);
  position: relative;
  display: inline-block;
  flex: none;
  width: 2.4rem;
  height: 2.8rem;
  background:
    linear-gradient(160deg, var(--pg-sheen), var(--pg-clear) 45%),
    linear-gradient(var(--tier), var(--tier));
  clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
  filter: drop-shadow(0 0 4px var(--pg-shade));
}

.pg-emblem::after {
  content: '';
  position: absolute;
  inset: 22% 24% 30%;
  background: var(--pg-shade);
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
}

.pg-emblem[data-pg-tier="bronze"] { --tier: var(--pg-rank-bronze); }
.pg-emblem[data-pg-tier="silver"] { --tier: var(--pg-rank-silver); }
.pg-emblem[data-pg-tier="gold"] { --tier: var(--pg-rank-gold); }

.pg-emblem[data-pg-tier="platinum"] {
  --tier: var(--pg-rank-platinum);
  clip-path: polygon(50% 0, 80% 8%, 100% 30%, 100% 62%, 50% 100%, 0 62%,
    0 30%, 20% 8%);
}

.pg-emblem[data-pg-tier="steel"] {
  --tier: var(--pg-rank-steel);
  clip-path: polygon(20% 0, 80% 0, 100% 20%, 100% 64%, 50% 100%, 0 64%,
    0 20%);
}

.pg-emblem[data-pg-tier="champion"] {
  --tier: var(--pg-rank-champion);
  clip-path: polygon(0 0, 25% 14%, 50% 0, 75% 14%, 100% 0, 100% 62%,
    50% 100%, 0 62%);
  animation: pg-glow 2.4s ease-in-out infinite;
}

.pg-emblem[data-pg-tier="locked"]::after { background: var(--hud-line); }
.pg-emblem--big { width: 5rem; height: 5.8rem; }
.pg-emblem--mini { width: 1.3rem; height: 1.5rem; }

/* HUD chip, top left */

.pg-hud {
  position: absolute;
  top: var(--gap);
  left: calc(var(--gap) * 2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-s);
  background: var(--hud-panel);
  border: var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}

.pg-hud .pg-bar { width: 6rem; }

/* Menu: profile card and the panel buttons */

.pg-menu {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  margin-top: var(--gap);
  text-shadow: none;
}

.pg-profile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(26rem, 92vw);
  padding: 0.6rem 0.8rem;
  text-align: left;
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}

.pg-profile__main { display: grid; flex: 1; gap: 0.35rem; min-width: 0; }

.pg-profile__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pg-profile__row .pg-coins { margin-left: auto; }

.pg-profile__rank {
  font-size: var(--fs-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pg-profile__meta {
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--hud-dim);
}

.pg-boost { color: var(--pg-xp); }

.pg-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pg-badges:empty { display: none; }

.pg-badge {
  padding: 0 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 1em;
}

.pg-badge--early { color: var(--pg-xp); }
.pg-badge--bronze { color: var(--pg-rank-bronze); }
.pg-badge--silver { color: var(--pg-rank-silver); }
.pg-badge--creator { color: var(--hud-accent); }
.pg-badge--admin { color: var(--pg-danger); }

.pg-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 40rem;
}

.pg-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.pg-nav__btn:hover {
  border-color: var(--hud-accent);
  color: var(--hud-accent);
}

.pg-notice {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--pg-danger);
}

/* Panel layer */

.pg-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-shadow: none;
}

.pg-backdrop {
  position: absolute;
  inset: 0;
  background: var(--pg-backdrop);
  backdrop-filter: blur(2px);
}

.pg-panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  width: min(36rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem 1.2rem 1.2rem;
  background: var(--pg-panel);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 4rem var(--pg-shade);
  scrollbar-color: var(--hud-line) transparent;
}

.pg-panel--wide { width: min(64rem, 100%); }
.pg-panel--admin { width: min(40rem, 100%); }

.pg-panel__head {
  position: sticky;
  top: -1rem;
  z-index: 3;
  margin: -1rem -1.2rem 0;
  padding: 1rem 1.2rem 0.6rem;
  background-color: var(--pg-panel-solid);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  border-bottom: var(--line);
  background-image:
    linear-gradient(var(--hud-accent) 0 0);
  background-position: 1.2rem 100%;
  background-size: 3rem 2px;
  background-repeat: no-repeat;
}

.pg-panel__head .pg-kicker { flex-basis: 100%; }

.pg-panel__title {
  margin: 0;
  font-size: var(--fs-l);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pg-panel__head .pg-coins { margin-left: auto; }

.pg-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  background:
    linear-gradient(45deg, transparent 46%, var(--hud-dim) 46% 54%,
      transparent 54%),
    linear-gradient(-45deg, transparent 46%, var(--hud-dim) 46% 54%,
      transparent 54%);
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.pg-close:hover { border-color: var(--hud-dim); }
.pg-panel__head:has(.pg-coins) .pg-coins { margin-right: 2.6rem; }

/* Tabs */

.pg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.1rem;
  border-bottom: var(--line);
}

.pg-panel__head .pg-tabs {
  flex-basis: 100%;
  margin: 0.5rem 0 -0.6rem;
  border-bottom: 0;
}

.pg-tab {
  padding: 0.35rem 0 0.45rem;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hud-dim);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.pg-tab:hover { color: var(--hud-text); }

.pg-tab.is-active {
  color: var(--hud-accent);
  border-bottom-color: var(--hud-accent);
}

/* Armory: grid and preview */

.pg-shop {
  display: grid;
  grid-template-columns: 1fr 15rem;
  gap: 1rem;
  align-items: start;
}

.pg-shop__main { display: grid; gap: 0.8rem; min-width: 0; }

.pg-offer {
  padding: 0.5rem 0.6rem 0.6rem;
  background:
    linear-gradient(90deg, var(--hud-card-picked), var(--pg-clear));
  border-left: 2px solid var(--hud-accent);
}

.pg-offer .pg-section-head { margin-top: 0; }
.pg-offer__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pg-offer .pg-card { width: 7.4rem; }
.pg-offer .pg-card__target { display: block; }

.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  gap: 0.5rem;
}

.pg-card {
  --rarity: var(--pg-common);
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.35rem 0.35rem 0.45rem;
  font: inherit;
  text-align: left;
  color: var(--hud-text);
  background: var(--pg-plate);
  border: var(--line);
  border-bottom: 2px solid var(--rarity);
  border-radius: var(--radius);
  cursor: pointer;
}

.pg-card:hover {
  background: var(--pg-plate-hi);
  box-shadow: 0 0 0.8rem -0.2rem var(--rarity);
}

.pg-card.is-picked {
  border-color: var(--rarity);
  box-shadow: 0 0 0 1px var(--rarity), 0 0 1rem -0.2rem var(--rarity);
}

.pg-card__swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1px;
}

.pg-card__name {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pg-card__target {
  display: none;
  font-size: var(--fs-xs);
  color: var(--hud-dim);
}

.pg-card__price {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--pg-coin);
}

.pg-card__tag {
  display: none;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0 0.3rem;
  color: var(--hud-text);
  background: var(--pg-panel);
}

.pg-card__emblem {
  display: none;
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}

.pg-card[data-pg-emblem] .pg-card__emblem { display: block; }
.pg-card[data-pg-emblem="gold"] .pg-emblem { --tier: var(--pg-rank-gold); }

.pg-card[data-pg-emblem="platinum"] .pg-emblem {
  --tier: var(--pg-rank-platinum);
}

.pg-card[data-pg-emblem="steel"] .pg-emblem { --tier: var(--pg-rank-steel); }

.pg-card[data-pg-emblem="champion"] .pg-emblem {
  --tier: var(--pg-rank-champion);
}

.pg-card:not(.is-owned)[data-pg-source="case"] .pg-card__tag--case,
.pg-card:not(.is-owned)[data-pg-source="boss"] .pg-card__tag--boss,
.pg-card:not(.is-owned)[data-pg-source="contract"] .pg-card__tag--contract,
.pg-card:not(.is-owned)[data-pg-source="cup"] .pg-card__tag--cup,
.pg-card:not(.is-owned)[data-pg-source="rank"] .pg-card__tag--rank,
.pg-card.is-owned:not(.is-equipped) .pg-card__tag--owned,
.pg-card.is-equipped .pg-card__tag--equipped {
  display: block;
}

.pg-card[data-pg-source="secret"] .pg-card__tag--secret { display: block; }
.pg-card__tag--equipped { color: var(--hud-hp); border-color: var(--hud-hp); }

.pg-card.is-owned .pg-card__price,
.pg-card:not([data-pg-source="shop"]) .pg-card__price {
  visibility: hidden;
}

.pg-card:not(.is-owned):not([data-pg-source="shop"]) .pg-card__swatch {
  filter: saturate(0.35) brightness(0.6);
}

.pg-card.is-offer:not(.is-owned) .pg-card__price { color: var(--hud-hp); }

.pg-preview {
  --rarity: var(--pg-common);
  position: sticky;
  top: 6.4rem;
  display: grid;
  gap: 0.4rem;
  padding: 0.7rem;
  background: var(--pg-plate);
  border: var(--line);
  border-top: 2px solid var(--rarity);
  border-radius: var(--radius);
}

.pg-preview__stage {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 60%, var(--pg-plate-hi), var(--pg-clear) 70%);
  overflow: hidden;
}

.pg-preview__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 2rem -0.5rem var(--rarity);
  pointer-events: none;
}

.pg-preview__stage.is-custom .pg-swatch { display: none; }
.pg-swatch { width: 100%; height: 100%; }

.pg-rarity {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--rarity);
}

.pg-preview__name {
  margin: 0;
  font-size: var(--fs-m);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-price {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-l);
  font-weight: 700;
  color: var(--pg-coin);
}

.pg-price s { font-size: var(--fs-s); font-weight: 500; }
.pg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.pg-wrap-slots { display: grid; gap: 0.35rem; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.pg-chip {
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hud-dim);
  background: var(--pg-plate);
  border: var(--line);
  border-radius: 1em;
  cursor: pointer;
}

.pg-chip:hover { color: var(--hud-text); }

.pg-chip.is-on {
  color: var(--hud-ink);
  background: var(--hud-accent);
  border-color: var(--hud-accent);
}

/* Weapons tab */

.pg-weapons, .pg-contracts, .pg-cases { display: grid; gap: 0.7rem; }
.pg-weapons > p,
.pg-contracts > p,
.pg-cases > p {
  margin: 0;
  font-size: var(--fs-s);
}

.pg-weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
}

.pg-weapon {
  display: grid;
  gap: 0.45rem;
  padding: 0.6rem 0.7rem;
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-weapon__head { display: flex; justify-content: space-between; gap: 0.5rem; }

.pg-weapon__name {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-weapon__kind {
  display: none;
  font-size: var(--fs-xs);
  color: var(--hud-dim);
  text-transform: uppercase;
}

.pg-weapon.is-utility .pg-weapon__kind { display: inline; }
.pg-weapon__stats { display: grid; gap: 0.3rem; margin: 0; }

.pg-weapon__stats div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--hud-dim);
}

.pg-weapon__stats dd { margin: 0; }

.pg-weapon__nostats {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--hud-dim);
}

.pg-weapon__foot { display: flex; align-items: center; gap: 0.5rem; }

.pg-weapon__price {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: auto;
  font-weight: 700;
  color: var(--pg-coin);
}

.pg-weapon .pg-tag, .pg-weapon .pg-msg { display: none; }
.pg-weapon.is-free .pg-tag--free { display: inline; }
.pg-weapon.is-owned:not(.is-free) .pg-tag--on { display: inline; }
.pg-weapon.is-soon:not(.is-owned) .pg-tag--soon { display: inline; }
.pg-weapon.is-poor .pg-msg { display: block; }

.pg-weapon.is-owned .pg-weapon__price,
.pg-weapon.is-owned .pg-btn,
.pg-weapon.is-soon .pg-btn {
  display: none;
}

.pg-weapon.is-owned { border-color: var(--hud-line); }
.pg-weapon.is-soon:not(.is-owned) { opacity: 0.55; }

/* Contracts tab */

.pg-contract-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.6rem;
}

.pg-contract {
  display: grid;
  gap: 0.45rem;
  padding: 0.6rem 0.7rem;
  background: var(--pg-plate);
  border: var(--line);
  border-left: 2px solid var(--pg-legendary);
  border-radius: var(--radius);
}

.pg-contract__head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--fs-s);
}

.pg-contract__weapon { text-transform: uppercase; letter-spacing: 0.08em; }
.pg-contract__next { color: var(--hud-dim); }
.pg-contract__tier { color: var(--pg-legendary); font-weight: 700; }
.pg-contract .bar__fill { background: var(--pg-legendary); }
.pg-contract__tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.pg-tier {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--hud-dim);
  background: transparent;
  border: var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.pg-tier canvas {
  width: 100%;
  aspect-ratio: 1;
  filter: grayscale(0.8) brightness(0.5);
}

.pg-tier__name { font-weight: 700; text-transform: uppercase; }

.pg-tier.is-owned {
  color: var(--pg-legendary);
  border-color: var(--pg-legendary);
  box-shadow: 0 0 0.8rem -0.3rem var(--pg-legendary);
}

.pg-tier.is-owned canvas { filter: none; }

/* Cases tab: reel, pity and case cards */

.pg-reel {
  position: relative;
  height: 7.4rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--pg-panel), var(--pg-clear) 18%,
      var(--pg-clear) 82%, var(--pg-panel)),
    var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-reel__strip {
  --reel-x: 0px;
  position: absolute;
  inset: 0.6rem auto 0.6rem 0;
  display: flex;
  gap: 0.4rem;
  transform: translateX(var(--reel-x));
  will-change: transform;
}

.pg-reel__item {
  --rarity: var(--pg-common);
  flex: none;
  width: 8rem;
  padding: 0.2rem;
  background: var(--pg-panel);
  border: var(--line);
  border-bottom: 3px solid var(--rarity);
  border-radius: var(--radius);
}

.pg-reel__item canvas { display: block; width: 100%; height: 100%; }
.pg-reel__item[data-pg-kind="wrap"] { border-style: dashed solid solid; }

.pg-reel__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--hud-accent);
  box-shadow: 0 0 0.6rem var(--hud-accent);
  transform: translateX(-50%);
  z-index: 1;
}

.pg-reel__marker::before, .pg-reel__marker::after {
  content: '';
  position: absolute;
  left: 50%;
  border: 0.45rem solid transparent;
  transform: translateX(-50%);
}

.pg-reel__marker::before { top: 0; border-top-color: var(--hud-accent); }
.pg-reel__marker::after { bottom: 0; border-bottom-color: var(--hud-accent); }

.pg-reel__idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.pg-pity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  font-size: var(--fs-s);
  color: var(--hud-dim);
}

.pg-pity b { color: var(--hud-accent); }

.pg-case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 0.6rem;
}

.pg-case {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-case.is-focus { border-color: var(--hud-dim); }
.pg-case__head { display: flex; align-items: center; gap: 0.6rem; }
.pg-case__head div { display: grid; font-size: var(--fs-xs); }

.pg-case__name {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-case__icon { width: 2rem; height: 1.6rem; color: var(--hud-accent); }

.pg-case__odds {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}

.pg-case__odds th, .pg-case__odds td {
  padding: 0.15rem 0.2rem;
  text-align: right;
  font-weight: 500;
}

.pg-case__odds thead th {
  color: var(--hud-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: var(--line);
}

.pg-case__odds .pg-odds__name {
  text-align: left;
  font-weight: 700;
  color: var(--rarity);
}

.pg-case__odds .pg-odds__total { color: var(--hud-text); font-weight: 700; }
.pg-case--box .pg-odds__skin, .pg-case--box .pg-odds__total { display: none; }
.pg-case__items { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.pg-mini {
  --rarity: var(--pg-common);
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  border-bottom: 2px solid var(--rarity);
}

.pg-mini[data-pg-kind="wrap"] { border-radius: 50%; overflow: hidden; }
.pg-mini canvas { display: block; width: 100%; height: 100%; }

.pg-case__pity { display: none; margin: 0; font-size: var(--fs-xs); }
.pg-case--box .pg-case__pity { display: block; }
.pg-case__foot { display: flex; gap: 0.4rem; margin-top: auto; }
.pg-case__buy { display: flex; align-items: center; }
.pg-case__price {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--pg-coin);
}

.pg-case__open { flex: 1; }
.pg-case .pg-msg { display: none; }
.pg-case.is-poor .pg-msg { display: block; }

/* Loadout */

.pg-slots {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-slot {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-slot canvas { width: 3rem; height: 3rem; }

.pg-slot__name {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-slot__field { display: grid; gap: 0.15rem; }

/* Prize wheel */

.pg-wheel {
  display: grid;
  grid-template-columns: minmax(16rem, 26rem) 1fr;
  gap: 1.4rem;
  align-items: center;
}

.pg-wheel__dial {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pg-wheel-rim) 64%,
    var(--pg-panel) 71%);
  box-shadow: 0 0 0 2px var(--hud-line), 0 0 2.5rem -0.5rem var(--pg-glow);
}

.pg-wheel__canvas { width: 100%; height: 100%; }

.pg-wheel__pointer {
  position: absolute;
  top: -0.3rem;
  left: 50%;
  width: 1.6rem;
  height: 2rem;
  background: var(--hud-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 3px var(--pg-shade));
  transform: translateX(-50%);
  transform-origin: 50% 0;
}

.pg-wheel__pointer.is-on { animation: pg-flick 0.12s ease-out; }

.pg-wheel__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 18%;
  aspect-ratio: 1;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hud-ink);
  background: radial-gradient(circle at 35% 30%, var(--pg-sheen),
    var(--hud-accent) 45%, var(--pg-coin-edge));
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--pg-wheel-rim), 0 0 1rem var(--pg-shade);
  transform: translate(-50%, -50%);
}

.pg-wheel__side { display: grid; gap: 0.7rem; }

.pg-odds {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-odd {
  --dot: var(--hud-dim);
  display: grid;
  grid-template-columns: 0.8rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.4rem;
  font-size: var(--fs-s);
  background: var(--pg-plate);
  border-left: 2px solid var(--dot);
}

.pg-odd__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--dot);
}

.pg-odd__pct { font-variant-numeric: tabular-nums; }
.pg-spin { display: grid; justify-items: start; gap: 0.5rem; }
.pg-spin .pg-bar { width: 100%; }
.pg-spin p { margin: 0; font-size: var(--fs-s); }
.pg-spin__wait b { color: var(--hud-accent); }

/* Tasks */

.pg-tasks {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.4rem;
  align-items: start;
}

.pg-task-list, .pg-secrets, .pg-bosses, .pg-trophies, .pg-ladder {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-task {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 0.8rem;
  padding: 0.5rem 0.6rem;
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-task__text { font-size: var(--fs-s); }
.pg-task__count { font-size: var(--fs-s); color: var(--hud-dim); }
.pg-task .pg-bar { grid-column: 1 / -1; }
.pg-task__reward {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: var(--fs-xs);
}

.pg-reward {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: var(--pg-coin);
}

.pg-reward--xp { color: var(--pg-xp); }
.pg-reward--case { color: var(--hud-accent); }

.pg-task__done {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hud-hp);
}

.pg-task.is-done { border-color: var(--hud-hp); }
.pg-task.is-done .bar__fill { background: var(--hud-hp); }
.pg-task.is-done .pg-task__done { display: block; }

.pg-timer { color: var(--hud-text); font-variant-numeric: tabular-nums; }

.pg-bonus {
  margin: 0.2rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  font-size: var(--fs-s);
  border: 1px dashed var(--hud-accent);
  border-radius: var(--radius);
}

.pg-bonus b { color: var(--hud-accent); }
.pg-bonus.is-done { border-style: solid; border-color: var(--hud-hp); }

.pg-secret {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem;
  background:
    linear-gradient(90deg, var(--pg-plate-hi), var(--pg-clear));
  border: 1px solid var(--pg-secret);
  border-radius: var(--radius);
  box-shadow: 0 0 1rem -0.4rem var(--pg-secret);
}

.pg-secret canvas { width: 3.2rem; height: 3.2rem; }
.pg-secret__text { display: grid; gap: 0.1rem; font-size: var(--fs-xs); }

.pg-secret__name {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pg-secret);
}

.pg-secret__skin { color: var(--pg-legendary); font-weight: 700; }

.pg-boss {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  font-size: var(--fs-s);
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-boss__lvl {
  font-size: var(--fs-m);
  color: var(--pg-xp);
  text-align: center;
}

.pg-boss__tier { font-size: var(--fs-xs); color: var(--hud-dim); }

.pg-boss__state {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pg-boss[data-pg-state="locked"] { opacity: 0.55; }
.pg-boss[data-pg-state="locked"] .pg-boss__state--locked { display: block; }
.pg-boss[data-pg-state="ready"] { border-color: var(--hud-accent); }

.pg-boss[data-pg-state="ready"] .pg-boss__state--ready {
  display: block;
  color: var(--hud-accent);
}

.pg-boss[data-pg-state="beaten"] .pg-boss__state--beaten {
  display: block;
  color: var(--hud-hp);
}

/* Tournaments */

.pg-cup-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 0.6rem;
}

.pg-cup {
  display: grid;
  gap: 0.6rem;
  padding: 0.7rem;
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-cup__head { display: flex; gap: 0.6rem; align-items: center; }
.pg-cup__head div { display: grid; gap: 0.1rem; }

.pg-cup__name {
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-cup__rules { font-size: var(--fs-xs); color: var(--hud-dim); }
.pg-cup__prizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
}

.pg-cup__prizes figure { display: grid; gap: 0.15rem; margin: 0; }

.pg-cup__prizes canvas {
  width: 100%;
  aspect-ratio: 1;
  border-bottom: 2px solid var(--pg-legendary);
}

.pg-cup__prizes figure:nth-child(3) canvas { border-color: var(--pg-epic); }

.pg-cup__prizes figcaption {
  font-size: 0.6rem;
  line-height: 1.2;
  color: var(--hud-dim);
}

.pg-cup__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
}

.pg-cup__foot .pg-btn { margin-left: auto; }
.pg-cup__level { display: none; }
.pg-cup.is-locked { opacity: 0.6; }
.pg-cup.is-locked .pg-cup__level { display: inline; }
.pg-cup.is-locked .pg-cup__wins { display: none; }
.pg-cup.is-won { border-color: var(--pg-legendary); }

.pg-trophy-icon {
  flex: none;
  width: 1.6rem;
  height: 1.8rem;
  background:
    linear-gradient(var(--pg-coin) 0 0) 50% 100% / 70% 12% no-repeat,
    linear-gradient(var(--pg-coin-edge) 0 0) 50% 84% / 16% 20% no-repeat,
    radial-gradient(ellipse at 50% 0, var(--pg-coin) 0 62%, transparent 63%)
      50% 0 / 80% 70% no-repeat;
}

.pg-trophies { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.pg-trophy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: var(--fs-s);
  background: linear-gradient(90deg, var(--hud-card-picked), var(--pg-clear));
  border-left: 2px solid var(--pg-coin);
}

.pg-run {
  display: grid;
  gap: 0.7rem;
  padding: 0.7rem;
  background: var(--pg-plate);
  border: var(--line);
  border-left: 2px solid var(--hud-accent);
}

.pg-run__head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.6rem;
  justify-content: space-between;
}

.pg-run__head p { margin: 0.2rem 0 0; font-size: var(--fs-s); }

.pg-run__stage {
  margin: 0.1rem 0 0;
  font-size: var(--fs-m);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-bracket {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  overflow-x: auto;
}

.pg-bracket__col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.4rem;
  min-width: 9rem;
}

.pg-bracket__stage {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--hud-dim);
}

.pg-bracket__matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.5rem;
}

/* Each match draws a connector to the right toward the next stage */
.pg-bracket__match {
  position: relative;
  display: grid;
  background: var(--pg-panel);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-bracket__col:not(:last-child) .pg-bracket__match::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0.8rem;
  border-top: var(--line);
}

.pg-bracket__col:not(:first-child) .pg-bracket__match::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0.8rem;
  border-top: var(--line);
}

.pg-bracket__col:not(:last-child) .pg-bracket__matches {
  background:
    linear-gradient(var(--hud-line) 0 0) right 0 top 25% / 1px 50% no-repeat;
  margin-right: -0.8rem;
  padding-right: 0.8rem;
}

.pg-bracket__fighter {
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-bracket__fighter + .pg-bracket__fighter { border-top: var(--line); }
.pg-bracket__fighter.is-player { color: var(--pg-win); font-weight: 700; }

.pg-bracket__fighter.is-winner {
  background: var(--hud-card-picked);
  box-shadow: inset 2px 0 0 var(--hud-accent);
}

.pg-bracket__fighter.is-out { opacity: 0.4; text-decoration: line-through; }

/* Ranked */

.pg-rank {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem;
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-rank__info { display: grid; flex: 1; gap: 0.4rem; }

.pg-rank__label {
  margin: 0;
  font-size: var(--fs-l);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pg-rank p { margin: 0; font-size: var(--fs-s); }
.pg-rank__info > div, .pg-rank__info > .pg-dim { font-size: var(--fs-s); }
.pg-rank__info .pg-bar { margin-bottom: 0.3rem; }
.pg-reveal__item {
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--pg-legendary);
}

.pg-bar--rank { height: 6px; }
.pg-rank--locked .pg-rank__label {
  font-size: var(--fs-m);
  color: var(--hud-dim);
}

.pg-rung {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  font-size: var(--fs-s);
  background: var(--pg-plate);
  border: var(--line);
  border-radius: var(--radius);
}

.pg-rung .pg-emblem { --tier: var(--pg-rank-locked); }
.pg-rung[data-pg-tier="bronze"] .pg-emblem { --tier: var(--pg-rank-bronze); }
.pg-rung[data-pg-tier="silver"] .pg-emblem { --tier: var(--pg-rank-silver); }
.pg-rung[data-pg-tier="gold"] .pg-emblem { --tier: var(--pg-rank-gold); }

.pg-rung[data-pg-tier="platinum"] .pg-emblem {
  --tier: var(--pg-rank-platinum);
}

.pg-rung[data-pg-tier="steel"] .pg-emblem { --tier: var(--pg-rank-steel); }

.pg-rung[data-pg-tier="champion"] .pg-emblem {
  --tier: var(--pg-rank-champion);
}

.pg-rung__name {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pg-rung__coins {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--pg-coin);
  font-weight: 700;
}

.pg-rung__set {
  display: flex;
  gap: 0.25rem;
}

.pg-rung__set canvas {
  width: 1.7rem;
  height: 1.7rem;
  border-bottom: 2px solid var(--pg-legendary);
}

.pg-rung.is-current { border-color: var(--hud-accent); }
.pg-rung:not(.is-reached) .pg-rung__name { color: var(--hud-dim); }
.pg-rung.is-reached .pg-rung__coins { opacity: 0.45; }

/* Summary */

.pg-summary { display: grid; gap: 0.9rem; justify-items: stretch; }

.pg-summary__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pg-summary__score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-l);
}

.pg-summary__score b:first-child { color: var(--pg-win); }
.pg-summary__score b:last-child { color: var(--pg-loss); }

.pg-summary__score i {
  width: 0.7rem;
  height: 2px;
  background: var(--hud-dim);
}

.pg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--hud-line);
  border: var(--line);
}

.pg-stats div {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  background: var(--pg-panel);
}

.pg-stats dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hud-dim);
}

.pg-stats dd { margin: 0; font-size: var(--fs-l); font-weight: 700; }
.pg-earned {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.pg-earned__item {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  padding: 0.5rem 0.6rem;
  background: var(--pg-plate);
  border-left: 2px solid var(--hud-accent);
}

.pg-earned__item b { font-size: var(--fs-l); }
.pg-earned__xp { color: var(--pg-xp); }
.pg-earned__coins {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--pg-coin);
}

.pg-summary__level {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-s);
}

.pg-levelup {
  margin: 0;
  font-size: var(--fs-m);
  font-weight: 700;
  color: var(--hud-accent);
  text-align: center;
}

.pg-summary > .pg-btn { justify-self: center; }

/* Save */

.pg-code {
  width: 100%;
  padding: 0.5rem;
  font-family: ui-monospace, monospace;
  font-size: var(--fs-xs);
  color: var(--hud-text);
  background: var(--hud-card);
  border: var(--line);
  border-radius: var(--radius);
  resize: vertical;
  word-break: break-all;
  user-select: text;
}

.pg-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  font-size: var(--fs-s);
  background: var(--hud-card-picked);
  border: 1px solid var(--hud-accent);
  border-radius: var(--radius);
}

.pg-confirm span { flex-basis: 100%; }
.pg-confirm--danger { background: transparent; border-color: var(--pg-danger); }
.pg-danger {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding-top: 0.6rem;
  border-top: var(--line);
}

/* Admin */

.pg-admin { display: grid; gap: 0.6rem; }

.pg-admin__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: var(--pg-plate);
  border-left: 2px solid var(--pg-danger);
}

.pg-admin__group .pg-label { flex-basis: 100%; }
.pg-admin__group .pg-input { width: 7rem; }
.pg-admin .pg-btn { padding: 0.3rem 0.7rem; font-size: var(--fs-xs); }

.pg-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: auto;
  font-size: var(--fs-s);
  cursor: pointer;
}

.pg-check input { accent-color: var(--pg-danger); }

/* Reveal: rays behind a card in the prize's tone */

.pg-reveal {
  --tone: var(--hud-accent);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pg-backdrop);
}

.pg-reveal[data-pg-tone="rare"] { --tone: var(--pg-rare); }
.pg-reveal[data-pg-tone="epic"] { --tone: var(--pg-epic); }
.pg-reveal[data-pg-tone="legendary"] { --tone: var(--pg-legendary); }
.pg-reveal[data-pg-tone="boss"] { --tone: var(--pg-legendary); }
.pg-reveal[data-pg-tone="secret"] { --tone: var(--pg-secret); }
.pg-reveal[data-pg-tone="boost"] { --tone: var(--pg-xp); }
.pg-reveal[data-pg-tone="coins"] { --tone: var(--pg-coin); }
.pg-reveal[data-pg-tone="common"] { --tone: var(--pg-common); }

.pg-reveal__rays {
  position: absolute;
  width: 160vmax;
  height: 160vmax;
  background: repeating-conic-gradient(from 0deg, var(--tone) 0 4deg,
    var(--pg-clear) 4deg 18deg);
  mask: radial-gradient(circle, black 0, transparent 38%);
  opacity: 0.35;
  animation: pg-spin 18s linear infinite, pg-fade 0.6s ease-out;
}

.pg-reveal__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: min(20rem, 90vw);
  padding: 1.2rem 1.2rem 1.4rem;
  text-align: center;
  background: var(--pg-panel);
  border: 1px solid var(--tone);
  border-radius: var(--radius);
  box-shadow: 0 0 3rem -0.5rem var(--tone);
  animation: pg-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.pg-reveal__card .pg-kicker { color: var(--tone); }

.pg-reveal__swatch {
  width: 10rem;
  height: 10rem;
  border: 1px solid var(--tone);
  box-shadow: 0 0 1.6rem -0.2rem var(--tone);
}

.pg-reveal__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pg-sheen) 0 10%,
    var(--tone) 32%, var(--pg-shade) 100%);
  box-shadow: 0 0 2rem -0.2rem var(--tone);
}

.pg-reveal__title {
  font-size: var(--fs-l);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tone);
}

.pg-reveal__sub { font-size: var(--fs-s); color: var(--hud-dim); }

.pg-reveal[data-pg-tone="secret"] .pg-reveal__card {
  background:
    linear-gradient(160deg, var(--pg-plate-hi), var(--pg-clear) 50%),
    var(--pg-panel);
}

/* Toasts, top right */

.pg-toasts {
  position: fixed;
  top: calc(var(--gap) * 4);
  right: calc(var(--gap) * 2);
  z-index: 30;
  display: grid;
  justify-items: end;
  gap: 0.4rem;
  pointer-events: none;
}

.pg-toast {
  --tone: var(--hud-accent);
  display: grid;
  gap: 0.1rem;
  min-width: 13rem;
  max-width: 19rem;
  padding: 0.5rem 0.8rem;
  background: var(--pg-panel);
  border: var(--line);
  border-left: 3px solid var(--tone);
  border-radius: var(--radius);
  box-shadow: 0 0.6rem 1.6rem var(--pg-shade);
  animation: pg-toast-life 3.8s ease-in-out forwards;
}

.pg-toast[data-pg-kind="level"] { --tone: var(--pg-xp); }
.pg-toast[data-pg-kind="task"] { --tone: var(--hud-hp); }
.pg-toast[data-pg-kind="secret"] { --tone: var(--pg-secret); }
.pg-toast[data-pg-kind="contract"] { --tone: var(--pg-legendary); }
.pg-toast[data-pg-kind="coins"] { --tone: var(--pg-coin); }
.pg-toast[data-pg-kind="rank"] { --tone: var(--pg-rank-gold); }

.pg-toast__kind {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--tone);
}

.pg-toast__title { font-size: var(--fs-m); }
.pg-toast__sub { font-size: var(--fs-xs); color: var(--hud-dim); }
.pg-toast__sub:empty { display: none; }

/* Narrow screens stack the two-column panels */

@media (max-width: 760px) {
  .pg-shop, .pg-wheel, .pg-tasks { grid-template-columns: 1fr; }
  .pg-preview { position: static; }
  .pg-slot { grid-template-columns: 3rem 1fr; }
  .pg-slot__field { grid-column: span 2; }
  .pg-stats, .pg-earned { grid-template-columns: repeat(2, 1fr); }
  .pg-bracket { grid-template-columns: repeat(3, minmax(9rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-reveal__rays, .pg-pill--hot, .pg-emblem { animation: none; }
}

@keyframes pg-toast-life {
  0% { opacity: 0; transform: translateX(1.5rem); }
  8%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(1.5rem); }
}

@keyframes pg-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-fade { from { opacity: 0; } }

@keyframes pg-flick {
  50% { transform: translateX(-50%) rotate(-14deg); }
}

@keyframes pg-pulse {
  50% { box-shadow: 0 0 0.6rem var(--hud-accent); }
}

@keyframes pg-glow {
  50% { filter: drop-shadow(0 0 8px var(--pg-rank-champion)); }
}