/*
 * Rules page: the hero of the game page, then the rules as numbered articles of a charter, each sealed with its icon.
 * Every rule is marked as accepted (gold tick), refused (crimson cross) or informative (gold star); the mark is
 * doubled by a visually hidden word, so the meaning never rests on colour or shape alone.
 */
.rules-page {
    --rules-refused: light-dark(var(--color-primary), var(--home-blood));
    --rules-width: 60rem;
}

/* A longer title than the game page, hence a smaller size. */
.rules-hero__title {
    font-size: clamp(2.5rem, 7vw, 6rem);
    text-wrap: balance;
}

.rules-articles {
    max-width: var(--rules-width);
    /* Leaves room below the name engraved at the bottom of the hero. */
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
    padding-inline: var(--home-gutter);
}

.rules-articles__list {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rules-article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius-inner);
    background:
        radial-gradient(ellipse 40% 60% at 0 0, var(--color-chrome-haze), transparent 70%),
        var(--home-surface);
}

.rules-article__seal {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--home-line-strong);
    border-radius: 50%;
    background-color: var(--home-glass);
    color: var(--home-gold);
}

.rules-article__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.rules-article__body {
    display: grid;
    gap: var(--space-s);
    min-width: 0;
}

.rules-article__number {
    margin: 0;
    color: var(--home-gold);
    font-family: var(--font-family-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.rules-article__title {
    margin: 0;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    line-height: 1.15;
}

.rules-article__intro {
    margin: 0;
    color: var(--home-text-muted);
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    font-style: italic;
}

.rules-list {
    display: grid;
    gap: 0.875rem;
    margin: var(--space-m) 0 0;
    padding: var(--space-m) 0 0;
    border-top: 1px dashed var(--home-line);
    list-style: none;
}

.rules-list__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    align-items: start;
    gap: 0.875rem;
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.5;
    text-wrap: pretty;
}

.rules-list__mark {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    /* Centred on the first line of text. */
    margin-top: calc((1lh - 1.5rem) / 2);
    border-radius: 50%;
    color: var(--home-gold);
}

.rules-list__item--allowed .rules-list__mark {
    background-color: color-mix(in srgb, var(--home-gold) 16%, transparent);
}

.rules-list__item--forbidden .rules-list__mark {
    background-color: color-mix(in srgb, var(--rules-refused) 14%, transparent);
    color: var(--rules-refused);
}

.rules-list__item--info .rules-list__mark::before {
    content: '✦';
    font-size: 0.875rem;
}

.rules-list__icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

/* Contact: the text on one side, the Discord and email buttons on the other. */
.rules-contact {
    max-width: var(--rules-width);
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
    padding-inline: var(--home-gutter);
}

.rules-contact__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--home-gold) 45%, transparent);
    border-radius: var(--home-radius-inner);
    background-color: var(--home-surface-raised);
}

.rules-contact__text {
    display: grid;
    flex: 1 1 22rem;
    gap: var(--space-s);
}

.rules-contact__title {
    margin: 0;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

.rules-contact__lead {
    margin: 0;
    color: var(--home-text-muted);
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}

.rules-contact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Closing: the acceptance of the rules under three stars, then the way to the submission form. */
.rules-closing {
    display: grid;
    justify-items: center;
    gap: var(--space-m);
    padding: var(--home-section-space) var(--home-gutter);
    text-align: center;
}

.rules-closing::before {
    content: '✦ ✦ ✦' / '';
    color: var(--home-gold);
    letter-spacing: 0.5em;
}

.rules-closing__title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.rules-closing__text {
    margin: 0 0 var(--space-s);
    color: var(--home-text-muted);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}

.rules-closing__action {
    margin: 0;
}

/* On phones, the seal sits above the article instead of beside it. */
@media (max-width: 36rem) {
    .rules-article {
        grid-template-columns: 1fr;
    }
}