/* ============================================================
   FESTIVAL EVENT PAGE - stylesheet, last changed in module v1.9.1
   Markup: modules/festival.php (the one event page),
           templates/momo2/inc/festival.functions.php (renderer)
   Uses the momo2 theme tokens defined on :root in style.css.
   --fx-accent is set inline per event and per reward tier.
   ============================================================ */

.fx-page {
    --fx-accent: #8b5cf6;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 18px 60px;
    color: var(--m2-text);
}

/* Admin preview strip - only rendered while Visibility is "Admins only" */
.fx-adminbar {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: var(--m2-r-sm);
    font-size: 13px;
    line-height: 1.6;
    color: #ffe9bd;
    background: rgba(255, 179, 32, .08);
    border: 1px solid var(--m2-gold-border);
    border-left: 3px solid var(--m2-gold);
}
.fx-adminbar i { margin-right: 6px; color: var(--m2-gold); }
.fx-adminbar a { color: var(--m2-gold); text-decoration: underline; }

/* ---------------------------------------------------------------- HERO */
.fx-hero {
    position: relative;
    border: 1px solid var(--m2-border);
    border-radius: var(--m2-r-lg);
    background-color: var(--m2-bg-card);
    background-size: cover;
    background-position: center;
    box-shadow: var(--m2-shadow-card);
    overflow: hidden;
    text-align: center;
}
.fx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* plain fallback first for browsers without color-mix() */
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .06), transparent 62%);
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fx-accent) 22%, transparent), transparent 62%);
    pointer-events: none;
}
.fx-hero__inner {
    position: relative;
    padding: 34px 22px 30px;
}

/*
   Overlay (crop) mode only.

   --fx-bh is how tall the banner is, which is what decides how much of the
   artwork is visible: the picture is `cover`-cropped, so a short box shows a
   narrow band of it and a tall box shows more. Where that band sits vertically
   is the inline background-position, written by the renderer from bannerFocus.
   The hero centres its text in whatever height is set.

   --fx-ty then nudges the text off that centre. It is a transform, not padding,
   so it never changes the box height or re-crops the artwork underneath while it
   is being adjusted. Push it far enough and the text clips at the card edge -
   that is the cue to give the banner more height.
*/
.fx-hero--tall {
    min-height: var(--fx-bh, 0px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fx-hero--shift .fx-hero__inner { transform: translateY(var(--fx-ty, 0px)); }

/* Banner shown whole, text underneath. No overlay competing with the artwork. */
.fx-hero--art { background-image: none; }
.fx-hero--art::before { content: none; }
.fx-hero__frame {
    position: relative;
    display: block;
    line-height: 0;     /* no inline-descender gap under the image */
}
.fx-hero__art {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--m2-border);
}
.fx-hero--art .fx-hero__inner { padding-top: 24px; }

/*
   Blended banner: the artwork's edges dissolve into the card instead of ending on
   a hard line. Two independent axes, both set inline from the config:

     --fx-fade    (content.bannerFade,  bottom) -> .fx-hero--blend,  drawn by ::after
     --fx-fade-x  (content.bannerFadeX, sides)  -> .fx-hero--blendx, drawn by ::before

   ::before paints first, so the bottom fade covers the side fade in the two lower
   corners and they meet without a cross-hatched square. The bottom clamp keeps a
   very short or very tall banner sensible; the sides are left as a pure percentage
   because they should always scale with the card. The stops are eased rather than
   linear, otherwise the midpoint reads as a visible band of its own.

   Both axes resolve to the same neutral card colour and nothing else. An accent
   tint on one edge and not the other reads as a stain rather than a blend.
*/
.fx-hero { --fx-card-rgb: 20, 20, 22; }   /* = --m2-bg-card #141416 */
.fx-hero--blend .fx-hero__art { border-bottom: 0; }
.fx-hero--blend .fx-hero__frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;                /* cover the seam left by fractional image heights */
    height: clamp(80px, var(--fx-fade, 26%), 260px);
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(var(--fx-card-rgb), 0)    0%,
        rgba(var(--fx-card-rgb), .10) 28%,
        rgba(var(--fx-card-rgb), .32) 50%,
        rgba(var(--fx-card-rgb), .62) 68%,
        rgba(var(--fx-card-rgb), .88) 84%,
        var(--m2-bg-card)            100%
    );
}
/*
   Where the text starts, measured from the banner's bottom edge: --fx-gap, set
   inline from content.bannerTextGap. Positive clears the artwork, negative pulls
   the text up into the tail of the fade so the two halves read as one surface.
   How far you can go negative depends on the artwork - a banner with its own text
   near the bottom edge needs a positive gap or the two collide.
*/
.fx-hero--blend .fx-hero__inner { margin-top: var(--fx-gap, 12px); padding-top: 0; }

/*
   Side fade. Two gradient layers on one pseudo element - each is fully transparent
   past its own band, so they never darken the middle of the artwork between them.
   --fx-fade-x is the width of one side.
*/
.fx-hero--blendx .fx-hero__frame::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    right: -1px;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            var(--m2-bg-card)                0,
            rgba(var(--fx-card-rgb), .92) calc(var(--fx-fade-x, 12%) * .18),
            rgba(var(--fx-card-rgb), .68) calc(var(--fx-fade-x, 12%) * .40),
            rgba(var(--fx-card-rgb), .34) calc(var(--fx-fade-x, 12%) * .66),
            rgba(var(--fx-card-rgb), .10) calc(var(--fx-fade-x, 12%) * .85),
            rgba(var(--fx-card-rgb), 0)        var(--fx-fade-x, 12%)),
        linear-gradient(270deg,
            var(--m2-bg-card)                0,
            rgba(var(--fx-card-rgb), .92) calc(var(--fx-fade-x, 12%) * .18),
            rgba(var(--fx-card-rgb), .68) calc(var(--fx-fade-x, 12%) * .40),
            rgba(var(--fx-card-rgb), .34) calc(var(--fx-fade-x, 12%) * .66),
            rgba(var(--fx-card-rgb), .10) calc(var(--fx-fade-x, 12%) * .85),
            rgba(var(--fx-card-rgb), 0)        var(--fx-fade-x, 12%));
}
/* the artwork carries the mood, so the icon medallion would only repeat it */
.fx-hero--art .fx-hero__icon { display: none; }

/* Kept in the DOM for screen readers and SEO when the artwork shows the title */
.fx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.fx-hero__icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 26px;
    color: var(--fx-accent);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--fx-accent);
}
.fx-hero__title {
    margin: 10px 0 6px;
    font-family: "Cinzel", "Roboto", serif;
    font-size: clamp(22px, 3.4vw, 34px);
    font-weight: 700;
    letter-spacing: .4px;
    color: #fff;
}
.fx-hero__tagline {
    margin: 0 auto;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--m2-text-sub);
}
.fx-hero__dates {
    margin: 14px 0 0;
    font-size: 13px;
    letter-spacing: .4px;
    color: var(--m2-text-muted);
}

/* Status pill */
.fx-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fx-pill--live  { color: #0e2a14; background: #4ade80; }
.fx-pill--soon  { color: #0b1a2a; background: #7dd3fc; }
.fx-pill--ended { color: #2a1c0b; background: #fbbf24; }
.fx-pill--off   { color: var(--m2-text-sub); background: var(--m2-bg-elevated); border: 1px solid var(--m2-border); }

/* ----------------------------------------------------------- COUNTDOWN */
.fx-cd { margin-top: 18px; }
.fx-cd__label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--m2-text-muted);
}
.fx-cd__row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fx-cd__cell {
    min-width: 68px;
    padding: 10px 8px;
    border-radius: var(--m2-r-sm);
    background: var(--m2-bg-elevated);
    border: 1px solid var(--m2-border);
}
.fx-cd__num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fx-accent);
    font-variant-numeric: tabular-nums;
}
.fx-cd__unit {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--m2-text-muted);
}
.fx-cd.is-over .fx-cd__num { color: var(--m2-text-muted); }

/* -------------------------------------------------------------- INTRO */
.fx-intro {
    margin: 26px auto 0;
    max-width: 820px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--m2-text-sub);
    text-align: center;
}
.fx-intro p    { margin: 0 0 12px; }
.fx-intro a,
.fx-step__text a,
.fx-note a     { color: var(--fx-accent); }
.fx-intro strong,
.fx-step__text strong { color: var(--m2-text); }

/* ------------------------------------------------------- HOW IT WORKS */
.fx-steps {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.fx-step {
    display: flex;
    gap: 14px;
    padding: 18px;
    border-radius: var(--m2-r-md);
    background: var(--m2-bg-card);
    border: 1px solid var(--m2-border);
}
.fx-step__icon {
    flex: 0 0 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--m2-r-sm);
    font-size: 17px;
    color: var(--fx-accent);
    background: rgba(255, 255, 255, .04);
}
.fx-step__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--m2-gold);
}
.fx-step__text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--m2-text-sub);
}
.fx-step__text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ CHARACTER BAR */
.fx-charbar {
    margin-top: 30px;
    padding: 14px 16px;
    border-radius: var(--m2-r-md);
    background: var(--m2-bg-card);
    border: 1px solid var(--m2-border);
}
.fx-charbar__label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--m2-text-muted);
}
.fx-charbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fx-chip {
    display: block;
    padding: 8px 14px;
    min-height: var(--m2-touch);
    border-radius: var(--m2-r-sm);
    background: var(--m2-bg-elevated);
    border: 1px solid var(--m2-border);
    text-decoration: none;
    transition: var(--m2-trans);
}
.fx-chip:hover { border-color: var(--fx-accent); text-decoration: none; }
.fx-chip.is-active {
    border-color: var(--fx-accent);
    background: var(--m2-bg-overlay);
    background: color-mix(in srgb, var(--fx-accent) 16%, var(--m2-bg-elevated));
}
.fx-chip__name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--m2-text);
}
.fx-chip__meta {
    display: block;
    font-size: 11px;
    color: var(--m2-text-muted);
}

/* ------------------------------------------------------------ REWARDS */
.fx-rewards {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
/* Squarer than the rest of the page and edged in gold: this is the one panel that
   should read as a plaque rather than as a web card. */
.fx-reward {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: var(--m2-r-sm);
    background: var(--m2-bg-card);
    border: 1px solid var(--m2-gold-border);
    box-shadow: var(--m2-shadow-card);
}
.fx-reward__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/*
   One tier on the page: split the card into "what it is" and "who can claim it".
   Gated on .fx-rewards--single because two split cards side by side would each be
   too narrow, and a media query cannot see the card's own width.
*/
.fx-rewards--single .fx-reward--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 24px;
    align-items: start;
    padding: 24px;
}
@media (max-width: 900px) {
    .fx-rewards--single .fx-reward--split {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 20px;
    }
}
.fx-reward__side {
    min-width: 0;
    padding: 16px;
    border-radius: 3px;
    background: var(--m2-bg);
    border: 1px solid var(--m2-border);
}
@media (max-width: 900px) {
    .fx-reward__side { margin-top: 18px; }
}
.fx-reward__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fx-reward__icon {
    flex: 0 0 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 3px;
    font-size: 19px;
    color: var(--m2-gold);
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--m2-gold-border);
}
.fx-reward__title-wrap { min-width: 0; }
.fx-reward__title {
    margin: 0;
    font-family: "Cinzel", "Roboto", serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--m2-gold);
}
/* outlined, not filled - a solid block of accent next to a gold title was the
   loudest thing on the card and it is only a label */
.fx-reward__badge {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 9px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--m2-gold);
    background: transparent;
    border: 1px solid var(--m2-gold-border);
}
.fx-reward__desc {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--m2-text-sub);
}
.fx-reward__desc p:last-child { margin-bottom: 0; }

/* The tier's terms. Not pills: a thin gold rule with the terms separated by a
   diamond reads as engraved rather than as a row of UI tags. */
.fx-terms {
    margin: 14px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--m2-gold-border);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    font-size: 11.5px;
    letter-spacing: .3px;
    color: var(--m2-text-sub);
}
.fx-terms li + li::before {
    content: "\2666";               /* ◆ */
    margin: 0 9px;
    font-size: 8px;
    vertical-align: middle;
    color: var(--m2-gold-dim);
}

.fx-reward__items {
    margin-top: 16px;
}
.fx-reward__items-label {
    display: block;
    margin-bottom: 8px;
    font-family: "Cinzel", "Roboto", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--m2-gold);
}
.fx-reward__items-label em {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--m2-text-muted);
}
/* A plain list. A full set is six short names; boxing each one turned a loot list
   into a row of buttons. The gold tick is the only ornament. */
.fx-items {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 24px;
}
.fx-items li {
    font-size: 13px;
    line-height: 1.85;
    color: var(--m2-text-sub);
    break-inside: avoid;
}
.fx-items li::before {
    content: "\2756";               /* ❖ */
    margin-right: 8px;
    font-size: 9px;
    vertical-align: middle;
    color: var(--m2-gold-dim);
}
.fx-items__meta { color: var(--m2-gold); font-weight: 700; }
.fx-items__more { color: var(--m2-text-muted); font-style: italic; }
.fx-items__more::before { content: none; }

@media (max-width: 520px) {
    .fx-items { columns: 1; }
}
.fx-reward__note {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--m2-text-muted);
}

/* ------------------------------------------------- PER-CHARACTER ROSTER */
/* A character-scoped tier is claimed once per character, so the card lists the
   whole account instead of a selector plus one button. */
.fx-roster__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.fx-roster__label {
    font-family: "Cinzel", "Roboto", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--m2-gold);
}
.fx-roster__count {
    font-size: 11px;
    white-space: nowrap;
    color: var(--m2-text-muted);
}
/* how far through the account you are - the count alone is easy to miss once the
   list is long enough to scroll */
.fx-roster__bar {
    height: 5px;
    margin: 2px 0 10px;
    border-radius: 999px;
    background: var(--m2-bg-overlay);
    overflow: hidden;
}
.fx-roster__bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--m2-gold);
    transition: width var(--m2-trans);
}
.fx-roster__hint {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--m2-text-muted);
}
.fx-roster__hint.is-ok { color: #4ade80; }
.fx-roster__hint i { margin-right: 4px; }
/* Squared off rather than pill-rounded, and lit from the left in gold when this
   is the character the "You receive" list is previewing. */
.fx-roster__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 3px;
    background: var(--m2-bg-elevated);
    border: 1px solid var(--m2-border);
    border-left: 2px solid transparent;
}
.fx-roster__row + .fx-roster__row { margin-top: 6px; }
.fx-roster__row.is-active {
    border-left-color: var(--m2-gold);
    background: linear-gradient(90deg, var(--m2-gold-glow), transparent 55%), var(--m2-bg-elevated);
}
.fx-roster__row.is-done { opacity: .72; }

.fx-roster__who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.fx-roster__who:hover { text-decoration: none; }
.fx-roster__who:hover .fx-roster__name { color: var(--m2-gold); }
/*
   Either the class portrait or, for the classes the template has no artwork for,
   a monogram in the same box. Both share the box so the rows stay aligned.

   A plain square rather than a circle: a circle crops the top of a helmet off,
   which is the part that identifies the class. Width AND height are both set -
   a portrait is not square, so without object-fit the browser stretches the face.
*/
.fx-roster__ava {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 3px;
    background: var(--m2-bg-card);
    border: 1px solid var(--m2-gold-border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
img.fx-roster__ava {
    display: block;
    object-fit: cover;
    object-position: center top;
}
.fx-roster__ava--tag {
    display: grid;
    place-items: center;
    font-family: "Cinzel", "Roboto", serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--m2-gold);
}
.fx-roster__row.is-active .fx-roster__ava {
    border-color: var(--m2-gold);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 0 10px var(--m2-gold-glow);
}
.fx-roster__id { min-width: 0; }
.fx-roster__name {
    display: block;
    font-family: "Cinzel", "Roboto", serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--m2-text);
    transition: var(--m2-trans);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-roster__meta {
    display: block;
    font-size: 11px;
    color: var(--m2-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-roster__act { flex: 0 0 auto; }
.fx-roster__act .fx-claim-form { margin: 0; }
.fx-roster__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    text-align: right;
    color: var(--m2-text-muted);
}
.fx-roster__state.is-ok { color: #4ade80; }

.fx-roster__foot {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--m2-gold-border);
    font-size: 11.5px;
    line-height: 1.55;
    text-align: center;
    color: var(--m2-text-muted);
}
.fx-roster__foot strong { color: var(--m2-gold-dim); font-weight: 600; }

.fx-btn--sm {
    min-height: 32px;
    padding: 6px 14px;
    font-size: 12px;
}

.fx-reward__foot {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.fx-claim-form { margin: 0; }
.fx-state {
    font-size: 12.5px;
    color: var(--m2-text-muted);
}
.fx-state i { margin-right: 5px; }
.fx-claimed {
    margin-left: auto;
    font-size: 11px;
    color: var(--m2-text-muted);
}

/* -------------------------------------------------------------- BUTTONS */
.fx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--m2-touch);
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: "Cinzel", "Roboto", serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: var(--m2-trans);
}
.fx-btn--primary {
    color: var(--m2-text-inv);
    background: var(--fx-accent);
}
.fx-btn--primary:hover {
    filter: brightness(1.12);
    color: var(--m2-text-inv);
    text-decoration: none;
}
.fx-btn--ghost {
    color: var(--m2-text);
    background: var(--m2-bg-elevated);
    border-color: var(--m2-border);
}
.fx-btn--ghost:hover { border-color: var(--fx-accent); color: #fff; text-decoration: none; }
.fx-btn--lg { padding: 14px 30px; font-size: 15px; }

.fx-cta { margin-top: 28px; text-align: center; }

/* ------------------------------------------------------------ MESSAGES */
.fx-flash,
.fx-notice {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: var(--m2-r-sm);
    font-size: 13.5px;
    line-height: 1.6;
    background: var(--m2-bg-card);
    border: 1px solid var(--m2-border);
    border-left: 3px solid var(--m2-text-muted);
    color: var(--m2-text-sub);
}
.fx-flash i, .fx-notice i { margin-right: 6px; }
.fx-flash--success { border-left-color: #4ade80; color: #d6f5df; }
.fx-flash--error,
.fx-notice--error  { border-left-color: #f87171; color: #fbdada; }
.fx-notice--info   { border-left-color: var(--fx-accent); }

.fx-note {
    margin-top: 26px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: var(--m2-text-sub);
}
.fx-note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- HISTORY */
.fx-history {
    margin-top: 30px;
    padding: 18px;
    border-radius: var(--m2-r-md);
    background: var(--m2-bg-card);
    border: 1px solid var(--m2-border);
    overflow-x: auto;
}
.fx-history__title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--m2-gold);
}
.fx-history__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 480px;
}
.fx-history__table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--m2-text-muted);
    border-bottom: 1px solid var(--m2-border);
}
.fx-history__table td {
    padding: 8px 10px;
    color: var(--m2-text-sub);
    border-bottom: 1px solid var(--m2-border);
}
.fx-history__table tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 640px) {
    .fx-page { padding: 16px 12px 44px; }
    .fx-hero__inner { padding: 26px 16px 24px; }
    /* a phone is much narrower, so a desktop banner height would leave a tall
       empty band; cap it and let the content decide when that is shorter */
    .fx-hero--tall { min-height: min(var(--fx-bh, 0px), 62vw); }
    /* the banner is much shorter here, so the fade shrinks with it. The gap is a
       px value from the config and carries over as-is. */
    .fx-hero--blend .fx-hero__frame::after { height: clamp(56px, var(--fx-fade, 26%), 150px); }
    .fx-hero--blend .fx-hero__inner { padding: 0 16px 24px; }
    .fx-cd__cell { min-width: 60px; padding: 8px 6px; }
    .fx-cd__num { font-size: 20px; }
    .fx-rewards { grid-template-columns: 1fr; }
    .fx-reward__foot .fx-btn { width: 100%; }
    .fx-reward__foot .fx-claim-form { width: 100%; }
    .fx-claimed { margin-left: 0; }
    /* the roster keeps its two columns - a full-width button per character would
       make a five-character account very tall */
    .fx-roster__row { padding: 8px; }
    .fx-roster__state { font-size: 11px; }
}