/* back-to-top.css */
/* Shared Nexus Worlds Back to Top button. */

/* -------------------------------------------------------------------------
   Base Button Behavior
   Mobile-first defaults.
------------------------------------------------------------------------- */

.back-to-top {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1000;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    text-decoration: none;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

html {
    scroll-behavior: smooth;
}

/* Desktop */

@media (min-width: 801px) {
    .back-to-top {
        right: 20px;
        bottom: 20px;

        width: 56px;
        height: 56px;
    }
}

/* -------------------------------------------------------------------------
   NEXUS / MAIN SITE
   Comic-panel yellow button.
------------------------------------------------------------------------- */

body[data-nw-section="main"] .back-to-top,
body[data-nw-section="nexus"] .back-to-top {
    background: #ffe066;
    color: #111;

    border: 4px solid #111;
    border-radius: 8px;

    font-family: "Bangers", system-ui;
    font-size: 1.75rem;
    line-height: 1;

    box-shadow: 5px 5px 0 #111;
    transform: rotate(-6deg);
    transform-origin: center;
}

body[data-nw-section="main"] .back-to-top:hover,
body[data-nw-section="main"] .back-to-top:focus-visible,
body[data-nw-section="nexus"] .back-to-top:hover,
body[data-nw-section="nexus"] .back-to-top:focus-visible {
    background: #ffd43b;
    box-shadow: 7px 7px 0 #111;
    transform: rotate(0deg) scale(1.08);
}

body[data-nw-section="main"] .back-to-top:active,
body[data-nw-section="nexus"] .back-to-top:active {
    box-shadow: 3px 3px 0 #111;
    transform: rotate(0deg) scale(0.96);
}

/* Nexus / Main - Desktop */

@media (min-width: 801px) {
    body[data-nw-section="main"] .back-to-top,
    body[data-nw-section="nexus"] .back-to-top {
        font-size: 2rem;
    }
}

/* -------------------------------------------------------------------------
   PULSE
   Neon signal / media-feed button.
------------------------------------------------------------------------- */

body[data-nw-section="pulse"] .back-to-top {
    background:
        linear-gradient(
            135deg,
            rgba(5, 14, 22, 0.96),
            rgba(10, 34, 48, 0.92)
        );

    color: var(--pulse-cyan, #38f6ff);

    border: 1px solid var(--pulse-cyan, #38f6ff);
    border-radius: 999px;

    font-family: var(--font-title-small-family, "Orbitron", system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;

    box-shadow:
        0 0 0 1px rgba(56, 246, 255, 0.18),
        0 0 18px rgba(56, 246, 255, 0.32),
        0 0 36px rgba(255, 49, 88, 0.16),
        0 12px 28px rgba(0, 0, 0, 0.55);

    text-shadow:
        0 0 8px rgba(56, 246, 255, 0.75),
        0 0 14px rgba(56, 246, 255, 0.45);

    transform: translateY(0);
}

body[data-nw-section="pulse"] .back-to-top::before {
    content: "";
    position: absolute;
    inset: 6px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;

    pointer-events: none;
}

body[data-nw-section="pulse"] .back-to-top:hover,
body[data-nw-section="pulse"] .back-to-top:focus-visible {
    background: var(--pulse-cyan, #38f6ff);
    color: #041018;
    border-color: var(--pulse-white, #ffffff);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 22px rgba(56, 246, 255, 0.65),
        0 0 44px rgba(56, 246, 255, 0.32),
        0 12px 28px rgba(0, 0, 0, 0.55);

    text-shadow: none;
    transform: translateY(-3px) scale(1.04);
}

body[data-nw-section="pulse"] .back-to-top:active {
    transform: translateY(0) scale(0.96);
}

/* Pulse - Desktop */

@media (min-width: 801px) {
    body[data-nw-section="pulse"] .back-to-top {
        font-size: 1.35rem;
    }
}

/* -------------------------------------------------------------------------
   FORGE
   Pulse-family utility button with ember/editor identity.
------------------------------------------------------------------------- */

body[data-nw-section="forge"] .back-to-top {
    background:
        linear-gradient(
            135deg,
            rgba(5, 14, 22, 0.96),
            rgba(32, 18, 14, 0.94)
        );

    color: #f7d9b2;

    border: 1px solid var(--pulse-red, #ff3158);
    border-radius: 999px;

    font-family: var(--font-title-small-family, "Orbitron", system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;

    box-shadow:
        0 0 0 1px rgba(255, 49, 88, 0.18),
        0 0 18px rgba(255, 49, 88, 0.28),
        0 0 36px rgba(240, 160, 72, 0.14),
        0 12px 28px rgba(0, 0, 0, 0.55);

    text-shadow:
        0 0 8px rgba(247, 217, 178, 0.65),
        0 0 14px rgba(255, 49, 88, 0.35);

    transform: translateY(0);
}

body[data-nw-section="forge"] .back-to-top::before {
    content: "";
    position: absolute;
    inset: 6px;

    border: 1px solid rgba(247, 217, 178, 0.18);
    border-radius: inherit;

    pointer-events: none;
}

body[data-nw-section="forge"] .back-to-top:hover,
body[data-nw-section="forge"] .back-to-top:focus-visible {
    background: var(--pulse-red, #ff3158);
    color: #fff6e8;
    border-color: #f7d9b2;

    box-shadow:
        0 0 0 1px rgba(247, 217, 178, 0.35),
        0 0 22px rgba(255, 49, 88, 0.65),
        0 0 44px rgba(240, 160, 72, 0.28),
        0 12px 28px rgba(0, 0, 0, 0.55);

    text-shadow: none;
    transform: translateY(-3px) scale(1.04);
}

body[data-nw-section="forge"] .back-to-top:active {
    transform: translateY(0) scale(0.96);
}

/* Forge - Desktop */

@media (min-width: 801px) {
    body[data-nw-section="forge"] .back-to-top {
        font-size: 1.35rem;
    }
}

/* -------------------------------------------------------------------------
   FORGE / WORLD ANVIL
   Arcane terminal button with anvil-forge identity.
------------------------------------------------------------------------- */

body[data-nw-section="forge-world-anvil"] .back-to-top,
body[data-nw-section="world-anvil"] .back-to-top {
    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255, 209, 102, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(7, 16, 24, 0.98),
            rgba(16, 32, 48, 0.96) 52%,
            rgba(34, 22, 12, 0.94)
        );

    color: #ffd166;

    border: 1px solid rgba(119, 230, 255, 0.72);
    border-radius: 14px;

    font-family: var(--font-title-small-family, "Orbitron", system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;

    box-shadow:
        0 0 0 1px rgba(255, 209, 102, 0.14),
        0 0 18px rgba(119, 230, 255, 0.28),
        0 0 34px rgba(255, 209, 102, 0.16),
        0 14px 30px rgba(0, 0, 0, 0.58);

    text-shadow:
        0 0 8px rgba(255, 209, 102, 0.72),
        0 0 14px rgba(119, 230, 255, 0.38);

    transform: translateY(0) rotate(-2deg);
}

body[data-nw-section="forge-world-anvil"] .back-to-top::before,
body[data-nw-section="world-anvil"] .back-to-top::before {
    content: "";
    position: absolute;
    inset: 6px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    pointer-events: none;
}

body[data-nw-section="forge-world-anvil"] .back-to-top::after,
body[data-nw-section="world-anvil"] .back-to-top::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 1px solid rgba(255, 209, 102, 0.18);
    border-radius: 18px;

    opacity: 0.65;
    pointer-events: none;
}

body[data-nw-section="forge-world-anvil"] .back-to-top:hover,
body[data-nw-section="forge-world-anvil"] .back-to-top:focus-visible,
body[data-nw-section="world-anvil"] .back-to-top:hover,
body[data-nw-section="world-anvil"] .back-to-top:focus-visible {
    background:
        linear-gradient(
            135deg,
            rgba(119, 230, 255, 0.96),
            rgba(255, 209, 102, 0.95)
        );

    color: #071018;
    border-color: #fff6d8;

    box-shadow:
        0 0 0 1px rgba(255, 246, 216, 0.5),
        0 0 24px rgba(119, 230, 255, 0.62),
        0 0 46px rgba(255, 209, 102, 0.36),
        0 14px 30px rgba(0, 0, 0, 0.58);

    text-shadow: none;
    transform: translateY(-3px) rotate(0deg) scale(1.05);
}

body[data-nw-section="forge-world-anvil"] .back-to-top:active,
body[data-nw-section="world-anvil"] .back-to-top:active {
    transform: translateY(0) rotate(0deg) scale(0.96);
}

/* Forge / World Anvil - Desktop */

@media (min-width: 801px) {
    body[data-nw-section="forge-world-anvil"] .back-to-top,
    body[data-nw-section="world-anvil"] .back-to-top {
        font-size: 1.3rem;
    }
}

/* -------------------------------------------------------------------------
   GENERATORS
   Placeholder skin for later.
------------------------------------------------------------------------- */

body[data-nw-section="generator"] .back-to-top {
    background: rgba(32, 24, 18, 0.94);
    color: #f4ead8;

    border: 2px solid #f4ead8;
    border-radius: 999px;

    font-family: Georgia, serif;
    font-size: 1.25rem;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body[data-nw-section="generator"] .back-to-top:hover,
body[data-nw-section="generator"] .back-to-top:focus-visible {
    background: #f4ead8;
    color: #241812;

    transform: translateY(-3px);
}

/* Generators - Desktop */

@media (min-width: 801px) {
    body[data-nw-section="generator"] .back-to-top {
        font-size: 1.4rem;
    }
}