.achievement-badge {
  --achievement-category-light: #BFE2FF;
  --achievement-category-color: #3D87DB;
  --achievement-category-deep: #1D5FA7;
  --achievement-frame-size: 40px;
  --achievement-frame-art-size: 20px;
  --achievement-frame-stroke-from: #8fcbff;
  --achievement-frame-stroke-to: #316faf;
  --achievement-frame-fill: rgba(255, 255, 255, .2);

  position: relative;
  display: inline-block;
  inline-size: var(--achievement-frame-size);
  block-size: var(--achievement-frame-size);
  flex: 0 0 var(--achievement-frame-size);
  overflow: visible;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: none;
  color: var(--achievement-category-color);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.achievement-badge[data-achievement-category="lifetime"] {
  --achievement-category-light: #BFE2FF;
  --achievement-category-color: #3D87DB;
  --achievement-category-deep: #1D5FA7;
  --achievement-frame-stroke-from: #BFE2FF;
  --achievement-frame-stroke-to: #1D5FA7;
}

.achievement-badge[data-achievement-category="best_time"] {
  --achievement-category-light: #FFE2A8;
  --achievement-category-color: #F59E0B;
  --achievement-category-deep: #B76008;
  --achievement-frame-stroke-from: #ffcc00;
  --achievement-frame-stroke-to: #00636a;
}

.achievement-badge[data-achievement-category="competition"] {
  --achievement-category-color: #C58B24;
  --achievement-frame-fill:
    radial-gradient(
      circle at 50% 38%,
      rgba(27, 32, 41, .78) 0%,
      rgba(13, 17, 23, .72) 72%
    );
  --achievement-frame-stroke-from: var(--elite-gold-hi);
  --achievement-frame-stroke-to: var(--elite-gold-deep);
}

html.achievement-competition-root {
  --competition-rays-background: #05070e;
  --competition-rays-fallback-purple: rgba(188, 0, 253, 0.14);
  --competition-rays-fallback-gold: rgba(255, 201, 1, 0.12);
  --competition-rays-color-1: #ffc901;
  --competition-rays-color-2: #bc00fd;
  /* Frame cadence follows requestAnimationFrame and the display refresh rate. */
  --competition-rays-speed: 0.7;
  --competition-rays-secondary-speed-multiplier: 0.2;
  --competition-rays-intensity: 0.5;
  --competition-rays-spread: 1.7;
  --competition-rays-tilt: -15;
  --competition-rays-saturation: 0.9;
  --competition-rays-blend: 0.45;
  --competition-rays-falloff: 3.7;
  --competition-rays-shader-opacity: 1;
  --competition-rays-layer-opacity: 0.55;
  --competition-rays-mask-middle: rgba(5, 7, 14, 0.30);
  --competition-rays-mask-edge: rgba(5, 7, 14, 0.85);
}

.competition-rays {
  position: fixed;
  inset: 0;
  z-index: 0;
  inline-size: 100vw;
  block-size: 100%;
  pointer-events: none;
  overflow: clip;
  contain: strict;
}

.competition-rays__viewport,
.competition-rays__mask,
.competition-rays__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.competition-rays__viewport {
  opacity: var(--competition-rays-layer-opacity);
}

.competition-rays__canvas {
  display: block;
}

.competition-rays__mask {
  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      var(--competition-rays-mask-middle) 55%,
      var(--competition-rays-mask-edge) 100%
    );
}

body.achievement-competition-screen >
  :is(.flashes, .analytics-banner, .container, .site-footer) {
  position: relative;
  z-index: 1;
}

body.achievement-competition-screen > .topbar {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .competition-rays__viewport {
    display: none;
  }
}

.achievement-badge[data-achievement-category="monthly"] {
  --achievement-category-light: #FFC1DF;
  --achievement-category-color: #DB2777;
  --achievement-category-deep: #96205D;
  --achievement-frame-stroke-from: #FFC1DF;
  --achievement-frame-stroke-to: #96205D;
}

.achievement-badge[data-achievement-category="consistency"] {
  --achievement-category-light: #B8EFCA;
  --achievement-category-color: #16A34A;
  --achievement-category-deep: #087333;
  --achievement-frame-stroke-from: #B8EFCA;
  --achievement-frame-stroke-to: #087333;
}

.achievement-badge[data-achievement-state="upcoming"] {
  opacity: 0.62;
}

.achievement-badge-illustration,
.liquid-swim-medal__icon {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: var(--achievement-frame-art-size);
  block-size: var(--achievement-frame-art-size);
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.achievement-glass-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.achievement-glass-frame__lens {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  -webkit-backdrop-filter: var(--water-icon-frame-backdrop);
  backdrop-filter: var(--water-icon-frame-backdrop);
}

.achievement-glass-frame__fill {
  position: absolute;
  inset: 0;
  background: var(--achievement-frame-fill);
}

.achievement-glass-frame__shadow {
  position: absolute;
  z-index: 0;
  inset-inline-start: 25%;
  inset-block-start: 68.75%;
  inline-size: 50%;
  block-size: 15.625%;
  border-radius: 50%;
  background: rgba(203, 203, 203, .5);
  filter: blur(4px);
}

.achievement-glass-frame__stroke {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  padding: 2px;
  opacity: .2;
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.achievement-glass-frame__stroke--color {
  background: linear-gradient(
    315deg,
    var(--achievement-frame-stroke-from),
    var(--achievement-frame-stroke-to)
  );
}

.achievement-glass-frame__stroke--shade {
  background: linear-gradient(315deg, #000, #666);
}

.achievement-glass-frame__stroke--light {
  background: conic-gradient(
    from 315deg,
    transparent,
    #999,
    #fff,
    transparent
  );
}

.achievement-glass-frame__glare {
  position: absolute;
  z-index: 3;
  inset-inline-start: 21.875%;
  inset-block-start: 9.375%;
  inline-size: 29.6875%;
  block-size: 20.3125%;
  border-radius: 50%;
  background: rgba(232, 232, 232, .5);
  filter: blur(4px);
  opacity: .8;
}

.achievement-badge-illustration--under {
  z-index: 0;
  filter: blur(3px);
}

.achievement-badge-illustration--over {
  z-index: 2;
  filter: none;
}

.achievement-record-event-illustration {
  display: block;
  inline-size: 60%;
  block-size: 60%;
  object-fit: contain;
}

.achievement-record-card-with-footer {
  flex-direction: column;
}

.achievement-competition-detail > .achievement-record-card-footer .achievement-record-share-url {
  border-top-color: rgba(232, 198, 107, 0.42);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.competition-detail-medallion {
  --competition-medallion-art-size: 32px;
  position: relative;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.competition-detail-medallion__art {
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: var(--competition-medallion-art-size);
  block-size: var(--competition-medallion-art-size);
  transform: translate(-50%, -50%);
}

.competition-detail-medallion__art--under {
  z-index: 0;
  filter: blur(3px);
}

.competition-detail-medallion__lens {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 3px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(27, 32, 41, 0.78) 0%,
      rgba(16, 21, 29, 0.74) 47%,
      rgba(9, 12, 17, 0.70) 72%
    ) padding-box,
    conic-gradient(
      from 210deg,
      #8a5e1c,
      #fff6d5 25%,
      #c99a3a 50%,
      #e8c66b 70%,
      #8a5e1c 88%,
      #fff6d5
    ) border-box;
  box-shadow:
    inset 0 0 18px -5px rgba(232,198,107,.15),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(0, 0, 0, .38),
    0 16px 26px -18px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: var(--water-icon-frame-backdrop);
  backdrop-filter: var(--water-icon-frame-backdrop);
}

.competition-detail-medallion__art--over {
  z-index: 2;
  filter: none;
}

.achievement-see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--water-space-1, 4px);
}

.medal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--water-space-2, 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.medal-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 0;
  align-items: center;
  gap: var(--water-space-2, 8px);
  padding: var(--water-space-2, 8px);
  border: 1px solid var(--water-color-border, #d8e2ec);
  border-radius: var(--water-radius-card, 16px);
  background:
    radial-gradient(circle at 30% 22%,
      rgba(255, 255, 255, 0.72),
      transparent 28%),
    linear-gradient(135deg,
      rgba(48, 190, 226, 0.24),
      rgba(78, 116, 205, 0.14));
  background-color: var(--water-color-surface, #fff);
  aspect-ratio: 9 / 10;
  text-align: center;
}

.medal-card-icon {
  display: inline-grid;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 40px;
  place-items: center;
  margin: 0;
  padding: 0;
}

.medal-card-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.medal-card-competition .medal-card-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.medal-card-copy {
  display: flex;
  inline-size: 100%;
  min-block-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  gap: 0;
}

.medal-card-title {
  display: block;
  min-block-size: 0;
  color: var(--water-color-text, #17324d);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  margin-block: auto;
  overflow-wrap: anywhere;
}

.medal-card-best-time-overview .medal-card-title {
  display: grid;
  inline-size: 100%;
  gap: var(--water-space-1, 4px);
}

.medal-card-best-time-overview .medal-card-style,
.medal-card-best-time-overview .medal-card-distance {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medal-card-earned {
  color: var(--water-color-muted, #60758b);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.medal-card-competition {
  --medal-accent: #e8c66b;
  --medal-soft: #181026;
  --medal-frame: rgba(232, 198, 107, 0.48);

  border-color: var(--medal-frame);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 246, 213, 0.10), transparent 45%),
    linear-gradient(180deg, #181026, #0c0f15);
  background-color: #0c0f15;
  color: #e8c66b;
  box-shadow:
    inset 0 0 0 1px rgba(232, 198, 107, 0.28),
    0 10px 26px -18px rgba(0, 0, 0, 0.86),
    0 0 46px -30px rgba(232, 198, 107, 0.72);
}

.medal-card-competition .medal-card-title {
  color: #e8c66b;
}

.medal-card-competition .medal-card-earned {
  color: #fff6d5;
}

.achievement-goal {
  grid-template-columns: 40px minmax(0, 150px) minmax(120px, 1fr) minmax(0, 150px);
  gap: var(--water-space-3, 12px);
}

.achievement-goal .achievement-badge {
  grid-row: 1 / span 2;
}

.achievement-medal-detail-avatar .achievement-badge {
  margin-inline: auto;
}

@media (max-width: 760px) {
  .achievement-goal {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .achievement-goal-meter,
  .achievement-goal-progress {
    grid-column: 2;
  }
}

@media (min-width: 768px) {
  .medal-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .medal-card-icon {
    inline-size: 56px;
    block-size: 56px;
    flex: 0 0 56px;
  }
}

.achievement-record-icon {
  position: relative;
  inline-size: 80px;
  block-size: 80px;
  border-radius: 999px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.medal-card-icon-glass,
.medal-card .achievement-badge,
.achievement-record-icon.achievement-badge,
.achievement-badge.liquid-swim-medal {
  --achievement-frame-size: 64px;
  --achievement-frame-art-size: 32px;
}

.achievement-hero {
  --achievement-hero-medal-size: 128px;
  --achievement-hero-art-size: 64px;

  inline-size: 100%;
  min-block-size: 212px;
  aspect-ratio: auto;
  gap: 12px;
  padding-block: 20px;
  padding-inline: var(--water-space-4, 16px);
  text-decoration: none;
}

.medal-card.achievement-hero .achievement-badge {
  --achievement-frame-size: var(--achievement-hero-medal-size);
  --achievement-frame-art-size: var(--achievement-hero-art-size);
}

.achievement-hero .medal-card-icon-glass {
  inline-size: var(--achievement-hero-medal-size);
  block-size: var(--achievement-hero-medal-size);
  flex-basis: var(--achievement-hero-medal-size);
}

.achievement-hero-copy {
  flex: 0 0 auto;
  gap: var(--water-space-1, 4px);
}

.achievement-hero-title {
  min-block-size: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.medal-card-icon-glass {
  inline-size: 64px;
  block-size: 64px;
  flex: 0 0 64px;
}

.achievement-record-icon.achievement-badge {
  inline-size: var(--achievement-frame-size);
  block-size: var(--achievement-frame-size);
  flex: 0 0 var(--achievement-frame-size);
}

.achievement-medal-detail-card:not(.achievement-medal-detail-card-competition)
  .achievement-record-icon.achievement-badge {
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.achievement-record-icon__art {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  inline-size: var(--achievement-frame-art-size);
  block-size: var(--achievement-frame-art-size);
  transform: translate(-50%, -50%);
}

.achievement-record-icon__art--under {
  filter: blur(3px);
}

.achievement-record-icon__art--over {
  z-index: 2;
  filter: none;
}

.achievement-record-icon > .achievement-record-event-illustration {
  inline-size: 64px;
  block-size: 64px;
}

.achievement-record-icon.achievement-record-on-wave-icon {
  --achievement-frame-size: 64px;
  --achievement-frame-art-size: 32px;
  --achievement-frame-fill: rgba(255, 255, 255, .2);
  --achievement-frame-stroke-from: #FFC1DF;
  --achievement-frame-stroke-to: #96205D;
  inline-size: var(--achievement-frame-size);
  block-size: var(--achievement-frame-size);
  border: 0;
  background: none;
  box-shadow: none;
  font-size: var(--achievement-frame-art-size);
  line-height: var(--achievement-frame-art-size);
}

@media (max-width: 390px) {
  .achievement-record-icon {
    inline-size: 80px;
    block-size: 80px;
  }
}
[data-water] .achievement-record-card > .achievement-share-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-block-start: var(--achievement-share-gap, 12px);
}

[data-water] .achievement-record-card > .achievement-share-actions
  .achievement-share-open {
  min-inline-size: var(--water-tap-min);
  min-block-size: var(--water-tap-min);
}

[data-water] .achievement-detail > .achievement-share {
  --achievement-carousel-controls-block: 0px;
  --achievement-detail-reserve:
    calc(
      var(--water-safe-top) + var(--water-space-2) +
      var(--water-topbar-block-size) + var(--water-space-4) +
      var(--water-space-3) + var(--water-space-4) +
      var(--water-space-6) + var(--water-safe-bottom) +
      var(--achievement-carousel-controls-block)
    );
  --achievement-outer-padding: clamp(14px, 6cqw, 26px);
  --achievement-panel-padding: clamp(16px, 5.5cqw, 22px);
  --achievement-icon-size: clamp(64px, 22cqw, 86px);
  --achievement-art-size: clamp(51.2px, 17.6cqw, 68.8px);
  --achievement-title-size: clamp(18px, 6.2cqw, 24px);
  --achievement-time-size: clamp(42px, 16cqw, 64px);
  --achievement-pin-size: clamp(116px, 42cqw, 164px);
  --achievement-divider-gap: clamp(10px, 4cqw, 18px);
  --achievement-earned-size: clamp(11px, 3.5cqw, 14px);
  --achievement-share-gap: clamp(8px, 3cqw, 12px);
  inline-size:
    min(
      100%,
      420px,
      calc((100svh - var(--achievement-detail-reserve)) * 0.5625)
    );
  margin: var(--water-space-3) auto var(--water-space-4);
  container-type: inline-size;
}

[data-water] .achievement-detail > .achievement-share:has(.record-carousel) {
  --achievement-carousel-controls-block: 60px;
}

[data-water] .achievement-share >
  :is(.achievement-record-card, .record-carousel),
[data-water] .achievement-share .record-carousel >
  .achievement-record-card,
[data-water] .achievement-share .record-carousel-track {
  inline-size: 100%;
}

[data-water] .achievement-share .record-carousel-track >
  .record-carousel-page {
  inline-size: 100%;
  flex: 0 0 100%;
}

[data-water] .achievement-share .record-carousel-dots,
[data-water] .achievement-share .record-carousel-hint {
  margin-block: 0;
}

[data-water] .achievement-share .achievement-record-card {
  margin-block: 0;
  padding: var(--achievement-outer-padding);
}

[data-water] .achievement-share .achievement-record-panel {
  max-inline-size: 100%;
  padding: var(--achievement-panel-padding);
  transform-origin: center;
  transition: transform var(--water-duration-hover) var(--water-ease-hover);
}

@media (hover: hover) and (pointer: fine) {
  [data-water] .achievement-share .achievement-record-panel:hover {
    transform: scale3d(
      var(--water-scale-hover),
      var(--water-scale-hover),
      1
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-water] .achievement-share .achievement-record-panel:hover {
    transform: none;
  }
}

[data-water] .achievement-share .achievement-record-card-pin {
  --record-pin-width: var(--achievement-pin-size);
  --record-earned-font-size: var(--achievement-earned-size);
}

[data-water] .achievement-share .achievement-record-avatar {
  inline-size: calc(var(--achievement-icon-size) * 1.55);
  block-size: calc(var(--achievement-icon-size) * 1.3);
}

[data-water] .achievement-share .achievement-record-icon {
  inline-size: var(--achievement-frame-size);
  block-size: var(--achievement-frame-size);
}

[data-water] .achievement-share .achievement-record-icon >
  .achievement-record-event-illustration {
  inline-size: var(--achievement-art-size);
  block-size: var(--achievement-art-size);
}

[data-water] .achievement-share .achievement-record-on-wave-icon {
  font-size: var(--achievement-frame-art-size);
  line-height: var(--achievement-frame-art-size);
}

[data-water] .achievement-share .achievement-record-title {
  font-size: var(--achievement-title-size);
}

[data-water] .achievement-share .achievement-record-time {
  font-size: var(--achievement-time-size);
}

[data-water] .achievement-share .achievement-record-divider {
  margin-block-start: var(--achievement-divider-gap);
}

[data-water] .achievement-share .achievement-record-earned {
  font-size: var(--achievement-earned-size);
}

[data-water] .achievement-share .achievement-competition-detail {
  --competition-outer-padding: clamp(12px, 5cqw, 30px);
  --competition-panel-padding: clamp(14px, 5cqw, 26px);
  --competition-panel-block-size:
    clamp(345px, calc(129cqw - 54px), 439px);
  --competition-medallion-size: 64px;
  --competition-tier-gap: clamp(5px, 2cqw, 16px);
  --competition-event-size: clamp(16px, 6cqw, 28px);
  --competition-time-size: clamp(34px, 17cqw, 64px);
  --competition-time-long-size: clamp(29px, 14cqw, 54px);
  --competition-pace-size: clamp(10px, 3.5cqw, 14px);
  --competition-divider-gap: clamp(8px, 3cqw, 18px);
  --competition-earned-size: clamp(8px, 3.3cqw, 12px);
  --achievement-share-gap: clamp(8px, 3cqw, 12px);
  padding: var(--competition-outer-padding);
}

[data-water] .achievement-share .achievement-competition-panel {
  padding: var(--competition-panel-padding);
}

[data-water] .achievement-share .competition-detail-tier {
  margin-block-end: var(--competition-tier-gap);
}

[data-water] .achievement-share .competition-detail-medallion {
  inline-size: var(--competition-medallion-size);
  block-size: var(--competition-medallion-size);
  margin-block-end: var(--competition-tier-gap);
}

[data-water] .achievement-share .competition-detail-event {
  font-size: var(--competition-event-size);
}

[data-water] .achievement-share .competition-detail-time {
  font-size: var(--competition-time-size);
}

[data-water] .achievement-share .competition-detail-time-long {
  font-size: var(--competition-time-long-size);
}

[data-water] .achievement-share .competition-detail-pace {
  font-size: var(--competition-pace-size);
}

[data-water] .achievement-share .achievement-competition-detail
  .achievement-record-divider {
  margin-block-start: auto;
}

[data-water] .achievement-share .competition-detail-earned {
  font-size: var(--competition-earned-size);
}

.liquid-swim-medal,
.liquid-swim-medal * {
  pointer-events: none;
}

.liquid-swim-medal__icon--under {
  z-index: 0;
  filter: blur(3px);
}

.liquid-swim-medal__icon--over {
  z-index: 2;
  filter: none;
}