.pm-page {
  padding: 24px 0;
}

/* SHELLS */
.pm-page .pm-header-shell,
.pm-page .pm-section-shell,
.pm-page .pm-controls-shell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

/* HEADER */
.pm-title-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pm-title-chip {
  width: 82px;
  height: 82px;
}

.pm-page h1 {
  margin: 0;
  font-size: 28px;
}

.pm-accent-line {
  height: 4px;
  margin-top: 14px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold) 35%,
    rgba(255, 215, 0, 0.4) 65%,
    transparent 100%
  );
}

/* CONTROLS */
.pm-controls-shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.pm-controls-left {
  display: flex;
  gap: 10px;
}

.pm-btn {
  padding: 8px 14px;

  border-radius: 999px; /* match chip style */

  background: var(--panel-2);     /* 🔥 matches cards */
  border: 1px solid var(--line);  /* 🔥 matches shells */

  color: var(--text);

  cursor: pointer;
  font-weight: 600;

  transition: all 0.2s ease;
}

.pm-btn.active {
  border: none;
  color: #111; /* ensures readable on yellow */
}

.pm-btn.hot.active {
  background: linear-gradient(135deg, #e53935, #ff7043);
  box-shadow: 0 0 6px rgba(229,57,53,0.6);
}

.pm-btn.cold.active {
  background: linear-gradient(135deg, #1e88e5, #4fc3f7);
  box-shadow: 0 0 6px rgba(30,136,229,0.6);
}

.pm-btn.consistent.active {
  background: linear-gradient(135deg, #43a047, #81c784);
  box-shadow: 0 0 6px rgba(67,160,71,0.6);
}

.pm-btn.volatile.active {
  background: linear-gradient(135deg, #fdd835, #ffeb3b);
  color: #111;
  box-shadow: 0 0 6px rgba(253,216,53,0.6);
}

.pm-btn:active {
  transform: scale(0.96);
}

/* FORMULA FIX */
.pm-formula {
  font-size: 14px;
  color: #ddd;

  text-align: right;

  white-space: nowrap;        /* 🔥 FORCE ONE LINE */
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 600px;           /* 🔥 give it room */
}

.pm-formula-sub {
  display: block;
  font-size: 11px;
  color: #777;
}

/* GRID */
.pm-player-grid,
.pm-movers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* CARD */
.pm-player-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

/* HEADER */
.pm-player-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

/* BADGES */
.pm-badges {
  margin: 8px 0;
  font-size: 16px;
}

/* STATS */
.pm-stats {
  font-size: 12px;
  color: var(--muted);
}

/* EFFECTS */
.pm-player-card.pm-hot {
  box-shadow: 0 0 12px rgba(229,57,53,0.7);
}

.pm-player-card.pm-cold {
  opacity: 0.6;
}

.pm-player-card.pm-consistent {
  border: 1px solid #43a047;
}

@keyframes pulse {
  0% { box-shadow: 0 0 6px rgba(253,216,53,0.4); }
  50% { box-shadow: 0 0 16px rgba(253,216,53,0.9); }
  100% { box-shadow: 0 0 6px rgba(253,216,53,0.4); }
}

.pm-player-card.pm-volatile {
  animation: pulse 2s infinite;
}

.pm-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  flex-wrap: wrap;
}

.pm-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-badges {
  margin: 8px 0;
  font-size: 16px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* =========================================
   🎛 CONTROLS LAYOUT FIX
========================================= */
.pm-controls-shell {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 🔥 important */
  gap: 24px;
  flex-wrap: wrap;
}

/* LEFT SIDE STACK */
.pm-controls-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* BUTTON ROW */
.pm-button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================
   📘 LEGEND (BIGGER + CLEAN)
========================================= */
.pm-legend {
  display: flex;
  gap: 14px;
  font-size: 13px;      /* 🔥 slightly bigger */
  color: var(--muted);
  flex-wrap: wrap;
}

.pm-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =========================================
   🧠 FORMULA (RIGHT SIDE FIX)
========================================= */
.pm-formula {
  max-width: 420px;
  font-size: 15px;
  text-align: right;
  line-height: 1.4;
}

/* =========================================
   📍 BADGE POSITION (BOTTOM RIGHT)
========================================= */
.pm-player-card {
  position: relative;
}

.pm-badges {
  position: absolute;
  bottom: 10px;
  right: 12px;

  display: flex;
  gap: 6px;
  align-items: center;
}

/* =========================================
   ✨ ICON BASE STYLE
========================================= */
.pm-icon {
  font-size: 16px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.2));
}

/* =========================================
   🏆 WIN GLOW
========================================= */
.pm-badge:has(> span:contains("🏆")),
.pm-badges span:contains("🏆") {
  text-shadow: 0 0 6px gold;
}

/* =========================================
   🎯 DEEP RUN GLOW
========================================= */
.pm-badges span:contains("🎯") {
  text-shadow: 0 0 6px #00e5ff;
}

/* =========================================
   💣 BUBBLE GLOW
========================================= */
.pm-badges span:contains("💣") {
  text-shadow: 0 0 6px orange;
}

/* =========================================
   💀 BUST GLOW (SUBTLE)
========================================= */
.pm-badges span:contains("💀") {
  text-shadow: 0 0 4px #888;
}

/* =========================================
   🔥 STREAK GLOW (STRONG)
========================================= */
.pm-streak {
  text-shadow: 0 0 8px #ff5722;
}

/* =========================================
   🔼 ARROW COLORS
========================================= */
.pm-player-header div span.up {
  color: #4caf50;
}

.pm-player-header div span.down {
  color: #e53935;
}

/* =========================================
   🔥 STREAK ANIMATION
========================================= */
@keyframes flameFlicker {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.pm-streak {
  text-shadow: 0 0 10px #ff5722;
  animation: flameFlicker 1.2s infinite;
}

/* =========================================
   🏆 WIN PULSE
========================================= */
@keyframes winPulse {
  0% { text-shadow: 0 0 6px gold; }
  50% { text-shadow: 0 0 14px gold; }
  100% { text-shadow: 0 0 6px gold; }
}

.pm-win {
  animation: winPulse 1.5s infinite;
}

/* =========================================
   🎴 CARD HOVER POLISH
========================================= */
.pm-player-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pm-player-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* =========================================
   🧠 FORMULA (FINAL LAYOUT)
========================================= */
.pm-controls-shell {
  position: relative; /* 🔥 anchor point */
}

.pm-formula {
  position: absolute;
  bottom: 16px;
  right: 18px;

  text-align: right;
  max-width: 520px;

  line-height: 1.3;
}

/* LINE STYLES */
.pm-formula-line1 {
  font-size: 14px;
  color: #fff;
}

.pm-formula-line2 {
  font-size: 12px;
  color: #aaa;
}

.pm-formula-line3 {
  font-size: 11px;
  color: #777;
}

.pm-early {
  text-shadow: 0 0 8px #42a5f5;
}

.pm-page .pm-player-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-page .pm-player-subhead {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  font-weight: 700;
}

.pm-page .pm-card-metrics {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

.pm-page .pm-metric-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-page .pm-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 1.2;
}

.pm-page .pm-metric-label {
  color: rgba(255,255,255,.78);
  font-weight: 700;
}

.pm-page .pm-metric-value {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}

.pm-page .pm-rank-change-wrap {
  min-width: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-page .pm-rank-badge {
  min-width: 78px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 12px;
  border-radius: 14px;
  line-height: 1;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 16px rgba(0,0,0,.32);
}

.pm-page .pm-rank-arrow {
  display: inline-block;
  font-size: 30px;
  font-weight: 1000;
  line-height: .8;
  -webkit-text-stroke: 1.2px currentColor;
  text-stroke: 1.2px currentColor;
}

.pm-page .pm-rank-number {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.pm-page .pm-rank-up {
  color: #5cff8d;
  background: rgba(28, 87, 42, .38);
  text-shadow: 0 0 10px rgba(92,255,141,.25);
}

.pm-page .pm-rank-down {
  color: #ff7b7b;
  background: rgba(107, 31, 31, .35);
  text-shadow: 0 0 10px rgba(255,123,123,.22);
}

.pm-page .pm-rank-flat {
  color: #ffd54a;
  background: rgba(120, 92, 18, .28);
  text-shadow: 0 0 10px rgba(255,213,74,.18);
}

.pm-page .pm-finish-history {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.35;
}

.pm-page .pm-finish-history-label {
  color: rgba(255,255,255,.78);
  font-weight: 700;
  margin-right: 6px;
}

.pm-page .pm-finish-history-values {
  color: #fff;
  font-weight: 700;
}

.pm-page .pm-stats {
  font-size: 15px;
  line-height: 1.35;
}

/* =========================================
   🔥 HEATER METER HEADER POLISH
========================================= */

.pm-page .pm-header-shell .pm-accent-line {
  margin-bottom: 16px;
}

.pm-page .pm-header-shell .page-kicker {
  margin-top: 0;
}

/* =========================================
   🔥 HEATER METER FORMULA CLEAN ALIGN + WRAP
========================================= */

.pm-page .pm-controls-shell {
  display: flex;
  align-items: center;
  min-height: 132px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.pm-page .pm-controls-left {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(460px, 0.95fr);
  grid-template-rows: auto auto;
  column-gap: 32px;
  row-gap: 14px;
  align-items: end;
}

.pm-page .pm-button-row {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.pm-page .pm-legend {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

.pm-page .pm-formula {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  justify-self: end;

  height: auto;
  min-height: unset;
  max-height: none;
  max-width: 560px;

  overflow: visible;
  white-space: normal;
  text-align: right;
  line-height: 1.35;
  padding: 0;
  font-size: 14px;
}

.pm-page .pm-formula-line1,
.pm-page .pm-formula-line2 {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.35;
}

.pm-page .pm-formula-line1 {
  margin-bottom: 6px;
}

.pm-page .pm-formula-line3 {
  display: none;
}

/* =========================================
   🔥 HEATER METER BUTTONS — TLPT CONTROL STYLE
========================================= */

.pm-page .pm-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.pm-page .pm-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.035)
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -12px 22px rgba(0,0,0,.22),
    0 0 0 1px rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.22);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease;
}

.pm-page .pm-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.pm-page .pm-btn:active {
  transform: translateY(0);
}

/* 🔥 Hot */
.pm-page .pm-btn.hot {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(180deg, rgba(255,105,79,.95), rgba(120,28,22,.92));
  border-color: rgba(255,120,96,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -13px 24px rgba(72,11,8,.42),
    0 0 0 1px rgba(255,81,64,.18),
    0 8px 18px rgba(0,0,0,.26);
}

/* ❄️ Cold */
.pm-page .pm-btn.cold {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(38,70,96,.95), rgba(15,31,48,.94));
  border-color: rgba(126,190,255,.28);
}

/* 🟢 Consistent */
.pm-page .pm-btn.consistent {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(36,159,70,.96), rgba(16,84,42,.95));
  border-color: rgba(91,255,137,.45);
}

/* 🎢 Volatile */
.pm-page .pm-btn.volatile {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(59,80,103,.96), rgba(20,34,51,.95));
  border-color: rgba(255,213,74,.30);
}

/* Active state — same family as The Crew buttons */
.pm-page .pm-btn.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px rgba(0,0,0,.28),
    0 0 0 2px rgba(255,255,255,.10),
    0 0 18px rgba(255,213,74,.22),
    0 8px 18px rgba(0,0,0,.28);
}

.pm-page .pm-btn.hot.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px rgba(72,11,8,.44),
    0 0 0 2px rgba(255,120,96,.20),
    0 0 18px rgba(255,84,63,.28),
    0 8px 18px rgba(0,0,0,.28);
}

.pm-page .pm-btn.cold.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -14px 24px rgba(8,22,40,.42),
    0 0 0 2px rgba(126,190,255,.16),
    0 0 18px rgba(126,190,255,.18),
    0 8px 18px rgba(0,0,0,.28);
}

.pm-page .pm-btn.consistent.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px rgba(7,61,28,.42),
    0 0 0 2px rgba(91,255,137,.18),
    0 0 18px rgba(91,255,137,.25),
    0 8px 18px rgba(0,0,0,.28);
}

.pm-page .pm-btn.volatile.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -14px 24px rgba(15,25,38,.42),
    0 0 0 2px rgba(255,213,74,.14),
    0 0 18px rgba(255,213,74,.18),
    0 8px 18px rgba(0,0,0,.28);
}

/* =========================================
   🎢 VOLATILE BUTTON FIX — YELLOW THEME
========================================= */

.pm-page .pm-btn.volatile {
  color: #fff !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(180deg, rgba(190,142,27,.96), rgba(83,58,12,.95));
  border-color: rgba(255,213,74,.58);
}

.pm-page .pm-btn.volatile:hover {
  color: #fff !important;
  filter: brightness(1.09);
}

.pm-page .pm-btn.volatile.active {
  color: #fff !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.26), transparent 24%),
    linear-gradient(180deg, rgba(225,168,36,.98), rgba(108,74,14,.96));
  border-color: rgba(255,213,74,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -14px 24px rgba(78,50,8,.45),
    0 0 0 2px rgba(255,213,74,.20),
    0 0 18px rgba(255,213,74,.30),
    0 8px 18px rgba(0,0,0,.28);
}

.pm-page .pm-btn.volatile.active,
.pm-page .pm-btn.volatile.active * {
  color: #fff !important;
}

/* =========================================
   🏷️ HEATER METER CARD BADGES
========================================= */

.pm-page .pm-player-card {
  position: relative;
  padding-bottom: 46px;
}

.pm-page .pm-card-badges {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-height: 26px;
}

.pm-page .pm-card-badge {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-size: 15px;
  line-height: 1;

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(180deg, rgba(27,39,55,.95), rgba(11,18,28,.95));

  border: 1px solid rgba(255,213,74,.34);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 12px rgba(255,213,74,.18),
    0 6px 14px rgba(0,0,0,.28);
}

.pm-page .pm-card-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

/* =========================================
   📱 HEATER METER RESPONSIVE LAYOUT
========================================= */

/* Tablet / smaller desktop */
@media (max-width: 1050px) {
  .pm-page .pm-controls-shell {
    min-height: unset;
    padding: 18px;
  }

  .pm-page .pm-controls-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pm-page .pm-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .pm-page .pm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .pm-page .pm-formula {
    margin-top: 4px;
    max-width: none;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
  }

  .pm-page .pm-movers-grid,
  .pm-page .pm-player-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Large phones / narrow tablets */
@media (max-width: 720px) {
  .pm-page {
    gap: 18px;
  }

  .pm-page .pm-header-shell,
  .pm-page .pm-controls-shell,
  .pm-page .pm-section-shell {
    padding: 18px;
    border-radius: 18px;
  }

  .pm-page .pm-title-row {
    align-items: center;
    gap: 12px;
  }

  .pm-page .pm-title-chip {
    width: 56px;
    height: 56px;
  }

  .pm-page .pm-title-row h1 {
    font-size: 28px;
    line-height: 1.05;
  }

  .pm-page .page-kicker {
    font-size: 14px;
    line-height: 1.45;
  }

  .pm-page .pm-button-row {
    gap: 10px;
  }

  .pm-page .pm-btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 11px;
  }

  .pm-page .pm-legend {
    font-size: 13px;
    line-height: 1.3;
  }

  .pm-page .pm-formula {
    font-size: 13px;
    line-height: 1.4;
  }

  .pm-page .pm-section-shell h2 {
    font-size: 24px;
    line-height: 1.1;
  }

  .pm-page .pm-movers-grid,
  .pm-page .pm-player-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pm-page .pm-player-card {
    min-height: unset;
    padding: 16px 16px 48px;
  }

  .pm-page .pm-player-header {
    gap: 12px;
  }

  .pm-page .pm-avatar {
    width: 54px;
    height: 54px;
  }

  .pm-page .pm-player-heading strong {
    font-size: 17px;
  }

  .pm-page .pm-sparkline {
    width: 100%;
    max-width: 180px;
    height: 44px;
  }

  .pm-page .pm-card-metrics {
    gap: 10px;
  }

  .pm-page .pm-metric-row {
    font-size: 14px;
    gap: 8px;
  }

  .pm-page .pm-metric-value {
    font-size: 15px;
  }

  .pm-page .pm-rank-change-wrap {
    min-width: 70px;
  }

  .pm-page .pm-rank-badge {
    min-width: 64px;
    padding: 10px 9px;
    border-radius: 13px;
  }

  .pm-page .pm-rank-arrow {
    font-size: 27px;
  }

  .pm-page .pm-rank-number {
    font-size: 18px;
  }

  .pm-page .pm-finish-history {
    font-size: 13px;
    line-height: 1.4;
    padding-right: 0;
  }

  .pm-page .pm-finish-history-values {
    overflow-wrap: anywhere;
  }

  .pm-page .pm-card-badges {
    right: 12px;
    bottom: 12px;
    gap: 6px;
  }

  .pm-page .pm-card-badge {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }
}


/* Small phones */
@media (max-width: 480px) {
  .pm-page .pm-header-shell,
  .pm-page .pm-controls-shell,
  .pm-page .pm-section-shell {
    padding: 15px;
    border-radius: 16px;
  }

  .pm-page .pm-title-row {
    gap: 10px;
  }

  .pm-page .pm-title-chip {
    width: 48px;
    height: 48px;
  }

  .pm-page .pm-title-row h1 {
    font-size: 24px;
  }

  .pm-page .pm-button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .pm-page .pm-btn {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  .pm-page .pm-legend {
    gap: 8px 10px;
    font-size: 12px;
  }

  .pm-page .pm-formula {
    font-size: 12px;
    padding: 11px 12px;
  }

  .pm-page .pm-section-shell h2 {
    font-size: 21px;
  }

  .pm-page .pm-player-card {
    padding: 15px 14px 50px;
  }

  .pm-page .pm-avatar {
    width: 48px;
    height: 48px;
  }

  .pm-page .pm-player-heading strong {
    font-size: 16px;
  }

  .pm-page .pm-card-metrics {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .pm-page .pm-rank-change-wrap {
    justify-content: flex-start;
    min-width: 0;
  }

  .pm-page .pm-rank-badge {
    min-width: 76px;
  }

  .pm-page .pm-metric-row {
    justify-content: space-between;
  }

  .pm-page .pm-card-badges {
    left: 14px;
    right: auto;
    justify-content: flex-start;
  }
}

/* =========================================
   HEATER METER HEADER ALIGNMENT
========================================= */

.pm-page .pm-title-chip,
.pm-page .page-chip,
.pm-page .page-chip-dashboard {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* =========================================
   HEATER METER TITLE — CHAMPIONS STYLE
========================================= */

.pm-page .pm-title-row h1,
.pm-page .pm-page-title,
.pm-page h1 {
  margin: 0;
  color: #c88a00 !important;
  font-size: 1.5em !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: left;
  text-shadow: 0 0 8px rgba(200,138,0,.10);
}

/* =========================================
   HEATER METER FINAL HEADER ALIGNMENT
========================================= */

/* Match the top spacing used by the other main pages */
main.wrap .pm-page {
  padding-top: 0 !important;
}

/* The header shell itself should sit right under the normal page wrap spacing */
.pm-page .pm-header-shell {
  margin-top: 0 !important;
}

/* Match Champions / The TLPT (Dis)Honors title treatment */
.pm-page .pm-title-row h1,
.pm-page .pm-page-title,
.pm-page h1 {
  margin: 0 !important;
  color: #fde68a !important;
  font-size: 1.5em !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  text-shadow: 0 0 8px rgba(250,204,21,.14) !important;
}

/* Keep the chip at the same page-header size as the rest of the site */
.pm-page .pm-title-chip,
.pm-page .page-chip,
.pm-page .page-chip-dashboard {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: 0 0 auto !important;
}

/* Keep title/chip alignment consistent with other header shells */
.pm-page .pm-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}