/* Owner text effects. Values are constrained by the server-side BBCode parser. */
.methrpTextEffect {
    --methrp-fx-speed: 4s;
    --methrp-fx-color1: #ff58ce;
    --methrp-fx-color2: #58dbff;
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transform-origin: center;
}

.methrpTextEffect__text,
.methrpTextEffect--editor {
    color: #ff8ddd;
    font-weight: 750;
    text-decoration: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.methrpTextEffect__text { display: inline; }

.methrpTextEffect--palette-rainbow {
    --methrp-fx-gradient: linear-gradient(90deg, #ff6398 0%, #ffc65c 8.333%, #a2ef76 16.667%, #66e7ef 25%, #aaa0ff 33.333%, #f28aef 41.667%, #ff6398 50%, #ffc65c 58.333%, #a2ef76 66.667%, #66e7ef 75%, #aaa0ff 83.333%, #f28aef 91.667%, #ff6398 100%);
}

.methrpTextEffect--palette-neon {
    --methrp-fx-gradient: linear-gradient(90deg, #ff67df 0%, #a296ff 12.5%, #65f1ff 25%, #a296ff 37.5%, #ff67df 50%, #a296ff 62.5%, #65f1ff 75%, #a296ff 87.5%, #ff67df 100%);
}

.methrpTextEffect--palette-sunset {
    --methrp-fx-gradient: linear-gradient(90deg, #ff79b4 0%, #ff9c73 12.5%, #ffdc7b 25%, #ff9c73 37.5%, #ff79b4 50%, #ff9c73 62.5%, #ffdc7b 75%, #ff9c73 87.5%, #ff79b4 100%);
}

.methrpTextEffect--palette-ice {
    --methrp-fx-gradient: linear-gradient(90deg, #90baff 0%, #8de8ff 12.5%, #ecfcff 25%, #8de8ff 37.5%, #90baff 50%, #8de8ff 62.5%, #ecfcff 75%, #8de8ff 87.5%, #90baff 100%);
}

.methrpTextEffect--palette-custom {
    --methrp-fx-gradient: linear-gradient(90deg, var(--methrp-fx-color1) 0%, var(--methrp-fx-color2) 25%, var(--methrp-fx-color1) 50%, var(--methrp-fx-color2) 75%, var(--methrp-fx-color1) 100%);
}

/* The two identical gradient halves make every loop seamless. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .methrpTextEffect__text,
    .methrpTextEffect.methrpTextEffect--editor {
        color: transparent;
        background-image: var(--methrp-fx-gradient, linear-gradient(90deg, #ff67df, #65f1ff, #ff67df));
        background-size: 200% 100%;
        background-position: 0% 50%;
        background-clip: text;
        -webkit-background-clip: text;
        animation: methrpFxColour var(--methrp-fx-speed) linear infinite;
    }

    .methrpTextEffect.methrpTextEffect--editor {
        display: inline-block;
        animation: methrpFxColour var(--methrp-fx-speed) linear infinite, var(--methrp-fx-motion, none);
    }
}

.methrpTextEffect--glow-0 { filter: none; }
.methrpTextEffect--glow-1 { filter: drop-shadow(0 0 0.035em rgb(167 111 255 / 45%)); }
.methrpTextEffect--glow-2 { filter: drop-shadow(0 0 0.06em rgb(177 113 255 / 60%)) drop-shadow(0 0 0.14em rgb(86 206 255 / 22%)); }
.methrpTextEffect--glow-3 { filter: drop-shadow(0 0 0.07em rgb(210 133 255 / 72%)) drop-shadow(0 0 0.2em rgb(98 197 255 / 35%)); }

.methrpTextEffect--scale-100 { font-size: 1em; }
.methrpTextEffect--scale-125 { font-size: 1.25em; }
.methrpTextEffect--scale-150 { font-size: 1.5em; }
.methrpTextEffect--scale-200 { font-size: 2em; }

.methrpTextEffect--motion-none { --methrp-fx-motion: none; animation: none; }
.methrpTextEffect--motion-wave { --methrp-fx-motion: methrpFxWave var(--methrp-fx-speed) ease-in-out infinite; animation: var(--methrp-fx-motion); }
.methrpTextEffect--motion-pulse { --methrp-fx-motion: methrpFxPulse var(--methrp-fx-speed) ease-in-out infinite; animation: var(--methrp-fx-motion); }
.methrpTextEffect--motion-float { --methrp-fx-motion: methrpFxFloat var(--methrp-fx-speed) ease-in-out infinite; animation: var(--methrp-fx-motion); }

@keyframes methrpFxColour {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@keyframes methrpFxWave {
    0%, 100% { transform: translateY(0.025em) rotate(-1deg); }
    50% { transform: translateY(-0.055em) rotate(1deg); }
}

@keyframes methrpFxPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

@keyframes methrpFxFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.1em); }
}

/* Everything below is scoped to the effect customizer. */
.methrpFxDialog {
    --methrp-fx-panel: #171a23;
    --methrp-fx-border: #343949;
    --methrp-fx-muted: #afb6cc;
    --methrp-fx-accent: #c4a5ff;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    padding: 4px;
    color: #f2f3fa;
    color-scheme: dark;
}

.methrpFxDialog *,
.methrpFxDialog *::before,
.methrpFxDialog *::after {
    box-sizing: border-box;
}

.methrpFxDialog__intro,
.methrpFxDialog__hint {
    margin: 0 0 16px;
    color: var(--methrp-fx-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.methrpFxDialog__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 156px;
    margin-bottom: 22px;
    padding: 24px 24px 30px;
    overflow: hidden;
    border: 1px solid #41415e;
    border-radius: 14px;
    background: radial-gradient(ellipse at 15% 0%, rgb(103 65 157 / 25%), transparent 65%), radial-gradient(ellipse at 95% 100%, rgb(20 137 169 / 16%), transparent 60%), #12141e;
    text-align: center;
}

.methrpFxDialog__previewLabel {
    color: #b6bfd9;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.methrpFxDialog__previewText {
    width: 100%;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.methrpFxDialog__presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 22px;
}

.methrpFxDialog__preset {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid var(--methrp-fx-border);
    border-radius: 9px;
    background: var(--methrp-fx-panel);
    color: #e2e5f3;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.methrpFxDialog__preset:hover {
    border-color: #82719f;
    background: #242334;
}

.methrpFxDialog__preset[aria-pressed="true"],
.methrpFxDialog__preset.is-active {
    border-color: var(--methrp-fx-accent);
    background: #31243f;
    color: #f3eaff;
    box-shadow: inset 0 0 0 1px rgb(196 165 255 / 20%);
}

.methrpFxDialog__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin-bottom: 20px;
}

.methrpFxDialog__field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.methrpFxDialog__field--wide { grid-column: 1 / -1; }

.methrpFxDialog__field > label,
.methrpFxDialog__field > .methrpFxDialog__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #e4e6f1;
    font-size: 0.85rem;
    font-weight: 600;
}

.methrpFxDialog__field output {
    color: var(--methrp-fx-accent);
    font-variant-numeric: tabular-nums;
}

.methrpFxDialog select,
.methrpFxDialog input[type="text"],
.methrpFxDialog input[type="number"] {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid var(--methrp-fx-border);
    border-radius: 8px;
    background-color: var(--methrp-fx-panel);
    color: #f2f3fa;
    font: inherit;
    font-size: 0.9rem;
}

.methrpFxDialog select option { background: var(--methrp-fx-panel); color: #f2f3fa; }

.methrpFxDialog input[type="range"] {
    width: 100%;
    min-height: 30px;
    margin: 0;
    accent-color: var(--methrp-fx-accent);
    cursor: pointer;
}

.methrpFxDialog input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid var(--methrp-fx-border);
    border-radius: 8px;
    background: var(--methrp-fx-panel);
    cursor: pointer;
}

.methrpFxDialog input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.methrpFxDialog input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.methrpFxDialog input[type="color"]::-moz-color-swatch { border: 0; border-radius: 4px; }

.methrpFxDialog__colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.methrpFxDialog [hidden] { display: none !important; }

.methrpFxDialog :is(button, select, input):focus-visible {
    outline: 2px solid #d4baff;
    outline-offset: 3px;
}

.methrpFxDialog :is(button, select, input):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.methrpFxDialog__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--methrp-fx-border);
}

.methrpFxDialog__actions button { min-height: 42px; }
.methrpFxDialog__actions .methrpFxDialog__remove { margin-right: auto; }
.methrpFxDialog__hint:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .methrpFxDialog { padding: 0; }
    .methrpFxDialog__preview { min-height: 140px; padding: 22px 16px 26px; }
    .methrpFxDialog__grid { gap: 16px; }
    .methrpFxDialog__presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .methrpFxDialog__actions { gap: 8px; }
    .methrpFxDialog__actions button { flex: 1 1 auto; }
}

@media (max-width: 380px) {
    .methrpFxDialog__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .methrpTextEffect,
    .methrpTextEffect__text { animation: none !important; transform: none !important; }
    .methrpFxDialog * { transition: none !important; }
}

@media (forced-colors: active) {
    .methrpTextEffect { filter: none; }
    .methrpTextEffect__text,
    .methrpTextEffect.methrpTextEffect--editor { color: CanvasText; background: none; animation: none; }
}

@media print {
    .methrpTextEffect { filter: none !important; animation: none !important; transform: none !important; }
    .methrpTextEffect__text,
    .methrpTextEffect.methrpTextEffect--editor { color: #000 !important; background: none !important; animation: none !important; }
}