/*
 * Librarium Militaris: the result, sealed.
 *
 * The outcome of the game is what the page is for, and a reader who has not
 * asked to see one should not meet it head on. The plate ships masked: the
 * words are not in the document at all until the reader asks, and the class on
 * the section drives the blur, the overlay's fade and the re-hide button, so the
 * three cannot fall out of step with one another.
 *
 * The colours are the two armies' own, handed in per element as --result-color.
 */

@layer components {
  .postaction {
    position: relative;
    background-color: var(--color-surface);
    border-radius: var(--radius);
  }

  .postaction__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-16);
    border-bottom: 1px solid var(--color-border);
  }

  .postaction__rehide {
    flex: none;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-ink-dim);
    font-family: var(--font-heading);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    letter-spacing: var(--tracking-sm);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);

    &:hover {
      color: var(--color-ink-bright);
      border-color: var(--color-border-hover);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    /* Nothing to re-hide while it is still hidden. */
    .postaction--masked & { display: none; }
  }

  .postaction__body {
    --postaction-min-height: 250px;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
    min-height: var(--postaction-min-height);

    @media (min-width: 768px) { padding: var(--space-24); }
  }

  .postaction__content {
    --mask-blur: 0;
    --mask-grey: 0%;

    width: 100%;
    text-align: center;
    filter: blur(var(--mask-blur)) grayscale(var(--mask-grey));
    transition: filter var(--transition-reveal);

    .postaction--masked & {
      --mask-blur: 8px;
      --mask-grey: 100%;

      pointer-events: none;
      user-select: none;
    }
  }

  .postaction__kicker {
    margin-bottom: var(--space-4);
    color: var(--color-ink-soft);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
  }

  /* The commander is a person, not an army, so their name is white here as it is
     in the banner. The livery goes on the army line below. */
  .postaction__winner {
    color: var(--result-color, var(--color-ink-bright));
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-30);
    line-height: var(--leading-36);
    letter-spacing: var(--tracking-sm);
    text-transform: uppercase;
    text-shadow: var(--text-shadow-strong);
  }

  .postaction__army {
    margin-top: var(--space-4);
    color: var(--result-color, inherit);
    font-size: var(--text-18);
    line-height: var(--leading-28);
  }

  /* --------------------------------------------------------------- the seal -- */

  .redacted {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-danger);
    background-color: var(--color-mask);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--color-danger-hatch) 10px, var(--color-danger-hatch) 20px);
    cursor: pointer;
    transition: opacity var(--transition-medium), background-color var(--transition-medium);

    &:hover { background-color: var(--color-mask-lifting); }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: -4px;
    }

    /* Declassified: the plate fades out and stops taking clicks with it. */
    .postaction:not(.postaction--masked) & {
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition-medium), visibility 0s linear var(--duration-medium);
    }
  }

  .redacted__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .redacted__icon {
    display: flex;
    margin-bottom: var(--space-12);
    color: var(--color-danger);

    & svg {
      width: var(--space-48);
      height: var(--space-48);
    }
  }

  .redacted__stamp {
    padding: var(--space-8) var(--space-16);
    border: 2px solid var(--color-danger);
    background-color: var(--color-backdrop);
    color: var(--color-danger);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-24);
    line-height: var(--leading-32);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    transform: rotate(-2deg);
    filter: var(--shadow-stamp);

    @media (min-width: 768px) {
      font-size: var(--text-30);
      line-height: var(--leading-36);
    }
  }

  .redacted__prompt {
    margin-top: var(--space-16);
    color: var(--color-ink-soft);
    font-family: var(--font-sans);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
  }

  /* ------------------------------------------------------------- the score -- */

  .scoreline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    margin-top: var(--space-16);
    padding: var(--space-12) var(--space-24);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-scoreline);
  }

  .scoreline__value {
    color: var(--result-color, inherit);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-24);
    line-height: var(--leading-32);
  }

  .scoreline__value--loser { font-weight: 400; }

  .scoreline__vs {
    color: var(--color-ink-faint);
    font-family: var(--font-heading);
    font-style: italic;
  }
}