/* ================================================================
   SKIER PROFILE BOARD
   Registered directly to the 1586 x 992 authored artwork. Keep every
   persistent region on these shared coordinates so changing tabs never
   moves the frame, identity, navigation, or content origin.
   ================================================================ */
#profilePanel {
  --pf-board-ratio: 1.5987903226;
  --pf-ice: #82ceff;
  --pf-paper: #e7edf0;
  --pf-dim: rgba(190, 207, 217, .68);
  --pf-hairline: rgba(158, 197, 219, .18);
  padding: 0;
  background: rgba(1, 5, 9, .76);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#profilePanel .pf-app {
  position: relative;
  display: block;
  width: min(96vw, calc(94dvh * var(--pf-board-ratio)), 1500px);
  height: auto;
  max-height: none;
  aspect-ratio: 1586 / 992;
  container: profile-board / inline-size;
  overflow: visible;
  border: 0;
  border-radius: 0;
  /* .pf-app is also a legacy .panel-card. Its rectangular glass backdrop
     shows through the transparent pixels around the authored frame unless
     both parts of that treatment are explicitly cleared here. */
  background-color: transparent;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  filter: drop-shadow(0 2.2cqw 2.2cqw rgba(0, 0, 0, .6));
  font-family: 'Exo 2', var(--font-family);
  isolation: isolate;
}
#profilePanel .pf-app.pf-layout-split {
  background-image: url('./images/ui/profilebgnobg.webp?v=20260812a');
}
#profilePanel .pf-app.pf-layout-open {
  background-image: url('./images/ui/profilebgblank.webp?v=20260812a');
}
#profilePanel .pf-app *,
#profilePanel .pf-app *::before,
#profilePanel .pf-app *::after { box-sizing: border-box; }

/* Identity plate: the avatar is inset so the artwork's metal ring remains
   visible around it; everything else stays inside the top slate opening. */
#profilePanel .pf-hero {
  position: absolute;
  z-index: 3;
  left: 6.4%;
  right: 6.45%;
  top: 9.45%;
  width: auto;
  height: 15.15%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
}
#profilePanel .pf-hero-bg { display: none; }
#profilePanel .pf-hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
#profilePanel .pf-rider-card {
  display: flex;
  align-items: center;
  gap: 1.7cqw;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 18cqw 0 3.83cqw;
  text-align: left;
}
#profilePanel .pf-avatar-wrap,
#profilePanel .pf-avatar,
#profilePanel .pf-avatar-fb {
  width: 8.5cqw;
  height: 8.5cqw;
}
#profilePanel .pf-avatar-wrap { flex: 0 0 auto; }
#profilePanel .pf-avatar,
#profilePanel .pf-avatar-fb {
  display: block;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 18, 27, .72);
  box-shadow: inset 0 0 0 1px rgba(215, 229, 236, .14), 0 .35cqw .7cqw rgba(0,0,0,.36);
}
#profilePanel .pf-avatar {
  object-fit: cover;
  object-position: center;
  transform: translateX(.18cqw) scale(1.035);
  transform-origin: center;
}
#profilePanel .pf-avatar-wrap:focus { outline: none; }
#profilePanel .pf-avatar-wrap:focus-visible {
  outline: .12cqw solid rgba(126, 210, 255, .78);
  outline-offset: .22cqw;
}
#profilePanel .pf-avatar-wrap.is-online:not(.uploading)::after,
#profilePanel .pf-avatar-wrap.is-offline:not(.uploading)::after {
  content: '';
  position: absolute;
  z-index: 5;
  right: .02cqw;
  bottom: .58cqw;
  width: .9cqw;
  height: .9cqw;
  border: .16cqw solid #0c1821;
  border-radius: 50%;
}
#profilePanel .pf-avatar-wrap.is-online:not(.uploading)::after {
  background: #46e68d;
  box-shadow: 0 0 .62cqw rgba(70,230,141,.82);
}
#profilePanel .pf-avatar-wrap.is-offline:not(.uploading)::after {
  background: #71808a;
  box-shadow: 0 0 0 1px rgba(220,231,236,.12);
}
#profilePanel .pf-avatar-wrap[data-presence-tooltip]::before {
  content: attr(data-presence-tooltip);
  position: absolute;
  z-index: 20;
  left: calc(100% - .55cqw);
  bottom: .45cqw;
  width: max-content;
  max-width: 15cqw;
  padding: .42cqw .62cqw;
  border: 1px solid rgba(178,207,223,.22);
  border-radius: .28cqw;
  background: rgba(3,10,15,.96);
  box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.42);
  color: #dbe8ee;
  font: 700 clamp(9px, .68cqw, 11px)/1 'Exo 2', var(--font-family);
  letter-spacing: .025em;
  opacity: 0;
  pointer-events: none;
  transform: translate(.35cqw, 40%);
  transition: opacity .14s ease, transform .14s ease;
}
#profilePanel .pf-avatar-wrap[data-presence-tooltip]:hover::before,
#profilePanel .pf-avatar-wrap[data-presence-tooltip]:focus-within::before {
  opacity: 1;
  transform: translate(.35cqw, 25%);
}
#profilePanel .pf-avatar-fb { color: rgba(195, 211, 219, .5); }
#profilePanel .pf-avatar-wrap.is-editable {
  cursor: pointer;
}
#profilePanel .pf-avatar-wrap.is-editable .pf-avatar,
#profilePanel .pf-avatar-wrap.is-editable .pf-avatar-fb {
  transition: filter .14s ease, transform .14s ease;
}
#profilePanel .pf-avatar-change {
  position: absolute;
  z-index: 4;
  inset: .18cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(3, 12, 18, .62);
  color: #f4fbff;
  font: 800 clamp(8px, .72cqw, 12px)/1.1 'Exo 2', var(--font-family);
  letter-spacing: .025em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
#profilePanel .pf-avatar-wrap.is-editable:hover .pf-avatar-change,
#profilePanel .pf-avatar-wrap.is-editable:focus-visible .pf-avatar-change {
  opacity: 1;
}
#profilePanel .pf-avatar-wrap.is-editable:hover .pf-avatar,
#profilePanel .pf-avatar-wrap.is-editable:focus-visible .pf-avatar {
  filter: brightness(.72);
}
#profilePanel .pf-avatar-edit {
  z-index: 6;
  right: -.2cqw;
  bottom: .2cqw;
  width: 1.9cqw;
  height: 1.9cqw;
  border: .12cqw solid #15232d;
  background: #d4e3ea;
  color: #172530;
}
#profilePanel .pf-avatar-status {
  position: absolute;
  z-index: 22;
  top: calc(100% + .5cqw);
  left: 50%;
  width: max-content;
  max-width: clamp(150px, 16cqw, 220px);
  padding: .35cqw .52cqw;
  border: 1px solid rgba(164, 205, 226, .24);
  border-radius: .28cqw;
  background: rgba(3, 12, 18, .95);
  box-shadow: 0 .35cqw .9cqw rgba(0, 0, 0, .4);
  color: #dceaf1;
  font: 700 clamp(8px, .62cqw, 10px)/1.3 'Exo 2', var(--font-family);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -.25cqw);
  transition: opacity .14s ease, transform .14s ease;
}
#profilePanel .pf-avatar-status.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
#profilePanel .pf-avatar-status[data-state="success"] { color: #8ef0b7; }
#profilePanel .pf-avatar-status[data-state="error"] { color: #ffb0aa; }
#profilePanel .pf-identity {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
#profilePanel .pf-name-row {
  display: flex;
  align-items: center;
  gap: .8cqw;
  min-width: 0;
  padding: 0;
}
#profilePanel .pf-name {
  max-width: 38cqw;
  margin: 0;
  color: var(--pf-paper);
  font: 700 clamp(27px, 2.72cqw, 43px)/.88 'Motion Control', var(--font-display);
  letter-spacing: .055em;
  text-shadow: 0 .16cqw .08cqw #000, 0 0 1cqw rgba(0,0,0,.55);
}
#profilePanel .pf-name-input {
  max-width: 32cqw;
  height: 2.7cqw;
  padding: .35cqw .7cqw;
  border: 1px solid rgba(130,206,255,.46);
  border-radius: .3cqw;
  background: rgba(1,8,13,.55);
  font: 700 clamp(22px, 2.2cqw, 35px)/1 'Motion Control', var(--font-display);
}
#profilePanel .pf-level-badge {
  width: 4.5cqw;
  height: 4.72cqw;
  padding: 1.05cqw 0 0;
  filter: drop-shadow(0 .38cqw .34cqw rgba(0,0,0,.64));
}
#profilePanel .pf-level-number { font-size: clamp(17px, 1.52cqw, 24px); }
#profilePanel .pf-level-badge[data-digits="3"] .pf-level-number { font-size: clamp(15px, 1.33cqw, 21px); }
#profilePanel .pf-level-badge[data-digits="4"] .pf-level-number { font-size: clamp(13px, 1.12cqw, 18px); }
#profilePanel .pf-status-row {
  display: none;
  min-height: 0;
  margin-top: .32cqw;
  gap: .7cqw;
}
#profilePanel.pf-editing .pf-status-row { display: flex; }
#profilePanel .pf-presence {
  padding: 0;
  border: 0;
  background: none;
  font: 750 clamp(9px, .73cqw, 12px)/1 'Exo 2', var(--font-family);
  letter-spacing: .045em;
}
#profilePanel .pf-presence-dot { width: .42cqw; height: .42cqw; }
#profilePanel .pf-vis-tag { display: none !important; }
#profilePanel .pf-vis-btn {
  height: 1.65cqw;
  padding: 0 .62cqw;
  border-color: rgba(218,229,235,.22);
  border-radius: .28cqw;
  background: rgba(2,9,14,.42);
  font: 750 clamp(8px, .66cqw, 11px)/1 'Exo 2', var(--font-family);
}
#profilePanel .pf-bio-wrap {
  max-width: 45cqw;
  margin-top: .24cqw;
}
#profilePanel .pf-bio {
  height: 1.5cqw;
  max-height: 3.1cqw;
  padding: .08cqw 0;
  color: rgba(222, 231, 235, .76);
  font: 520 clamp(10px, .86cqw, 14px)/1.35 'Exo 2', var(--font-family);
}
#profilePanel .pf-bio:not([readonly]) { height: 2.7cqw; padding: .25cqw .45cqw; }
#profilePanel .pf-bio-count { font-size: clamp(8px, .62cqw, 10px); }
#profilePanel .pf-hero-meta {
  gap: .45cqw .85cqw;
  margin-top: .28cqw;
}
#profilePanel .pf-homemtn,
#profilePanel .pf-since {
  font: 750 clamp(8px, .67cqw, 11px)/1 'Exo 2', var(--font-family);
  letter-spacing: .055em;
}
#profilePanel .pf-homemtn-value { color: var(--pf-ice); }
#profilePanel .pf-hero-actions { margin-top: .35cqw; }
#profilePanel .pf-hero-actions-top {
  position: absolute;
  z-index: 10;
  top: .72cqw;
  right: 1.55cqw;
  gap: .42cqw;
}
#profilePanel .pf-edit-btn,
#profilePanel .pf-back-btn {
  min-width: 2.1cqw;
  height: 2.1cqw;
  padding: 0 .68cqw;
  border: 1px solid rgba(205, 216, 222, .2);
  border-radius: .32cqw;
  background: linear-gradient(180deg, rgba(51,60,64,.86), rgba(16,22,25,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 .18cqw .24cqw rgba(0,0,0,.5);
  color: #dce5e8;
  font: 750 clamp(9px, .72cqw, 12px)/1 'Exo 2', var(--font-family);
}
#profilePanel .pf-edit-btn:hover,
#profilePanel .pf-back-btn:hover { border-color: rgba(130,206,255,.52); color: #fff; filter: brightness(1.16); }
#profilePanel .pf-frame-close {
  --close-scale: 1.7;
  top: 3.15cqw;
  right: 3.45cqw;
  z-index: 20;
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
}
#profilePanel .pf-frame-close:hover {
  border: 0;
  background: none;
  color: inherit;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)) brightness(1.3);
}
#profilePanel .pf-hero .pf-back-btn {
  top: .3cqw;
  left: .45cqw;
}

/* Seven stable tab positions occupy the first seven authored button wells.
   Explicit columns prevent hidden social tabs from shifting their neighbours. */
#profilePanel .pf-subtabs {
  position: absolute;
  z-index: 4;
  left: 6.25%;
  right: 6.35%;
  top: 25.75%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  width: auto;
  height: 5.95%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
}
#profilePanel .pf-tab {
  align-self: center;
  justify-self: stretch;
  justify-content: center;
  gap: .42cqw;
  width: 100%;
  height: 3.5cqw;
  padding: .12cqw .45cqw 0;
  border: 0;
  background: none;
  color: rgba(210, 219, 223, .62);
  font: 700 clamp(11px, 1.1cqw, 17px)/1 'Motion Control', var(--font-display);
  letter-spacing: .065em;
  text-transform: uppercase;
  text-shadow: 0 .12cqw .08cqw rgba(0,0,0,.94);
}
#profilePanel .pf-tab:nth-child(1) { grid-column: 1; }
#profilePanel .pf-tab:nth-child(2) { grid-column: 2; }
#profilePanel .pf-tab:nth-child(3) { grid-column: 3; }
#profilePanel .pf-tab:nth-child(4) { grid-column: 4; }
#profilePanel .pf-tab:nth-child(5) { grid-column: 5; }
#profilePanel .pf-tab:nth-child(6) { grid-column: 6; }
#profilePanel .pf-tab:nth-child(7) { grid-column: 7; }
#profilePanel .pf-tab svg {
  width: clamp(12px, 1.12cqw, 18px);
  height: clamp(12px, 1.12cqw, 18px);
  opacity: .62;
}
#profilePanel .pf-tab::before {
  content: '';
  position: absolute;
  inset: .45cqw .55cqw;
  z-index: -1;
  border-radius: .18cqw;
  background: radial-gradient(ellipse at 50% 100%, rgba(112,190,238,.12), transparent 68%);
  opacity: 0;
  transition: opacity .18s ease;
}
#profilePanel .pf-tab::after {
  left: 23%;
  right: 23%;
  bottom: .42cqw;
  height: .12cqw;
  background: #9bd8ff;
  box-shadow: 0 0 .52cqw rgba(107,195,250,.72);
}
#profilePanel .pf-tab:hover,
#profilePanel .pf-tab.active { border: 0; background: none; color: #f2f5f5; }
#profilePanel .pf-tab:hover::before,
#profilePanel .pf-tab.active::before { opacity: 1; }
#profilePanel .pf-tab.active svg { color: var(--pf-ice); opacity: 1; }
#profilePanel .pf-tab-badge {
  position: absolute;
  top: .52cqw;
  right: .65cqw;
  min-width: 1.1cqw;
  height: 1.1cqw;
  padding: 0 .25cqw;
  font-size: clamp(8px, .58cqw, 10px);
}

/* Shared content aperture. The two frame files use the same coordinates. */
#profilePanel .pf-body {
  position: absolute;
  z-index: 2;
  left: 6.78%;
  right: 6.72%;
  top: 33.55%;
  bottom: 3.9%;
  width: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: none;
}
#profilePanel .pf-pane { display: none; width: 100%; min-height: 0; padding: 0; }
#profilePanel .pf-pane.active { display: block; height: 100%; }
#profilePanel .pf-layout-open .pf-pane.active {
  padding: 1.35cqw 1.55cqw 1.45cqw;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#profilePanel .pf-layout-open .pf-section { padding: 0; border: 0; }
#profilePanel .pf-layout-open .pf-section-hdr {
  min-height: 3.25cqw;
  padding: 0 0 .65cqw;
  border-bottom: 1px solid rgba(179,204,218,.12);
}
#profilePanel .pf-section-title {
  color: var(--pf-paper);
  font: 700 clamp(21px, 2.18cqw, 34px)/.9 'Motion Control', var(--font-display);
  letter-spacing: .065em;
  text-transform: uppercase;
  text-shadow: 0 .14cqw .08cqw #000;
}
#profilePanel .pf-section-title::before { display: none; }
#profilePanel .pf-mod-body { padding: .9cqw 0 0; }
#profilePanel .pf-section-action {
  width: 2cqw;
  height: 2cqw;
  border-color: rgba(151,196,222,.2);
  border-radius: .3cqw;
  background: rgba(255,255,255,.035);
}

/* Rider: full-bleed moment on the large left slate, equipped skier on the
   narrow right slate, and the four at-a-glance stats in the bottom rail. */
#profilePanel .pf-layout-split #pfPaneOverview.active {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 13.45%;
  height: 100%;
  overflow: hidden;
}
#profilePanel .pf-overview-lead { min-height: 0; padding: 0; }
#profilePanel .pf-feature {
  position: relative;
  height: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#profilePanel .pf-feature-grid {
  display: grid;
  grid-template-columns: 67.75% 28.15%;
  column-gap: 4.1%;
  width: 100%;
  height: 100%;
  min-height: 0;
}
#profilePanel .pf-feature-frame,
#profilePanel .pf-feature-no-moments .pf-feature-empty-art {
  height: calc(100% - 1.45cqw);
  min-height: 0;
  margin: .72cqw .82cqw;
  overflow: hidden;
  border: 1px solid rgba(170, 204, 223, .2);
  border-radius: .34cqw;
  background: #071018;
  box-shadow: 0 .55cqw 1.1cqw rgba(0,0,0,.24);
}
#profilePanel .pf-feature-frame { isolation: isolate; }
#profilePanel .pf-feature-frame::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 34%, rgba(119,192,232,.11) 48%, transparent 62%) -160% 0 / 62% 100% no-repeat,
    radial-gradient(ellipse at 50% 72%, rgba(55,125,166,.16), transparent 54%),
    #071018;
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}
#profilePanel .pf-feature-frame.is-loading::before {
  opacity: 1;
  animation: pf-feature-priority-load 1.15s ease-in-out infinite;
}
@keyframes pf-feature-priority-load {
  to { background-position: 250% 0, center, center; }
}
#profilePanel .pf-feature-frame > img {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
}
#profilePanel .pf-feature-frame.is-loading > .pf-feature-image { opacity: 0; }
#profilePanel .pf-feature-frame.has-full-image > .pf-feature-image {
  opacity: 1;
  animation: pfFeatureResolve .24s ease-out;
}
#profilePanel .pf-feature-scrim,
#profilePanel .pf-feature-caption { z-index: 2; }
#profilePanel .pf-feature-caption {
  top: 1.05cqw;
  right: auto;
  bottom: auto;
  left: 1.05cqw;
  max-width: calc(100% - 6.2cqw);
  padding: .48cqw .62cqw;
  border: 1px solid rgba(126,206,255,.11);
  border-radius: .3cqw;
  background: linear-gradient(135deg, rgba(31,67,88,.55), rgba(13,33,46,.43));
  box-shadow: 0 .2cqw .55cqw rgba(0,0,0,.2);
  backdrop-filter: blur(.32cqw);
}
#profilePanel .pf-feature-caption strong { font-size: clamp(13px, 1.12cqw, 18px); }
#profilePanel .pf-feature-caption div span { font-size: clamp(9px, .68cqw, 11px); }
#profilePanel .pf-feature-count {
  padding: .32cqw .46cqw;
  border: 0;
  background: rgba(112,190,235,.12);
  color: #d8efff;
  font: 800 clamp(9px, .72cqw, 12px)/1 'Oxanium', 'Exo 2', sans-serif;
  letter-spacing: .015em;
}
#profilePanel .pf-rider-showcase {
  height: calc(100% - 2.1cqw);
  min-height: 0;
  margin: .66cqw .62cqw 1.44cqw .4cqw;
  grid-template-rows: 4.35cqw minmax(0, 1fr) 3.65cqw;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 69%, rgba(92,166,205,.2), transparent 52%),
    linear-gradient(180deg, rgba(8,24,36,.05), rgba(4,14,23,.22));
}
#profilePanel .pf-rider-showcase-head {
  justify-content: flex-start;
  padding: .12cqw .9cqw 0;
  border-bottom: 0;
  color: #f0f6f8;
  font: 700 clamp(29px, 2.58cqw, 41px)/.88 'Motion Control', var(--font-display);
  letter-spacing: .055em;
  text-shadow: 0 .15cqw .1cqw #000, 0 0 .9cqw rgba(81,178,235,.12);
}
#profilePanel .pf-rider-showcase-img {
  bottom: 0;
  width: 26.2cqw;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 1.05cqw .8cqw rgba(0,0,0,.58))
    drop-shadow(0 0 1.15cqw rgba(66,165,225,.13));
}
#profilePanel .pf-rider-showcase-halo {
  top: 52%;
  width: 16.8cqw;
  height: 16.8cqw;
  border-color: rgba(107,187,243,.16);
  box-shadow:
    0 0 0 2.05cqw rgba(84,168,227,.028),
    0 0 3.45cqw rgba(62,153,218,.11) inset;
}
#profilePanel .pf-rider-showcase-ground {
  bottom: .5cqw;
  width: 14.1cqw;
  height: 2.15cqw;
  border-color: rgba(100,188,251,.29);
  box-shadow: 0 0 1.7cqw rgba(61,156,223,.2), inset 0 0 1.1cqw rgba(61,156,223,.1);
}
#profilePanel .pf-rider-showcase-mark {
  right: .82cqw;
  top: 1.05cqw;
}
#profilePanel .pf-rider-equipped { display: none; }
#profilePanel .pf-rider-showcase-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .1cqw .72cqw .25cqw;
  border-top: 0;
  background: linear-gradient(180deg, rgba(3,10,17,.22), rgba(3,10,17,.78));
}
#profilePanel .pf-rider-showcase-foot::before,
#profilePanel .pf-rider-showcase-foot::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,196,247,.32));
}
#profilePanel .pf-rider-showcase-foot::after {
  background: linear-gradient(90deg, rgba(109,196,247,.32), transparent);
}
#profilePanel .pf-rider-showcase-foot strong {
  flex: 0 1 auto;
  max-width: calc(100% - 3cqw);
  margin: 0 .58cqw;
  color: #f2f8fb;
  font: 700 clamp(17px, 1.48cqw, 23px)/.88 'Motion Control', var(--font-display);
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 .12cqw .12cqw #000, 0 0 .75cqw rgba(100,189,245,.16);
}
#profilePanel .pf-feature-footer {
  position: absolute;
  z-index: 5;
  left: .82cqw;
  bottom: .72cqw;
  width: calc(67.75% - 1.64cqw);
  min-height: 2.72cqw;
  padding: .42cqw .55cqw;
  border: 0;
  border-top: 1px solid rgba(213,229,237,.14);
  border-radius: 0 0 .28cqw .28cqw;
  background: linear-gradient(180deg, rgba(2,8,13,.28), rgba(2,8,13,.88));
  pointer-events: none;
}
#profilePanel .pf-feature-footer > * { pointer-events: auto; }
#profilePanel .pf-feature-dots { gap: .38cqw; }
#profilePanel .pf-feature-dots button { width: 2.85cqw; height: 1.78cqw; border-radius: .18cqw; }
#profilePanel .pf-feature-footer-label { display: none; }
#profilePanel .pf-feature-curate {
  height: 1.78cqw;
  padding: 0 .65cqw;
  border-radius: .24cqw;
  background: rgba(3,10,15,.68);
  font-size: clamp(8px, .62cqw, 10px);
}
#profilePanel .pf-feature-no-moments .pf-feature-empty-copy h2 {
  margin: 0 0 .35cqw;
  font-size: clamp(24px, 2.25cqw, 36px);
}
#profilePanel .pf-feature-no-moments .pf-feature-empty-copy p { font-size: clamp(10px, .78cqw, 13px); }
#profilePanel .pf-stats-bar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: .35cqw .5cqw .28cqw;
  border: 0;
  background: none;
}
#profilePanel .pf-stat-item,
#profilePanel .pf-stat-featured {
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 .6cqw;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#profilePanel .pf-stats-bar .pf-stat-item:nth-child(1) { grid-column: 1; }
#profilePanel .pf-stats-bar .pf-stat-item:nth-child(2) { grid-column: 3; }
#profilePanel .pf-stats-bar .pf-stat-item:nth-child(3) { grid-column: 5; }
#profilePanel .pf-stats-bar .pf-stat-item:nth-child(4) { grid-column: 7; }
#profilePanel .pf-stat-item + .pf-stat-item { border-left: 0; }
#profilePanel .pf-stat-num,
#profilePanel .pf-stat-featured .pf-stat-num {
  color: #edf1f1;
  font: 800 clamp(15px, 1.38cqw, 22px)/1 'Oxanium', 'Exo 2', sans-serif;
  text-shadow: 0 .12cqw .08cqw #000;
}
#profilePanel .pf-stat-featured .pf-stat-num { color: #aadeff; }
#profilePanel .pf-stat-lbl,
#profilePanel .pf-stat-featured .pf-stat-lbl {
  color: rgba(199,210,215,.6);
  font: 750 clamp(8px, .62cqw, 10px)/1 'Exo 2', var(--font-family);
  letter-spacing: .08em;
}

/* Progression: authored left/right split plus bottom record strip. */
#profilePanel .pf-layout-split #pfPaneStats.active {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 13.45%;
  height: 100%;
  overflow: hidden;
}
#profilePanel .pf-progression-main {
  display: grid;
  grid-template-columns: 67.75% 28.15%;
  column-gap: 4.1%;
  min-height: 0;
}
#profilePanel .pf-progression-primary,
#profilePanel .pf-progression-side {
  min-width: 0;
  min-height: 0;
  padding: .9cqw 1.05cqw .6cqw;
  overflow: hidden;
}
#profilePanel .pf-progression-side { padding-left: .72cqw; padding-right: .72cqw; }
#profilePanel .pf-progression-primary .pf-section,
#profilePanel .pf-progression-side .pf-section,
#profilePanel .pf-progression-record .pf-section { padding: 0; border: 0; }
#profilePanel .pf-progression-primary > .pf-section,
#profilePanel .pf-progression-side > .pf-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
#profilePanel .pf-progression-primary .pf-section-hdr,
#profilePanel .pf-progression-side .pf-section-hdr {
  min-height: 2.5cqw;
  padding: 0 0 .55cqw;
  border-bottom: 1px solid rgba(177,202,215,.12);
}
#profilePanel .pf-progression-primary .pf-section-title,
#profilePanel .pf-progression-side .pf-section-title {
  font-size: clamp(18px, 1.72cqw, 27px);
}
#profilePanel .pf-progression-primary .pf-mod-body,
#profilePanel .pf-progression-side .pf-mod-body { min-height: 0; padding: .7cqw 0 0; overflow: hidden; }
#profilePanel .pf-prog-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .55cqw;
  height: 100%;
  min-height: 0;
}
#profilePanel .pf-prog-progress { margin: 0; }
#profilePanel .pf-prog-top { gap: .8cqw; min-height: 0; height: 100%; overflow: hidden; }
#profilePanel .pf-prog-tree-box,
#profilePanel .pf-radar-wrap { min-height: 0; height: 100%; padding: .72cqw; }
#profilePanel .pf-prog-tree-box .prog-mini-tree,
#profilePanel .pf-radar-svg { max-width: 100%; max-height: 100%; }
#profilePanel .pf-achv-count { margin-bottom: .5cqw; }
#profilePanel .pf-achv-section {
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: .55cqw;
  overflow: hidden;
  transform: none;
}
#profilePanel .pf-achv-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42cqw;
  width: 100%;
  min-width: 0;
}
#profilePanel .pf-achv-card { width: 100%; min-width: 0; min-height: 5.4cqw; padding: .55cqw; }
#profilePanel .pf-achv-icon { width: 2.2cqw; height: 2.2cqw; font-size: 1.3cqw; }
#profilePanel .pf-achv-name { font-size: clamp(8px, .63cqw, 10px); }
#profilePanel .pf-achv-tier { font-size: clamp(7px, .5cqw, 8px); }
#profilePanel .pf-progression-record { min-height: 0; padding: .28cqw .55cqw; overflow: hidden; }
#profilePanel .pf-progression-record .pf-section,
#profilePanel .pf-progression-record .pf-mod-body,
#profilePanel .pf-progression-record .pf-trick-stats { height: 100%; padding: 0; }
#profilePanel .pf-progression-record .pf-section-hdr { display: none; }
#profilePanel .pf-progression-record .pf-trick-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
}
#profilePanel .pf-progression-record .pf-trick-card {
  display: grid;
  grid-template-rows: 1.5cqw 1.25cqw 1cqw;
  place-items: center;
  gap: .06cqw;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: .2cqw .45cqw;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#profilePanel .pf-progression-record .pf-trick-card:nth-child(1) { grid-column: 1; }
#profilePanel .pf-progression-record .pf-trick-card:nth-child(2) { grid-column: 2; }
#profilePanel .pf-progression-record .pf-trick-card:nth-child(3) { grid-column: 3; }
#profilePanel .pf-progression-record .pf-trick-card:nth-child(4) { grid-column: 5; }
#profilePanel .pf-progression-record .pf-trick-card:nth-child(5) { grid-column: 6; }
#profilePanel .pf-progression-record .pf-trick-card:nth-child(6) { grid-column: 7; }
#profilePanel .pf-progression-record .pf-trick-card + .pf-trick-card { border-left: 0; }
#profilePanel .pf-progression-record .pf-trick-card::before { display: none; }
#profilePanel .pf-progression-record .pf-trick-icon { width: 1.6cqw; height: 1.6cqw; }
#profilePanel .pf-progression-record .pf-trick-icon svg { width: 100%; height: 100%; }
#profilePanel .pf-progression-record .pf-trick-val {
  width: 100%;
  overflow: hidden;
  font-size: clamp(12px, 1.02cqw, 16px);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#profilePanel .pf-progression-record .pf-trick-card:nth-child(4) .pf-trick-val { font-size: clamp(9px, .76cqw, 12px); }
#profilePanel .pf-progression-record .pf-trick-lbl {
  font: 700 clamp(9px, .72cqw, 11px)/1 'Exo 2', var(--font-family);
  letter-spacing: .035em;
  white-space: nowrap;
}

/* Open-board tabs: larger editorial cards with fewer, clearer columns. */
#profilePanel .pf-resort-grid,
#profilePanel .pf-gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1cqw;
  padding: 0;
}
#profilePanel .pf-resort-card,
#profilePanel .pf-gallery-card,
#profilePanel .pf-player-card,
#profilePanel .pf-fr-row,
#profilePanel .pf-fr-invite-context {
  border: 1px solid rgba(158,197,219,.15);
  border-radius: .42cqw;
  background: linear-gradient(155deg, rgba(20,36,48,.72), rgba(5,13,20,.62));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 .42cqw .8cqw rgba(0,0,0,.14);
}
#profilePanel .pf-resort-card:hover,
#profilePanel .pf-gallery-card:hover,
#profilePanel .pf-player-card:hover { transform: translateY(-.16cqw); border-color: rgba(130,206,255,.38); }
#profilePanel .pf-resort-thumb,
#profilePanel .pf-gallery-thumb { height: 9cqw; min-height: 110px; }
#profilePanel .pf-resort-info,
#profilePanel .pf-gallery-info { padding: .72cqw .78cqw .8cqw; }
#profilePanel .pf-resort-name,
#profilePanel .pf-gallery-name { font-size: clamp(12px, 1cqw, 16px); }
#profilePanel .pf-resort-meta,
#profilePanel .pf-gallery-meta { font-size: clamp(9px, .67cqw, 11px); }
#profilePanel .pf-layout-open .pf-pane.active {
  scrollbar-width: thin;
  scrollbar-color: rgba(119,178,211,.48) transparent;
}
#profilePanel .pf-layout-open .pf-pane.active::-webkit-scrollbar { width: .58cqw; }
#profilePanel .pf-layout-open .pf-pane.active::-webkit-scrollbar-track { background: transparent; }
#profilePanel .pf-layout-open .pf-pane.active::-webkit-scrollbar-thumb {
  min-height: 3.4cqw;
  border: .16cqw solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(142,202,235,.58), rgba(78,127,155,.42)) padding-box;
}
#profilePanel .pf-layout-open .pf-pane.active::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(158,216,247,.76), rgba(88,145,177,.62)) padding-box;
}
#profilePanel .pf-moment-groups { gap: .9cqw; }
#profilePanel .pf-moment-group + .pf-moment-group {
  padding-top: .9cqw;
  border-top-color: rgba(158,197,219,.1);
}
#profilePanel .pf-moment-group-header h3 {
  color: #dfe7e9;
  font: 700 clamp(15px, 1.35cqw, 21px)/1 'Motion Control', var(--font-display);
  letter-spacing: .055em;
  text-transform: uppercase;
}
#profilePanel .pf-moment-group-header span { font-size: clamp(8px, .64cqw, 10px); }
#profilePanel .pf-ss-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .62cqw; }
#profilePanel .pf-moment-group-screenshot .pf-ss-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#profilePanel .pf-ss-item { border-radius: .3cqw; border-color: rgba(158,197,219,.14); }
#profilePanel .pf-moment-group-screenshot .pf-ss-item:hover { transform: translateY(-.1cqw); }
#profilePanel .pf-moment-group-polaroid .pf-ss-grid { align-items: start; }
#profilePanel .pf-moment-group-polaroid .pf-ss-item {
  aspect-ratio: auto;
  border: 0;
  border-radius: .22cqw;
  background: transparent;
}
#profilePanel .pf-moment-group-polaroid .pf-ss-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
}
#profilePanel .pf-ss-more { min-height: 5cqw; font-size: clamp(10px, .78cqw, 13px); }

#profilePanel #pfPaneFriends { padding: 1.35cqw 1.55cqw 1.45cqw; }
#profilePanel .pf-fr-section { margin-bottom: 1.05cqw; }
#profilePanel .pf-fr-hdr { padding: .25cqw .35cqw .62cqw; }
#profilePanel .pf-fr-hdr span:first-child {
  font: 700 clamp(15px, 1.35cqw, 21px)/1 'Motion Control', var(--font-display);
  letter-spacing: .055em;
  text-transform: uppercase;
}
#profilePanel .pf-fr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6cqw; }
#profilePanel .pf-fr-row { min-height: 4.55cqw; padding: .55cqw .65cqw; }
#profilePanel .pf-fr-avatar { width: 2.8cqw; height: 2.8cqw; }
#profilePanel .pf-fr-name { font-size: clamp(11px, .9cqw, 14px); }
#profilePanel .pf-fr-sub { font-size: clamp(8px, .62cqw, 10px); }
#profilePanel .pf-fr-act { height: 2cqw; min-width: 2cqw; font-size: clamp(8px, .62cqw, 10px); }
#profilePanel .pf-fr-find-cta { height: 2.4cqw; font-size: clamp(9px, .72cqw, 12px); }

#profilePanel .pf-heatmap-wrap { padding: .7cqw; }
#profilePanel .pf-heatmap-stats { gap: 1.2cqw; padding: .7cqw 0 1cqw; }
#profilePanel .pf-heatmap-stat strong { font-size: clamp(22px, 2cqw, 32px); }
#profilePanel .pf-heatmap-svg { min-height: 20cqw; overflow: visible; }
#profilePanel .pf-season-since {
  display: flex;
  align-items: center;
  gap: .55cqw;
  width: fit-content;
  margin: .4cqw auto 0;
  padding: .62cqw .82cqw;
  border-top: 1px solid rgba(158,197,219,.16);
  color: rgba(184,203,214,.62);
  font: 650 clamp(10px, .78cqw, 13px)/1 'Exo 2', var(--font-family);
  letter-spacing: .035em;
}
#profilePanel .pf-season-since svg { width: 1.05cqw; height: 1.05cqw; color: #82ceff; }
#profilePanel .pf-season-since strong { color: #e5edf0; font-weight: 750; }
#profilePanel .pf-heatmap-empty { display: grid; align-content: center; min-height: 26cqw; }

#profilePanel .pf-discover-toggle {
  width: fit-content;
  margin: 0 0 1cqw;
  padding: .25cqw;
  border: 1px solid rgba(158,197,219,.16);
  border-radius: .42cqw;
  background: rgba(2,8,13,.34);
}
#profilePanel .pf-disc-seg {
  height: 2.4cqw;
  padding: 0 1.1cqw;
  border-radius: .28cqw;
  font: 700 clamp(10px, .82cqw, 13px)/1 'Exo 2', var(--font-family);
}
#profilePanel .pf-player-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7cqw; }
#profilePanel .pf-player-card { min-height: 5.1cqw; padding: .65cqw .75cqw; }
#profilePanel .pf-player-avatar-wrap,
#profilePanel .pf-player-avatar,
#profilePanel .pf-player-avatar-fb { width: 3.25cqw; height: 3.25cqw; }
#profilePanel .pf-player-name { font-size: clamp(12px, .95cqw, 15px); }
#profilePanel .pf-player-bio { font-size: clamp(9px, .67cqw, 11px); }
#profilePanel .pf-player-view { height: 2.15cqw; font-size: clamp(8px, .62cqw, 10px); }
#profilePanel .pf-empty { min-height: 12cqw; padding: 2cqw; }
#profilePanel .pf-empty-title {
  font: 700 clamp(20px, 1.9cqw, 30px)/1 'Motion Control', var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}
#profilePanel .pf-empty-sub { margin-top: .45cqw; font-size: clamp(10px, .78cqw, 13px); }

/* Compact landscape sizes retain the exact frame geometry. */
@media (max-width: 900px), (max-height: 620px) {
  #profilePanel .pf-app { width: min(98vw, calc(97dvh * var(--pf-board-ratio))); }
  #profilePanel .pf-tab-label { display: inline; }
  #profilePanel .pf-rider-card { padding-right: 20cqw; }
  #profilePanel .pf-feature-frame,
  #profilePanel .pf-feature-no-moments .pf-feature-empty-art { margin: .55cqw .65cqw; height: calc(100% - 1.1cqw); }
  #profilePanel .pf-rider-showcase { margin-top: .55cqw; margin-bottom: .55cqw; height: calc(100% - 1.1cqw); }
}

/* Portrait is a functional continuation below an undistorted frame header.
   The game is landscape-first, but profile editing and social actions remain
   comfortably usable on a phone instead of shrinking to an unreadable board. */
@media (max-width: 700px) and (orientation: portrait) {
  #profilePanel { align-items: flex-start; overflow-y: auto; background: #071019; }
  #profilePanel .pf-app {
    width: 100vw;
    height: max(100dvh, 760px);
    aspect-ratio: auto;
    overflow: hidden;
    background-color: #0a151e;
    background-size: 100% auto;
    background-position: center top;
    filter: none;
  }
  #profilePanel .pf-hero { top: 5.8vw; left: 7vw; right: 7vw; height: 16.8vw; }
  #profilePanel .pf-rider-card { gap: 2.4vw; padding: 0 24vw 0 4vw; }
  #profilePanel .pf-avatar-wrap,
  #profilePanel .pf-avatar,
  #profilePanel .pf-avatar-fb { width: 11vw; height: 11vw; }
  #profilePanel .pf-name { max-width: 44vw; font-size: clamp(18px, 6vw, 28px); }
  #profilePanel .pf-level-badge { width: 8vw; height: 8.4vw; padding-top: 1.8vw; }
  #profilePanel .pf-status-row,
  #profilePanel .pf-bio-wrap,
  #profilePanel .pf-hero-meta { display: none !important; }
  #profilePanel .pf-hero-actions-top { top: 6.4vw; right: 6.8vw; gap: 1vw; }
  #profilePanel .pf-edit-btn,
  #profilePanel .pf-edit-btn { min-width: 7vw; width: auto; height: 7vw; padding: 0 1.8vw; }
  #profilePanel .pf-frame-close { top: 3.15vw; right: 3.45vw; width: 36px; min-width: 36px; height: 36px; padding: 0; }
  #profilePanel .pf-subtabs { top: 25.7vw; left: 6.3vw; right: 6.3vw; height: 6.2vw; overflow-x: auto; }
  #profilePanel .pf-tab { height: 5vw; gap: 0; padding: 0; font-size: clamp(7px, 2.2vw, 10px); }
  #profilePanel .pf-tab svg { display: none; }
  #profilePanel .pf-body { top: 33vw; left: 4vw; right: 4vw; bottom: 3vw; overflow-y: auto; }
  #profilePanel .pf-layout-split #pfPaneOverview.active,
  #profilePanel .pf-layout-split #pfPaneStats.active { display: block; height: auto; overflow: visible; }
  #profilePanel .pf-feature-grid,
  #profilePanel .pf-progression-main { grid-template-columns: 1fr; height: auto; }
  #profilePanel .pf-feature-frame { height: 48vw; }
  #profilePanel .pf-rider-showcase {
    height: 70vw;
    margin: 3vw 0;
    grid-template-rows: 9vw minmax(0, 1fr) 10vw;
  }
  #profilePanel .pf-rider-showcase-img { bottom: 0; width: min(56vw, 325px); }
  #profilePanel .pf-feature-footer { bottom: calc(70vw + 5vw); width: calc(100% - 4vw); }
  #profilePanel .pf-stats-bar { height: 18vw; margin-bottom: 4vw; }
  #profilePanel .pf-progression-primary,
  #profilePanel .pf-progression-side { overflow: visible; padding: 3vw; }
  #profilePanel .pf-achv-section { transform: none; }
  #profilePanel .pf-progression-record { height: 22vw; }
  #profilePanel .pf-layout-open .pf-pane.active,
  #profilePanel #pfPaneFriends { padding: 4vw; }
  #profilePanel .pf-section-title { font-size: 25px; }
  #profilePanel .pf-resort-grid,
  #profilePanel .pf-gallery-grid,
  #profilePanel .pf-ss-grid,
  #profilePanel .pf-fr-list,
  #profilePanel .pf-player-list { grid-template-columns: 1fr; }
  #profilePanel .pf-resort-thumb,
  #profilePanel .pf-gallery-thumb { height: 40vw; }
}