@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

@layer base, tweaks, exclusions, tokens;

@layer tweaks {
  /* hide btns in chatbox */
  .buttons__74017 *:not(.expression-picker-chat-input-button) {
    display: none;
  }
  /* Hide second button inside trailing_* token containers */
  /* Hide second child element inside trailing_* token containers */
  [class^="trailing_"] > a,
  [class*=" trailing_"] > a {
    display: none !important;
  }

/* Hide specific settings sidebar items (only first two) */
[data-settings-sidebar-item="family_center_panel"],
[data-settings-sidebar-item="authorized_apps_panel"] {
  display: none !important;
}

/* Hide the second nav > ul inside the settings sidebar container */
[data-list-id="settings-sidebar"] > nav > ul:nth-of-type(2) {
  display: none !important;
}

/* Apply semi-opaque token background to every guild nav item (server icons)
   that expose a `data-list-item-id` starting with `guildsnav___`. */
    [role="treeitem"],
    [role="treeitem"] {
        background: rgba(0,0,0,0.5) !important;
    }

/* Hide the first two ul elements inside #channels (descendants, not only direct children) */
#channels ul > div:nth-of-type(-n+2) {
  display: none !important;
}

@layer exclusions {
  /* Additional comment for clarity */
  /* Global transparent background rule.
     Preserve original backgrounds for emoji sprite images, channelTextArea_
     tokens (channel area overlays) and tooltip__ tokens. Apply transparent
     background to most structural elements so the page background shows.
  */
  form:not([class^="emojiSpriteImage_"]):not([class*=" emojiSpriteImage_"]):not([class^="emoji__"]):not([class*=" emoji__"]):not([class^="channelTextArea_"]):not([class*=" channelTextArea_"]):not([class^="tooltip__"]):not([class*=" tooltip__"]):not([role="treeitem"]):not(#emoji-picker-tab-panel):not(.glass-box),
  section:not([class^="emojiSpriteImage_"]):not([class*=" emojiSpriteImage_"]):not([class^="emoji__"]):not([class*=" emoji__"]):not([class^="channelTextArea_"]):not([class*=" channelTextArea_"]):not([class^="tooltip__"]):not([class*=" tooltip__"]):not([role="treeitem"]):not(#emoji-picker-tab-panel):not(.glass-box),
  nav:not([class^="emojiSpriteImage_"]):not([class*=" emojiSpriteImage_"]):not([class^="emoji__"]):not([class*=" emoji__"]):not([class^="channelTextArea_"]):not([class*=" channelTextArea_"]):not([class^="tooltip__"]):not([class*=" tooltip__"]):not([role="treeitem"]):not(#emoji-picker-tab-panel):not(.glass-box),
  main:not([class^="emojiSpriteImage_"]):not([class*=" emojiSpriteImage_"]):not([class^="emoji__"]):not([class*=" emoji__"]):not([class^="channelTextArea_"]):not([class*=" channelTextArea_"]):not([class^="tooltip__"]):not([class*=" tooltip__"]):not([role="treeitem"]):not(#emoji-picker-tab-panel):not(.glass-box),
  div:not([class^="emojiSpriteImage_"]):not([class*=" emojiSpriteImage_"]):not([class^="emoji__"]):not([class*=" emoji__"]):not([class^="channelTextArea_"]):not([class*=" channelTextArea_"]):not([class^="tooltip__"]):not([class*=" tooltip__"]):not([role="treeitem"]):not(#emoji-picker-tab-panel):not(.glass-box) {
      background: transparent !important;
  }
}



:root {
    font-size: clamp(calc(75%), calc(100%)) !important;

    /* Global colors */
    --clr-bg: #000;
    --clr-text: #fff;

    /* Glass effect variables */
    /* darker glass background per request */
    --glass-bg: rgba(0,0,0,0.5);
    --glass-blur: blur(20pt);
    --glass-border: 1px solid rgba(0,0,0,.3);
    --glass-shadow: 0 0 20px rgba(0,0,0,0.75), 0 0 12px rgba(255,255,255,0.08);
    /* subtle inner highlight to emulate the original border feel */
    --glass-inner-highlight: inset 0 1px 0 rgba(255,255,255,0.03);
    --glass-radius: 1em;

    /* Token backgrounds for popovers/popouts/tooltips/child wrappers */
    --token-bg: rgba(0,0,0,0.6);
    /* Darker token background (for tooltips / more opaque surfaces) */
    --token-bg-dark: rgba(0,0,0,0.6);

    /* Shining border variables */
    --shine-contrast: contrast(2);
    --shine-blur: blur(1pt);
    --shine-brightness: brightness(1.5);
    /* use rem by default but remain unit-agnostic (you may set 5em or 5rem) */
    --shine-distance: 5rem;

    /* Button accents */
    --btn-blue-bg: rgba(30,60,255,0.25);
    --btn-blue-border: rgba(30,60,255,0.6);
    --btn-blue-hover: rgba(30,60,255,0.45);
    --btn-blue-shadow: rgba(30,60,255,0.7);

    --btn-gray-bg: rgba(255,255,255,0.08);
    --btn-gray-border: rgba(255,255,255,0.25);
    --btn-gray-hover: rgba(255,255,255,0.15);
    --btn-gray-shadow: rgba(255,255,255,0.25);
}

/* For sidebar__* and page__* tokens that also have `glass-box`, enforce
   overflow hidden so layout doesn't scroll outside the glass container. */
[class^="sidebar__"].glass-box,
[class*=" sidebar__"].glass-box,
[class^="page__"].glass-box,
[class*=" page__"].glass-box,
[class^="authBox__"].glass-box,
[class*=" authBox__"].glass-box {
    overflow: hidden !important;
}

/* fix disord adding tint to sidebar content*/
   [class^="sidebarListRounded__"],
   [class*=" sidebarListRounded__"] {
     -webkit-backdrop-filter: unset !important;
     backdrop-filter: unset !important;
   }

 


/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Layout */
html, body {
    width: 100%;
    height: 100%;
    min-height: 100% !important;
    font-family: "Open Sans", sans-serif;
    /* Prefer global transparent backgrounds so the page background shows through */
    background: transparent !important;
    color: var(--clr-text);
    overflow: hidden;
}

/* SVG background */
#triSVG {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

    #triSVG g {
        mix-blend-mode: lighten;
    }

/* Glass box base */
    .glass-box,
    [data-mana-component="layer-modal"] {
        background: var(--glass-bg) !important;
        color: var(--clr-text) !important;
        border-radius: var(--glass-radius) !important;
        padding: 1em 2em;
        z-index: 1;
        overflow: hidden!important;
        position: relative;
        border: var(--glass-border) !important;
        box-shadow: var(--glass-shadow), var(--glass-inner-highlight) !important;
    }

        .glass-box::after,
     
        [data-mana-component="layer-modal"]::after {
            content: '';
            position: absolute;
            pointer-events: none;
            -webkit-backdrop-filter: var(--shine-contrast) var(--shine-blur) var(--shine-brightness);
            backdrop-filter: var(--shine-contrast) var(--shine-blur) var(--shine-brightness);
            /* expose the configured shine distance and an inverted value so callers can
           provide either em/rem and we can use the inverted value for outward insets */
            --distance: var(--shine-distance);
            --distance-inv: calc(var(--distance) * -1);
            border: solid transparent var(--distance);
            inset: var(--distance-inv);
            border-radius: calc(var(--distance) + var(--glass-radius));
            padding: 0.1em;
            mask: linear-gradient(#fff), linear-gradient(#fff);
            mask-clip: padding-box, content-box;
            mask-composite: exclude;
            height: 100% !important;
            inset-inline: var(--distance-inv) !important;
            background: unset !important;
            z-index: 0;
        }

        .glass-box::before,
 
        [data-mana-component="layer-modal"]::before {
            /* blurred backdrop behind the highlight */
            content: '';
            position: absolute;
            pointer-events: none;
            -webkit-backdrop-filter: var(--glass-blur);
            backdrop-filter: var(--glass-blur);
            inset: 0;
            border-radius: inherit;
            z-index: -1;
        }

/* If a sidebar token is rendered inside a dialog ([role="dialog"]),
   avoid applying the glass-box visual effect so the dialog backdrop
   remains consistent. This unsets backdrop filters, background, border
   and box-shadow for those sidebar containers. */
[role="dialog"] [class^="sidebar__"].glass-box,
[role="dialog"] [class*=" sidebar__"].glass-box {
  background: transparent !important;
  -webkit-backdrop-filter: unset !important;
  backdrop-filter: unset !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fullscreen layer modal: ensure it covers the viewport so glass covers background */
[data-mana-component="layer-modal"] {
    width: 98vw !important;
    height: 98vh !important;
    z-index: 0!important;
}

/* Navbar block */
.nav-box {
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* Content block */
.content-box {
    font-size: 0.9rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* SweetAlert2 popup reusing glass variables */
.swal2-popup {
    background: rgba(0,0,0,0.75); /* black base */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 16px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-highlight);
    color: #f0f0f0;
    font-family: 'Open Sans', sans-serif;
}

/* Title */
.swal2-title {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(255,255,255,0.25);
}

/* Content text */
.swal2-html-container {
    color: #dcdcdc;
    font-size: 0.95rem;
}

/* Buttons */
.swal2-styled {
    border-radius: 8px;
    padding: 0.6em 1.2em;
    font-weight: 600;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Confirm button */
.swal2-confirm {
    background: var(--btn-blue-bg);
    border: 1px solid var(--btn-blue-border);
    color: #fff;
}

    .swal2-confirm:hover {
        background: var(--btn-blue-hover);
        box-shadow: 0 0 12px var(--btn-blue-shadow);
    }

/* Cancel button */
.swal2-cancel {
    background: var(--btn-gray-bg);
    border: 1px solid var(--btn-gray-border);
    color: #eee;
}

    .swal2-cancel:hover {
        background: var(--btn-gray-hover);
        box-shadow: 0 0 12px var(--btn-gray-shadow);
    }

/* Input fields */
.swal2-input {
    background: rgba(0,0,0,0.6);
    border: var(--glass-border);
    color: #fff;
    border-radius: 8px;
    padding: 0.5em;
}

    .swal2-input:focus {
        border-color: var(--btn-blue-border);
        box-shadow: 0 0 8px var(--btn-blue-shadow);
    }


.navbar-brand {
    margin-left: 42px;
}

* {
    color: #ecf0f1;
}

#logo {
    position: absolute;
    left: 0;
    top: 0;
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: .75rem;
}


/* Disable all animations/transitions globally (no media query) */
*,
*::before,
*::after,
svg,
svg * {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  animation-play-state: paused !important;
  will-change: auto !important;
  scroll-behavior: auto !important;
}

/* Performance helpers: rendering isolation, culling and mobile fallbacks */
/* Isolate the SVG/background renderer so it repaints independently */
#triSVG {
  pointer-events: none; /* avoid hit-testing cost */
  contain: paint size layout; /* limits scope of layout/paint */
  will-change: transform, opacity; /* hint for compositing */
  transform: translateZ(0); /* promote to own layer */
  backface-visibility: hidden;
}

/* Hide any element with a class token that starts with `artwork_` */
[class^="artwork_"],
[class*=" artwork_"] {
  display: none !important;
}

/* Hide any element with a class token that starts with `qrLogin_` (QR code login) */
[class^="qrLogin_"],
[class*=" qrLogin_"] {
  display: none !important;
}

/* Hide upsell/merch promotional containers */
[class^="upsellContainer_"] ,
[class*=" upsellContainer_"] ,
[class^="merch"] ,
[class*=" merch"] {
  display: none !important;
}

/* Hide any element with a class token that starts with `notice__` (all notices) */
[class^="notice__"],
[class*=" notice__"] {
  display: none !important;
}

/* Hide everything except the first <header> inside `peopleColumn_*` containers */
/* First hide all direct children, then re-show the first header element */
[class^="peopleColumn_"] > *:not(:first-child),
[class*=" peopleColumn_"] > *:not(:first-child) {
  display: none !important;
}

/* Hide Wumpus graphic in Add Friend UI */
[class^="addFriendWumpusWrapper_"] ,
[class*=" addFriendWumpusWrapper_"] {
  display: none !important;
}
    
    /* Collapse banner containers */
    [class^="headerBar__"],
    [class*=" headerBar__"] {
        position:relative !important;
    }
    /* Collapse banner containers */
    [class^="bannerContainer__"],
    [class*=" bannerContainer__"] {
        display: none !important;
    }

 
/* hide discord loader */
[data-fade="false"] {
  display: none !important;
}

/* Hide vertical separators inside auth boxes (preserve other separators) */
[class^="authBox__"] [class^="verticalSeparator_"],
[class^="authBox__"] [class*=" verticalSeparator_"],
[class*=" authBox__"] [class^="verticalSeparator_"],
[class*=" authBox__"] [class*=" verticalSeparator_"] {
  display: none !important;
}
/* dont break login form layout */
[class^="authBox__"] [class^="verticalSeparator_"] {
  display: none !important;
}

/* dont break login form layout */
[class^="authBox__"] [class^="verticalSeparator_"]
{
  display: none !important;
}

/* remove logo from login page */
[class^="logoWithText_"],
[class*=" logoWithText_"] {
  display: none !important;
}

/* profile__XX width: 100 too make full profile full width */
[class^="profile_"] ,
[class*=" profile_"] {
  width: 100% !important;
  align-items: center !important;
}

/* Precisely hide only the trailing items described in the provided DOM structure.
   Structural selector only (no inner class tokens): hide the last three inner
   `div` children inside the scroller under an `itemsContainer_*`. This will
   remove the tutorial container and the last two list items at the end. */
[class^="itemsContainer_"] > div > *:not([role="group"]):not(:first-child),
[class*=" itemsContainer_"] > div > *:not([role="group"]):not(:first-child) {
  /* hide all children of the scroller div under itemsContainer_* that are not role="group"
     and are not the first child */
  display: none !important;
}



/* Set semi-opaque white background for child wrapper tokens */
[class^="childWrapper_"] ,
[class*=" childWrapper_"] {
  background: var(--token-bg) !important;
  background-color: var(--token-bg) !important;
  border-radius: var(--glass-radius) !important;
}

/* Popovers: dark semi-opaque background without glass effect */
[class^="popover_"] ,
[class*=" popover_"] {
  background: var(--token-bg) !important;
  background-color: var(--token-bg) !important;
  border-radius: var(--glass-radius) !important;
}

/* Popouts: dark semi-opaque background for tokens starting with popout_ */
[class^="popout_"] ,
[class*=" popout_"] {
  background: var(--token-bg) !important;
  background-color: var(--token-bg) !important;
  border-radius: var(--glass-radius) !important;
}
/* Tooltips: dark semi-opaque background for tokens starting with tooltip__ */
[class^="tooltip__"] ,
[class*=" tooltip__"] {
  background: var(--token-bg-dark) !important;
  background-color: var(--token-bg-dark) !important;
  border-radius: var(--glass-radius) !important;
}
/* Channel text area: dark background for the second direct div child of tokens starting with channelTextArea_ */
[class^="channelTextArea_"] ,
[class*=" channelTextArea_"] {
    /* Apply token background directly to the target element (no pseudo-element).
       This will style the actual channel text area container. */
    background: var(--token-bg) !important;
    background-color: var(--token-bg) !important;
    border-radius: var(--glass-radius) !important;
}
/* Emoji picker tabs: dark background */
#emoji-picker-tab-panel {
    background: var(--token-bg) !important;
}

/* Overrides: hide anchors inside trailing_* containers (anchor-only selector per request) */
[class^="trailing_"] > a,
[class*=" trailing_"] > a {
  display: none !important;
}

/* In private channels nav, hide first-level items in the UL except the
   friends button container or wrapper tokens */
[class^="privateChannels_"] ul > *:not([class^="friendsButtonContainer_"]):not([class*=" friendsButtonContainer_"]):not([class^="wrapper__"]):not([class*=" wrapper__"]) {
  display: none !important;
}