/**
 * Riftmana Avatar Decorations
 *
 * CSS-only animated rings rendered as a <span> sibling to the avatar.
 * The wrapping element gets `.rm-decorated` to make it position:relative.
 * If the wrapper has `overflow: hidden`, also add `.rm-decorated-bleed`
 * (which forces overflow: visible) — but be aware that may break a
 * circular-crop that depended on overflow:hidden + border-radius:50%.
 */

/* Ring thickness scales with avatar size via this variable. Default fits
   small/medium avatars (32–64px in deck cards, comments, single-deck byline).
   Bigger avatars (e.g. the 120px profile header) override it locally so the
   ring stays visually proportional instead of looking too thin. */
.rm-decorated {
    position: relative;
    --rm-ring: 3px;
    /* Don't stretch when nested in flex/grid. Default `align-items: stretch`
       on a row-direction parent (e.g. .deck-comment) makes the wrapper grow
       vertically, which turns every ring into an egg/ellipse: the ring's
       border-radius:50% on a non-square box, plus the rainbow's positioned
       element drifting off the avatar.
       `center` (rather than `start`) is used so this also works in
       column-direction parents (e.g. .rm-deco-tile, where cross-axis is
       horizontal) — `start` would left-align the avatar in those tiles. */
    align-self: center;
}

.rm-decorated.rm-decorated-bleed {
    overflow: visible !important;
}

/* ── Ring base ─────────────────────────────────────────────────────────
   The ring is absolutely positioned over the avatar at the same size,
   styled via box-shadow (which extends OUTSIDE the element box).
   Pointer-events:none so it never blocks clicks/taps on the avatar. */
.rm-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    box-sizing: border-box;
}

/* Animated rings (the 6 Minion domain rings) split into TWO layers:
     - the parent .rm-avatar-ring carries a STATIC box-shadow (rim + colored
       band + minimum glow) — paints once, never repaints during animation
     - an ::after pseudo-element carries a STATIC box-shadow with a stronger
       outer glow, and its OPACITY is the only thing that animates
   opacity is fully GPU-composited, so the browser never repaints during the
   pulse — it just blends a precomputed layer in/out. Eliminates the per-frame
   paint cost that box-shadow keyframes would require, which was visible on
   list pages with many decorated avatars.
   Recruit Glow is always static (no animation needed). */

/* ════════════════════════════════════════════════════════════════════════
   RECRUIT — solid orange glow (auto-assigned, no choice)
   ════════════════════════════════════════════════════════════════════════ */
.rm-ring-recruit-glow {
    box-shadow:
        0 0 0 var(--rm-ring) #ffa600,
        /* Outer glow scales with ring thickness so small-avatar contexts
           (28px deck-list bylines) don't get a halo wider than the avatar
           itself. */
        0 0 calc(var(--rm-ring) * 3) 0 rgba(255, 166, 0, .4);
}

/* ════════════════════════════════════════════════════════════════════════
   MINION — domain ring options. Colors mirror Riftbound's 6 domains as
   used in the deck-builder filter (Fury / Calm / Mind / Body / Chaos /
   Order). Each ring uses an identical pulse animation (2.4s with
   material easing, asymmetric peak at 45%) so the rings differ only by
   color, keeping the visual system tight and predictable.
   ════════════════════════════════════════════════════════════════════════ */

/* Fury — red. */
.rm-ring-minion-fury {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .35),
        0 0 0 var(--rm-ring) #e0292e,
        0 0 8px 2px rgba(224, 41, 46, .35);
}
.rm-ring-minion-fury::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 0 22px 6px rgba(224, 41, 46, .55);
    opacity: 0;
    animation: rm-ring-overlay-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Calm — green. */
.rm-ring-minion-calm {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .35),
        0 0 0 var(--rm-ring) #4d8e2f,
        0 0 8px 2px rgba(77, 142, 47, .35);
}
.rm-ring-minion-calm::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .25),
        0 0 22px 6px rgba(77, 142, 47, .5);
    opacity: 0;
    animation: rm-ring-overlay-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Mind — blue. */
.rm-ring-minion-mind {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .35),
        0 0 0 var(--rm-ring) #2a72a0,
        0 0 8px 2px rgba(42, 114, 160, .4);
}
.rm-ring-minion-mind::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 0 22px 6px rgba(42, 114, 160, .55);
    opacity: 0;
    animation: rm-ring-overlay-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Body — orange. */
.rm-ring-minion-body {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .35),
        0 0 0 var(--rm-ring) #e6700d,
        0 0 8px 2px rgba(230, 112, 13, .4);
}
.rm-ring-minion-body::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 0 22px 6px rgba(230, 112, 13, .55);
    opacity: 0;
    animation: rm-ring-overlay-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Chaos — purple. */
.rm-ring-minion-chaos {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .35),
        0 0 0 var(--rm-ring) #6e478f,
        0 0 8px 2px rgba(110, 71, 143, .4);
}
.rm-ring-minion-chaos::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 0 24px 6px rgba(110, 71, 143, .6);
    opacity: 0;
    animation: rm-ring-overlay-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Order — gold. */
.rm-ring-minion-order {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .4),
        0 0 0 var(--rm-ring) #ccae0b,
        0 0 8px 2px rgba(204, 174, 11, .4);
}
.rm-ring-minion-order::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .3),
        0 0 22px 6px rgba(204, 174, 11, .55);
    opacity: 0;
    animation: rm-ring-overlay-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Shared keyframe for all opacity-pulse rings. Different rings vary in
   duration and easing rather than peak position, since the rim/glow
   intensity at peak is encoded directly in the ::after's box-shadow. */
@keyframes rm-ring-overlay-pulse {
    0%, 100% { opacity: 0; }
    45%      { opacity: 1; }   /* asymmetric peak — sharp swell then slow decay */
}

/* Reduce motion preference — respect users who don't want animated rings.
   All 6 domain rings run their animation on ::after (opacity). */
@media (prefers-reduced-motion: reduce) {
    .rm-ring-minion-fury::after,
    .rm-ring-minion-calm::after,
    .rm-ring-minion-mind::after,
    .rm-ring-minion-body::after,
    .rm-ring-minion-chaos::after,
    .rm-ring-minion-order::after {
        animation: none !important;
    }
}

/* Pause animation when the ring is off-screen. JS toggles this via an
   IntersectionObserver. Targets the ::after pseudo where the opacity
   pulse animation lives. The selector also covers the ring element
   itself in case future ring styles use a parent-level animation. */
.rm-avatar-ring.is-rm-ring-paused,
.rm-avatar-ring.is-rm-ring-paused::after {
    animation-play-state: paused;
}

/* Only animate a tile's ring when it's hovered, currently selected, or
   currently in the spotlight rotation. Picker grid: the saved-pick tile
   stays animating + hover. Locked upgrade/recruit grid: JS rotates
   `.is-previewing` through the tiles so non-Minions still see each style
   animate, one at a time. Targets both the parent and the ::after pseudo
   for the same reason as the IO pause rule above. */
.rm-deco-tile:not(:hover):not(.is-selected):not(.is-previewing) .rm-avatar-ring,
.rm-deco-tile:not(:hover):not(.is-selected):not(.is-previewing) .rm-avatar-ring::after {
    animation-play-state: paused;
}

/* ════════════════════════════════════════════════════════════════════════
   PICKER UI — trigger button + modal
   ════════════════════════════════════════════════════════════════════════ */

.rm-deco-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    box-sizing: border-box;
    background: rgba(167, 139, 250, .12);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, .35);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-deco-trigger:hover {
    background: rgba(167, 139, 250, .22);
    border-color: rgba(167, 139, 250, .55);
    color: #fff;
}
.rm-deco-trigger:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}

/* Mobile: collapse to a 36×36 icon-only button so it matches the settings
   gear next to it in the profile actions stack. The text label is hidden
   via font-size:0 (cheap, no markup change required). */
@media (max-width: 768px) {
    .rm-deco-trigger {
        width: 36px;
        height: 36px;
        padding: 0;
        gap: 0;
        font-size: 0;
        justify-content: center;
    }
    .rm-deco-trigger svg {
        width: 18px;
        height: 18px;
    }
}

/* Modal */
.rm-deco-modal[hidden] { display: none; }
.rm-deco-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.rm-deco-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    animation: rm-deco-fade .15s ease;
}
.rm-deco-modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    padding: 28px;
    animation: rm-deco-pop .12s cubic-bezier(.2, .8, .2, 1);
}
@keyframes rm-deco-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rm-deco-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.rm-deco-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.rm-deco-modal-close:hover { background: #2a2a2a; color: #fff; }

.rm-deco-modal-head { margin-bottom: 20px; }
.rm-deco-modal-head h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}
.rm-deco-modal-sub {
    margin: 0;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Tile grid */
.rm-deco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.rm-deco-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: #252525;
    border: 2px solid #2a2a2a;
    border-radius: 10px;
    cursor: pointer;
    color: #ccc;
    font-size: 12px;
    text-align: center;
    /* No transitions — every state change snaps. Fading border/background
       between hover/selected/idle felt sluggish when clicking between tiles. */
}
.rm-deco-tile:hover {
    border-color: #444;
    background: #2a2a2a;
}
.rm-deco-tile:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 2px;
}
.rm-deco-tile.is-selected {
    border-color: #a78bfa;
    background: #251f3d;
    color: #fff;
}
.rm-deco-tile-preview {
    /* No padding — ring glows extend via box-shadow which isn't clipped by
       the parent tile (no overflow:hidden on .rm-deco-tile), so the empty
       padding here was just adding dead vertical space. */
    display: inline-block;
}
/* Target the avatar img by parent context — Ultimate Member's get_avatar
   filter overwrites the class attr, dropping anything we pass via $args.
   So .rm-deco-tile-avatar never actually lands on the rendered <img>. */
.rm-deco-tile-preview img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    display: block;
    object-fit: cover;
}
.rm-deco-tile-label {
    font-weight: 600;
    line-height: 1.3;
}

/* Footer buttons */
.rm-deco-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid #2a2a2a;
}
.rm-deco-modal-foot button {
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background .15s ease, color .15s ease;
}
.rm-deco-cancel {
    background: transparent;
    color: #888;
    border: 1px solid #333 !important;
}
.rm-deco-cancel:hover { color: #fff; background: #2a2a2a; }
/* Save button — matches the Riftmana orange brand accent (used for Recruit
   role, Metafy CTA, supporters page link, etc.) so primary actions feel
   consistent across the site. */
.rm-deco-save {
    background: #ffa600;
    color: #1a1a1a;
    border: 1px solid #ffa600 !important;
    font-weight: 700;
}
.rm-deco-save:hover {
    background: #ffb833;
    border-color: #ffb833 !important;
}
.rm-deco-save:disabled { opacity: .6; cursor: wait; }

/* ════════════════════════════════════════════════════════════════════════
   UPGRADE VARIANT — non-Minions click the Decoration button and land here
   ════════════════════════════════════════════════════════════════════════ */

.rm-deco-upgrade-lead {
    margin: 0 0 18px;
    color: #cfcfcf;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Locked tile grid — same layout as picker tiles but non-interactive and
   visually muted, so it reads as a teaser. The rings still animate so users
   see what they'd get; pointer-events:none keeps them un-clickable. */
.rm-deco-grid-locked .rm-deco-tile {
    cursor: default;
    pointer-events: none;
    opacity: .55;
    transition: opacity .2s ease;
}
.rm-deco-grid-locked:hover .rm-deco-tile {
    opacity: .75;
}

/* CTA — anchor styled to match the orange Save button so the modal has a
   single primary-action visual language across both variants. */
.rm-deco-upgrade-cta {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: #ffa600;
    color: #1a1a1a;
    border: 1px solid #ffa600;
    transition: background .15s ease, border-color .15s ease;
}
.rm-deco-upgrade-cta:hover {
    background: #ffb833;
    border-color: #ffb833;
    color: #1a1a1a;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   RECRUIT VARIANT — active-ring callout above the locked Minion teaser
   ════════════════════════════════════════════════════════════════════════ */

/* Highlights the user's auto-assigned Recruit Glow with a subtle orange
   accent, so they know the ring they have is "theirs" before they see
   the locked Minion options pitched below. */
.rm-deco-recruit-current {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(255, 166, 0, .08);
    border: 1px solid rgba(255, 166, 0, .3);
    border-radius: 10px;
    margin-bottom: 18px;
}
.rm-deco-recruit-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rm-deco-recruit-name {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
}
.rm-deco-recruit-status {
    font-size: 11px;
    color: #ffa600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}