.fictional-club-crest {
  --crest-primary: #d92d20;
  --crest-secondary: #175cd3;
  --crest-accent: #fdb022;
  --crest-ink: #fff;
  --crest-angle: 0deg;
  --crest-color-rotation: 0deg;
  --crest-saturation: saturate(1);
  --crest-shadow: drop-shadow(0 2px 2px rgba(2, 12, 18, 0.34));
  position: relative;
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  isolation: isolate;
  color: var(--crest-ink);
  filter:
    hue-rotate(var(--crest-color-rotation))
    var(--crest-saturation)
    var(--crest-shadow);
  vertical-align: middle;
}

.fictional-club-crest::before,
.fictional-club-crest::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.crest-monogram {
  position: relative;
  z-index: 3;
  display: inline-block;
  color: var(--crest-ink);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(2, 12, 18, 0.72);
}

.crest-palette-2 {
  --crest-primary: #4e102a;
  --crest-secondary: #232a3a;
  --crest-accent: #d9a441;
  --crest-ink: #fff8df;
  --crest-saturation: saturate(0.88);
  --crest-shadow: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.crest-palette-3 {
  --crest-primary: #e9eef5;
  --crest-secondary: #203864;
  --crest-accent: #8fa6bb;
  --crest-ink: #101828;
  --crest-saturation: saturate(0.72);
  --crest-shadow: drop-shadow(0 1px 2px rgba(2, 12, 18, 0.25));
}

.crest-palette-4 {
  --crest-primary: #d9480f;
  --crest-secondary: #f08c00;
  --crest-accent: #fff3bf;
  --crest-ink: #ffffff;
  --crest-shadow: drop-shadow(0 2px 2px rgba(68, 20, 0, 0.34));
}

.crest-palette-5 {
  --crest-primary: #2446a8;
  --crest-secondary: #7b2cbf;
  --crest-accent: #f5e960;
  --crest-ink: #ffffff;
  --crest-shadow: drop-shadow(0 2px 2px rgba(8, 18, 55, 0.36));
}

.crest-palette-6 {
  --crest-primary: #101318;
  --crest-secondary: #00d4ff;
  --crest-accent: #ff3cac;
  --crest-ink: #ffffff;
  --crest-saturation: saturate(1.18);
  --crest-shadow: drop-shadow(0 0 3px color-mix(in srgb, var(--crest-accent) 70%, transparent));
}

.crest-palette-7 {
  --crest-primary: #c9b6e4;
  --crest-secondary: #f2b6a0;
  --crest-accent: #245b45;
  --crest-ink: #111827;
  --crest-shadow: drop-shadow(0 1px 2px rgba(2, 12, 18, 0.25));
}

.crest-palette-8 {
  --crest-primary: #6b6f2c;
  --crest-secondary: #217a75;
  --crest-accent: #c86b3c;
  --crest-ink: #fffdf4;
  --crest-saturation: saturate(0.9);
  --crest-shadow: drop-shadow(0 2px 2px rgba(21, 30, 18, 0.38));
}

.crest-palette-3 .crest-monogram,
.crest-palette-7 .crest-monogram {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.54);
}

.crest-colorway-0 { --crest-color-rotation: 0deg; }
.crest-colorway-1 { --crest-color-rotation: 15deg; }
.crest-colorway-2 { --crest-color-rotation: 30deg; }
.crest-colorway-3 { --crest-color-rotation: 45deg; }
.crest-colorway-4 { --crest-color-rotation: 60deg; }
.crest-colorway-5 { --crest-color-rotation: 75deg; }
.crest-colorway-6 { --crest-color-rotation: 90deg; }
.crest-colorway-7 { --crest-color-rotation: 105deg; }
.crest-colorway-8 { --crest-color-rotation: 120deg; }
.crest-colorway-9 { --crest-color-rotation: 135deg; }
.crest-colorway-10 { --crest-color-rotation: 150deg; }
.crest-colorway-11 { --crest-color-rotation: 165deg; }
.crest-colorway-12 { --crest-color-rotation: 180deg; }
.crest-colorway-13 { --crest-color-rotation: 195deg; }
.crest-colorway-14 { --crest-color-rotation: 210deg; }
.crest-colorway-15 { --crest-color-rotation: 225deg; }
.crest-colorway-16 { --crest-color-rotation: 240deg; }
.crest-colorway-17 { --crest-color-rotation: 255deg; }
.crest-colorway-18 { --crest-color-rotation: 270deg; }
.crest-colorway-19 { --crest-color-rotation: 285deg; }
.crest-colorway-20 { --crest-color-rotation: 300deg; }
.crest-colorway-21 { --crest-color-rotation: 315deg; }
.crest-colorway-22 { --crest-color-rotation: 330deg; }
.crest-colorway-23 { --crest-color-rotation: 345deg; }

.crest-angle-0 { --crest-angle: 0deg; }
.crest-angle-15 { --crest-angle: 15deg; }
.crest-angle-30 { --crest-angle: 30deg; }
.crest-angle-45 { --crest-angle: 45deg; }
.crest-angle-60 { --crest-angle: 60deg; }
.crest-angle-75 { --crest-angle: 75deg; }
.crest-angle-90 { --crest-angle: 90deg; }
.crest-angle-105 { --crest-angle: 105deg; }
.crest-angle-120 { --crest-angle: 120deg; }
.crest-angle-135 { --crest-angle: 135deg; }
.crest-angle-150 { --crest-angle: 150deg; }
.crest-angle-165 { --crest-angle: 165deg; }

.crest-detail {
  position: absolute;
  inset: 4px;
  z-index: 2;
  display: block;
  pointer-events: none;
  transform: rotate(var(--crest-angle));
}

.crest-variant-1 .crest-detail {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
}

.crest-variant-2 .crest-detail {
  inset: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.68);
}

.crest-variant-3 .crest-detail {
  inset: 9px 2px;
  border-radius: 4px;
  background: var(--crest-accent);
}

.crest-variant-4 .crest-detail {
  background:
    linear-gradient(90deg, transparent 38%, rgba(255, 255, 255, 0.72) 39% 61%, transparent 62%),
    linear-gradient(transparent 38%, rgba(255, 255, 255, 0.72) 39% 61%, transparent 62%);
}

.crest-variant-5 .crest-detail {
  border: 2px dotted rgba(255, 255, 255, 0.82);
  border-radius: 50%;
}

.crest-variant-6 .crest-detail {
  background: rgba(255, 255, 255, 0.72);
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 69% 59%, 79% 100%, 50% 76%, 21% 100%, 31% 59%, 0 38%, 38% 35%);
}

.crest-variant-7 .crest-detail {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(2, 12, 18, 0.16);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.crest-variant-8 .crest-detail {
  inset: 5px;
  border: 2px double rgba(255, 255, 255, 0.88);
  border-radius: 3px;
}

.crest-shield {
  border: 2px solid var(--crest-accent);
  border-radius: 5px 5px 9px 9px;
  background:
    linear-gradient(135deg, transparent 0 54%, rgba(255, 255, 255, 0.16) 55% 62%, transparent 63%),
    linear-gradient(var(--crest-angle), var(--crest-primary) 0 52%, var(--crest-secondary) 52% 100%);
  clip-path: polygon(6% 0, 94% 0, 91% 67%, 50% 100%, 9% 67%);
}

.crest-shield::after {
  inset: 4px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 2px 2px 6px 6px;
  clip-path: polygon(0 0, 100% 0, 96% 62%, 50% 100%, 4% 62%);
}

.crest-roundel {
  border: 2px solid var(--crest-accent);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--crest-primary) 0 38%, #fff 39% 47%, var(--crest-secondary) 48% 72%, var(--crest-accent) 73% 100%);
}

.crest-roundel::after {
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
}

.crest-royal {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  margin-top: 1px;
  border: 2px solid var(--crest-accent);
  border-radius: 50%;
  background:
    linear-gradient(140deg, transparent 0 42%, rgba(255, 255, 255, 0.85) 43% 50%, transparent 51%),
    radial-gradient(circle, var(--crest-primary) 0 48%, var(--crest-secondary) 49% 68%, var(--crest-accent) 69% 100%);
}

.crest-royal::before {
  top: -5px;
  left: 50%;
  z-index: 2;
  width: 13px;
  height: 6px;
  border-radius: 1px 1px 3px 3px;
  background: var(--crest-accent);
  clip-path: polygon(0 100%, 3% 25%, 26% 64%, 50% 0, 74% 64%, 97% 25%, 100% 100%);
  transform: translateX(-50%);
}

.crest-royal::after {
  inset: 4px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
}

.crest-striped {
  border: 2px solid var(--crest-accent);
  border-radius: 5px 5px 9px 9px;
  background:
    repeating-linear-gradient(
      var(--crest-angle),
      var(--crest-primary) 0 4px,
      var(--crest-secondary) 4px 8px
    );
  clip-path: polygon(5% 0, 95% 0, 90% 70%, 50% 100%, 10% 70%);
}

.crest-striped::before {
  inset: 7px 2px auto;
  z-index: 1;
  height: 6px;
  background: var(--crest-accent);
}

.crest-quartered {
  border: 2px solid var(--crest-accent);
  border-radius: 5px 5px 9px 9px;
  background:
    conic-gradient(
      var(--crest-primary) 0 25%,
      var(--crest-secondary) 25% 50%,
      var(--crest-primary) 50% 75%,
      var(--crest-secondary) 75% 100%
    );
  clip-path: polygon(6% 0, 94% 0, 91% 67%, 50% 100%, 9% 67%);
}

.crest-quartered::after {
  inset: 4px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 2px 2px 6px 6px;
  clip-path: polygon(0 0, 100% 0, 96% 62%, 50% 100%, 4% 62%);
}

.crest-diamond {
  background:
    linear-gradient(var(--crest-angle), var(--crest-primary) 0 46%, var(--crest-accent) 46% 54%, var(--crest-secondary) 54% 100%);
  clip-path: polygon(50% 0, 96% 50%, 50% 100%, 4% 50%);
}

.crest-diamond::after {
  inset: 4px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.crest-pennant {
  width: 26px;
  height: 20px;
  flex-basis: 26px;
  border-left: 3px solid var(--crest-accent);
  background:
    linear-gradient(var(--crest-angle), transparent 0 54%, rgba(255, 255, 255, 0.26) 55% 62%, transparent 63%),
    linear-gradient(90deg, var(--crest-primary) 0 54%, var(--crest-secondary) 55% 100%);
  clip-path: polygon(0 6%, 100% 0, 78% 50%, 100% 100%, 0 94%);
}

.crest-pennant::after {
  inset: 3px 5px 3px 3px;
  border: 1px solid color-mix(in srgb, var(--crest-accent) 72%, white);
  clip-path: polygon(0 5%, 100% 0, 76% 50%, 100% 100%, 0 95%);
}

.crest-hexagon {
  background:
    linear-gradient(var(--crest-angle), rgba(255, 255, 255, 0.28) 0 18%, transparent 19% 100%),
    conic-gradient(var(--crest-primary), var(--crest-secondary), var(--crest-accent), var(--crest-primary));
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
}

.crest-hexagon::after {
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
}

.crest-oval {
  width: 22px;
  height: 25px;
  flex-basis: 22px;
  border: 2px solid var(--crest-accent);
  border-radius: 48% 48% 44% 44% / 38% 38% 62% 62%;
  background:
    linear-gradient(var(--crest-angle), transparent 0 46%, rgba(255, 255, 255, 0.3) 47% 54%, transparent 55%),
    radial-gradient(ellipse, var(--crest-primary) 0 45%, var(--crest-secondary) 46% 72%, var(--crest-accent) 73%);
}

.crest-oval::after {
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
}

.crest-tower {
  width: 22px;
  height: 25px;
  flex-basis: 22px;
  border-bottom: 3px solid var(--crest-accent);
  background:
    linear-gradient(var(--crest-angle), rgba(255, 255, 255, 0.3) 0 18%, transparent 19%),
    linear-gradient(90deg, var(--crest-primary) 0 50%, var(--crest-secondary) 50%);
  clip-path: polygon(0 0, 24% 0, 24% 17%, 40% 17%, 40% 0, 60% 0, 60% 17%, 76% 17%, 76% 0, 100% 0, 94% 100%, 6% 100%);
}

.crest-tower::after {
  inset: 7px 5px 3px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.crest-chevron {
  width: 26px;
  height: 22px;
  flex-basis: 26px;
  background:
    linear-gradient(var(--crest-angle), transparent 0 42%, rgba(255, 255, 255, 0.3) 43% 50%, transparent 51%),
    conic-gradient(from 90deg, var(--crest-primary), var(--crest-secondary), var(--crest-accent), var(--crest-primary));
  clip-path: polygon(0 0, 50% 22%, 100% 0, 86% 72%, 50% 100%, 14% 72%);
}

.crest-chevron::after {
  inset: 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  clip-path: polygon(0 0, 50% 24%, 100% 0, 84% 70%, 50% 100%, 16% 70%);
}

.crest-star {
  background:
    radial-gradient(circle at 50% 48%, var(--crest-primary) 0 28%, var(--crest-secondary) 29% 52%, var(--crest-accent) 53% 100%);
  clip-path: polygon(50% 0, 61% 33%, 96% 24%, 69% 50%, 94% 78%, 61% 68%, 50% 100%, 39% 68%, 6% 78%, 31% 50%, 4% 24%, 39% 33%);
}

.crest-star::after {
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}