@layer components {
  .skewed-host,
  .skewed-container {
    position: relative;
    isolation: isolate;
    min-width: 0;
  }

  .skewed-container {
    --angle-skew-fg: 2deg;
    --angle-skew-bg: -1.5deg;
    --angle-lean-bg: 6deg;
    --color-skew-accent: var(--color-accent);
    --color-skew-surface: var(--color-bg);
    --skew-offset: 1rem;
    --skew-border-with: 2px;

    /* Set --skew-pad on a component to override padding */
    padding: var(--skew-pad, var(--space-7));

    &.cirne {
      --color-skew-accent: var(--color-cirne-green);
    }

    &.trale {
      --color-skew-accent: var(--color-trale-blue);
    }

    &.ders {
      --color-skew-accent: var(--color-ders-red);
    }

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    &::before {
      z-index: -2;
      background: var(--color-skew-accent);
      transform: translateY(var(--skew-offset)) rotate(var(--angle-skew-bg)) skewX(var(--angle-lean-bg));
    }

    &::after {
      z-index: -1;
      background: var(--color-skew-surface);
      transform: rotate(var(--angle-skew-fg));
      border: var(--skew-border-with) solid white;
    }

    &.bare-skew {
      --angle-skew-fg: -1deg;

      &::after {
        border: 1px solid white;
        background: transparent;
        border-left: 0;
        border-right: 0;
      }

      &::before {
        display: none;
      }
    }
  }

  .skewed-container--background {
    position: absolute;
    inset: 0;
    padding: 0;
    z-index: -1;
    pointer-events: none;
  }

  .panel-card {
    width: calc(100% - 2 * var(--space-7));
    max-width: var(--content-max);
    margin-inline: auto;
  }

  .panel--relationship {
    padding-block: var(--space-7);
  }

  .relationship-card {
    --skew-pad: var(--space-8);
    --skew-offset: 0rem;
    --skew-direction: 1;
    --angle-skew-fg: calc(3.5deg * var(--skew-direction));
    --angle-skew-bg: calc(-2deg * var(--skew-direction));
    --angle-lean-bg: calc(8deg * var(--skew-direction));

    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: var(--space-7);

    .sprite-sheet {
      pointer-events: none;
    }

    &.cirne {
      --skew-direction: -1;

      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }

  .relationship__media {
    width: 100%;
    height: 18rem;
    object-fit: contain;
    image-rendering: pixelated;
  }

  .relationship__text {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    max-width: 32rem;

    .cirne {
      color: var(--color-cirne-green);
    }

    .trale {
      color: var(--color-trale-blue);
    }

    .ders {
      color: var(--color-ders-red);
    }

    h2 {
      font-size: 2.5rem;
    }

    p {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      font-weight: 300;
      line-height: var(--leading-snug);
    }
  }

  .panel--survivor {
    --survivor-overlap: 3rem;

    width: 100%;
    max-width: none;
    min-height: min(100dvh, 55vw);
    padding-inline: max(var(--space-7), calc((100% - var(--content-max)) / 2));
    grid-template-columns: 2fr 3fr;
    align-items: center;
    overflow: clip;
  }

  /*
  Anchor each survivor art to the right edge of the first grid col, so it reaches a fixed distance (--reach), which is tweaked per-shape
  */
  .panel-survivor-img {
    --reach: 6.5rem;
    --share: 56vw;
    --max-width: 48rem;

    position: absolute;
    grid-column: 1 / 2;
    top: var(--space-9);
    right: calc(-1 * var(--reach));
    z-index: 1;
    width: min(
      var(--share),
      var(--max-width),
      /* Don't get pushed off screen in very narrow viewports, +0.5rem for the scrollbar */
        calc(100% + var(--reach) + max(var(--space-7), (100vw - var(--content-max)) / 2 - 0.5rem))
    );
    max-width: none;
    height: auto;
    filter: drop-shadow(5px -5px black);

    &.trale {
      --reach: 5rem;
    }

    /* Unlike trale and Ders, cirne covers from the top rather than the bottom */
    /* so we make them a little smaller */
    &.cirne {
      --reach: 5rem;
      --share: 47vw;
      --max-width: 40rem;
    }
  }

  .survivor-card {
    grid-column: 2;
    grid-row: 1;
    padding-inline-start: calc(var(--survivor-overlap) + var(--space-6));

    .survivor-details {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-4);
    }

    label {
      text-transform: uppercase;
    }

    img.icon {
      height: 2rem;
      width: 2rem;
      display: inline;
      border: 1px solid #ffffff78;
      padding: var(--space-1);
    }
  }

  .survivor-content {
    display: grid;
    min-width: 0;
  }

  .survivor-weapon,
  .survivor-special {
    display: flex;
    gap: var(--space-4);
    align-items: center;
  }

  .card-title {
    line-height: 1;
  }

  .card-subtitle {
    font-size: var(--text-lg);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-weight: 300;
    padding-bottom: 1rem;
  }

  @media (width >= 48rem) {
    .survivor-card {
      --angle-skew-bg: -4deg;
      --skew-border-with: 3px;
      padding-block: var(--space-8);

      &::after {
        transform: rotate(var(--angle-skew-fg)) skewX(-5deg);
      }

      .card-subtitle {
        font-size: 2rem;
      }

      .survivor-details {
        font-family: var(--font-mono);
        font-size: 1.5rem;
      }

      label {
        font-family: var(--font-display);
        font-size: var(--text-base);
      }
    }
  }

  @media (48rem <= width < 64rem) {
    .survivor-card .survivor-details {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2);
    }
  }

  @media (width < 48rem) {
    .skewed-container {
      --angle-skew-fg: 1.5deg;
      --angle-skew-bg: -1deg;
      --angle-lean-bg: 4deg;
      --skew-offset: 0.5rem;

      padding: var(--skew-pad, var(--space-5));
    }

    .skewed-container--background {
      padding: 0;
    }

    .panel-card {
      width: calc(100% - 2 * var(--space-5));
    }

    .relationship-card,
    .relationship-card.cirne {
      --skew-pad: var(--space-6);
      --angle-skew-fg: calc(1.5deg * var(--skew-direction));
      --angle-skew-bg: calc(-1deg * var(--skew-direction));
      --angle-lean-bg: calc(2deg * var(--skew-direction));
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
    }

    .relationship__media {
      order: -1;
      height: 12rem;
    }

    .panel--survivor {
      width: 100%;
      min-height: auto;
      padding-block-start: var(--space-8);
      padding-inline: var(--space-5);
      grid-template-columns: minmax(0, 1fr);
    }

    .panel-survivor-img {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      grid-column: 1;
      grid-row: 1;
      width: min(100%, 22rem);
      height: auto;
      aspect-ratio: 1 / 1.1;
      object-fit: cover;
      object-position: top;
      justify-self: center;

      &.cirne {
        width: min(47%, 40rem);
      }
    }

    .survivor-card {
      grid-column: 1;
      grid-row: 2;
      margin-block-start: calc(-1 * var(--survivor-overlap));
      padding-block-start: calc(var(--survivor-overlap) + var(--space-5));
      padding-inline-start: var(--space-5);

      .survivor-details {
        grid-template-columns: minmax(0, 1fr);
      }
    }
  }
}