@font-face {
    font-family: "TNOSuperTitle";
    src: url("./asset-library/generated-assets/super-events/fonts/web/AldrichTNOV13.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "TNOSuperBody";
    src: url("./asset-library/generated-assets/super-events/fonts/web/BombardierTNOV6.otf") format("opentype");
    font-display: swap;
}

.megaWorkbenchModule--superEvent {
    grid-template-rows: 336px;
    width: 377px;
    min-height: 336px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translate3d(1110px, 370px, 0);
}

.megaSuperEventMount {
    display: grid;
    place-items: center;
    width: 377px;
    height: 336px;
    overflow: hidden;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 44%, rgba(54, 72, 70, 0.16), transparent 62%),
        rgba(3, 7, 7, 0.82);
}

.megaSuperEventStage {
    position: relative;
    width: 377px;
    height: 336px;
    overflow: hidden;
    contain: strict;
}

.megaSuperEventCanvas {
    position: absolute;
    left: 0;
    top: 29px;
    width: 588px;
    height: 480px;
    overflow: visible;
    color: #fff;
    transform: scale(0.64);
    transform-origin: left top;
    pointer-events: none;
    contain: layout style;
}

.megaSuperEventImage {
    position: absolute;
    left: 6px;
    top: 7px;
    z-index: 1;
    display: block;
    width: 573px;
    height: 455px;
    object-fit: cover;
    background: #050808;
}

.megaSuperEventTitleSurface {
    position: absolute;
    left: 7px;
    top: -45px;
    z-index: 0;
    width: 570px;
    height: 128px;
    border: 64px solid transparent;
    border-image:
        url("./asset-library/generated-assets/super-events/ui/tiled_bg.webp")
        64 fill / 64px / 0 stretch;
    box-sizing: border-box;
    background: none;
}

.megaSuperEventTitle {
    position: absolute;
    left: 7px;
    top: -27px;
    z-index: 8;
    display: block;
    width: 580px;
    height: 24px;
    overflow: hidden;
    color: rgb(178, 201, 194);
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 23px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow:
        1px 1px 0 #000,
        -1px -1px 0 #000,
        0 0 4px #000;
}

.megaSuperEventUnderlay {
    position: absolute;
    left: 26px;
    top: 280px;
    z-index: 3;
    display: block;
    width: 550px;
    height: 137px;
}

.megaSuperEventQuote {
    position: absolute;
    left: 120px;
    top: 285px;
    z-index: 5;
    display: block;
    width: 455px;
    height: 173px;
    overflow: hidden;
    color: #fff;
    font-family: "WenHanJianZhu", "PingFang SC", sans-serif;
    font-size: 22px;
    line-height: 25px;
    text-align: right;
    white-space: pre-line;
    text-shadow: 1px 1px 2px #000;
}

.megaSuperEventOption {
    position: absolute;
    left: 183px;
    top: 423px;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 221px;
    height: 36px;
    overflow: hidden;
    box-sizing: border-box;
    color: #fff;
    background:
        url("./asset-library/generated-assets/super-events/ui/button_221x34.webp")
        center / 221px 36px no-repeat;
    font-family: "WenHanJianZhu", "PingFang SC", sans-serif;
    font-size: 22px;
    line-height: 25px;
    text-align: center;
    text-shadow: 1px 1px 2px #000;
}

.megaSuperEventFrame {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 585px;
    height: 480px;
    border: 71px solid transparent;
    border-right-width: 64px;
    border-left-width: 64px;
    border-image:
        url("./asset-library/generated-assets/super-events/ui/tiled_window_bigevent_border.webp")
        71 64 / 71px 64px / 0 stretch;
    box-sizing: border-box;
}

.megaSuperEventNuclearFrame,
.megaSuperEventNuclearTitle {
    position: absolute;
    z-index: 6;
    display: none;
    pointer-events: none;
}

.megaSuperEventNuclearFrame {
    left: 0;
    top: 0;
    width: 585px;
    height: 480px;
}

.megaSuperEventNuclearTitle {
    left: 7px;
    top: -45px;
    width: 569px;
    height: 63px;
}

.megaSuperEventCanvas[data-nuclear="true"] .megaSuperEventNuclearFrame,
.megaSuperEventCanvas[data-nuclear="true"] .megaSuperEventNuclearTitle {
    display: block;
}

.megaSuperEventCanvas[data-nuclear="true"] .megaSuperEventUnderlay,
.megaSuperEventCanvas[data-nuclear="true"] .megaSuperEventQuote {
    display: none;
}

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

.megaSuperEventEditor {
    display: grid;
    align-content: start;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 9px 8px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-color: #5c7772 #070b0b;
}

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

.megaSuperEventCategories button,
.megaSuperEventEventList button,
.megaSuperEventActions button {
    min-width: 0;
    min-height: 34px;
    padding: 4px 8px;
    border: 5px solid transparent;
    border-image:
        url("./assets/interface-ui/button-medium.webp")
        7 12 fill / 5px 7px / 0 stretch;
    box-sizing: border-box;
    color: #cdd8d4;
    background: #0b1110;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 10px;
    cursor: pointer;
}

.megaSuperEventCategories button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    text-align: left;
}

.megaSuperEventCategories button small {
    color: #71837e;
    font-size: 8px;
}

.megaSuperEventCategories button small::after {
    margin-left: 5px;
    color: #8fa39d;
    content: "▸";
}

.megaSuperEventCategories button[aria-expanded="true"] small::after {
    color: #c8e6df;
    content: "▾";
}

.megaSuperEventCategories button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f2f5f2;
    filter: brightness(1.18);
    box-shadow: inset 0 0 0 1px rgba(91, 199, 195, 0.48);
}

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

.megaSuperEventEventList {
    display: grid;
    gap: 3px;
    max-height: 220px;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(78, 104, 99, 0.6);
    box-sizing: border-box;
    background:
        linear-gradient(rgba(5, 11, 11, 0.93), rgba(7, 13, 12, 0.95)),
        url("./assets/interface-ui/tile-internal-crt.webp")
        center / 150px 150px repeat;
    box-shadow:
        inset 0 0 16px rgba(0, 0, 0, 0.72),
        0 2px 7px rgba(0, 0, 0, 0.46);
    scrollbar-color: #5c7772 #070b0b;
}

.megaSuperEventEventList button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 3px 8px;
    border-width: 4px;
    border-image-width: 4px 6px;
    font-size: 9px;
    text-align: left;
}

.megaSuperEventEventList button span,
.megaSuperEventEventList button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.megaSuperEventEventList button small {
    max-width: 260px;
    color: #9aada7;
    font-size: 8px;
    letter-spacing: 0;
}

.megaSuperEventEventList button[aria-selected="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f3f6f3;
    filter: brightness(1.15);
}

.megaSuperEventEventList button[aria-selected="true"] small {
    color: #d0ded9;
}

.megaSuperEventSelectors {
    display: grid;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(72, 93, 89, 0.66);
    box-sizing: border-box;
    background: rgba(5, 11, 11, 0.9);
    box-shadow:
        inset 0 0 13px rgba(0, 0, 0, 0.6),
        0 2px 7px rgba(0, 0, 0, 0.44);
}

.megaSuperEventSelectors label,
.megaSuperEventSelectorRow,
.megaSuperEventCopyField {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 36px;
}

.megaSuperEventSelectors label[hidden] {
    display: none;
}

.megaSuperEventSelectors label > span,
.megaSuperEventSelectorRow > span,
.megaSuperEventCopyField > span {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 36px;
    color: #81908c;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.08em;
}

.megaSuperEventSelectorRow {
    min-height: 52px;
}

.megaSuperEventBackgroundOpen {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 4px 10px;
    overflow: hidden;
    border: 6px solid transparent;
    border-image:
        url("./assets/interface-ui/find-editbox.webp")
        12 22 fill / 6px 10px / 0 stretch;
    box-sizing: border-box;
    color: #e5ece8;
    background: #041014;
    cursor: pointer;
    text-align: left;
}

.megaSuperEventBackgroundOpen > img {
    display: block;
    width: 58px;
    height: 38px;
    border: 1px solid rgba(112, 145, 137, 0.62);
    box-sizing: border-box;
    object-fit: cover;
    background: #020707;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.72);
}

.megaSuperEventBackgroundOpen > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.megaSuperEventBackgroundOpen strong,
.megaSuperEventBackgroundOpen small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.megaSuperEventBackgroundOpen strong {
    color: #edf3ef;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 10px;
    font-weight: 500;
}

.megaSuperEventBackgroundOpen small {
    color: #849791;
    font-size: 8px;
}

.megaSuperEventBackgroundOpen b {
    color: #8dd4cf;
    font-size: 9px;
    font-weight: 500;
}

.megaSuperEventSelectors select,
.megaSuperEventCopyField input,
.megaSuperEventCopyField textarea {
    appearance: none;
    width: 100%;
    min-width: 0;
    border: 6px solid transparent;
    border-image:
        url("./assets/interface-ui/find-editbox.webp")
        12 22 fill / 6px 10px / 0 stretch;
    outline: 0;
    box-sizing: border-box;
    color: #e5ece8;
    background-color: #041014;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 11px;
    text-shadow: 0 1px #000;
}

.megaSuperEventSelectors select,
.megaSuperEventCopyField input {
    height: 36px;
    padding: 0 34px;
    line-height: 24px;
}

.megaSuperEventSelectors select {
    appearance: none;
    height: 36px;
    line-height: 24px;
    background:
        url("./assets/interface-ui/scroll-down.webp")
        calc(100% - 10px) center / 11px 11px no-repeat,
        #041014;
}

.megaSuperEventCopyFields {
    display: grid;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(72, 93, 89, 0.66);
    box-sizing: border-box;
    background: rgba(5, 11, 11, 0.9);
    box-shadow:
        inset 0 0 13px rgba(0, 0, 0, 0.6),
        0 2px 7px rgba(0, 0, 0, 0.44);
}

.megaSuperEventCopyField--quote {
    align-items: start;
}

.megaSuperEventCopyField--quote > span {
    padding-top: 9px;
    box-sizing: border-box;
}

.megaSuperEventCopyField textarea {
    min-height: 104px;
    max-height: 220px;
    padding: 8px 34px;
    overflow: auto;
    font-family: "WenHanJianZhu", "PingFang SC", sans-serif;
    line-height: 18px;
    resize: vertical;
    white-space: pre-wrap;
}

.megaSuperEventCopyField--title input {
    font-family: "RuiZheng", "PingFang SC", sans-serif;
}

.megaSuperEventCopyField--option input {
    font-family: "WenHanJianZhu", "PingFang SC", sans-serif;
}

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

.megaSuperEventActions button:disabled {
    cursor: default;
    filter: grayscale(0.75) brightness(0.55);
}

.megaSuperEventCategories button:hover:not(:disabled),
.megaSuperEventEventList button:hover:not(:disabled),
.megaSuperEventActions button:hover:not(:disabled),
.megaSuperEventBackgroundOpen:hover {
    filter: brightness(1.16);
}

.megaSuperEventCategories button:focus-visible,
.megaSuperEventEventList button:focus-visible,
.megaSuperEventSelectors select:focus-visible,
.megaSuperEventBackgroundOpen:focus-visible,
.megaSuperEventCopyField input:focus-visible,
.megaSuperEventCopyField textarea:focus-visible,
.megaSuperEventActions button:focus-visible {
    outline: 1px solid #63cecb;
    outline-offset: 1px;
}

.megaSuperEventEditor[data-loading="true"] {
    opacity: 0.65;
    pointer-events: none;
}

.megaSuperEventEditor[data-load-error="true"] .megaSuperEventSelectors {
    border-color: rgba(174, 71, 71, 0.8);
}

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

.megaSuperEventBackgroundLibrary {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: 64px auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: #e8efeb;
    background:
        linear-gradient(rgba(3, 8, 8, 0.97), rgba(5, 10, 9, 0.99)),
        url("./assets/interface-ui/tile-internal-crt.webp")
        center / 220px 220px repeat;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8);
}

.megaSuperEventBackgroundLibraryHeader {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 5px 14px;
    border-bottom: 6px solid transparent;
    border-image:
        url("./assets/interface-ui/tile-frontend-bottom.webp")
        28 30 70 / 0 0 6px 0 / 0 stretch;
    box-sizing: border-box;
    background:
        url("./assets/interface-ui/header-wider.webp")
        center / auto 62px repeat-x,
        #171a19;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.76);
}

.megaSuperEventBackgroundLibraryHeader > div {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.megaSuperEventBackgroundLibraryHeader small {
    color: #91a19c;
    font-size: 9px;
    letter-spacing: 0.16em;
}

.megaSuperEventBackgroundLibraryHeader h2 {
    margin: 0;
    color: #f0f4f1;
    font-family: "WenHanJianZhu", "RuiZheng", "PingFang SC", sans-serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.08em;
}

.megaSuperEventBackgroundLibraryHeader button,
.megaSuperEventBackgroundCategories button {
    min-height: 36px;
    padding: 4px 12px;
    border: 6px solid transparent;
    border-image:
        url("./assets/interface-ui/button-medium.webp")
        7 12 fill / 6px 9px / 0 stretch;
    box-sizing: border-box;
    color: #dce6e1;
    background: #09100f;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 10px;
    cursor: pointer;
}

.megaSuperEventBackgroundLibraryHeader button:first-child {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
}

.megaSuperEventBackgroundTools {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(250px, 390px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(78, 106, 99, 0.6);
    box-sizing: border-box;
    background: rgba(5, 11, 11, 0.95);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.48);
}

.megaSuperEventBackgroundTools > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.megaSuperEventBackgroundTools > label > span,
#megaSuperEventBackgroundCount {
    color: #91a49e;
    font-size: 10px;
    white-space: nowrap;
}

.megaSuperEventBackgroundTools input {
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 24px;
    border: 6px solid transparent;
    border-image:
        url("./assets/interface-ui/find-editbox.webp")
        12 22 fill / 6px 10px / 0 stretch;
    outline: 0;
    box-sizing: border-box;
    color: #edf3ef;
    background: #041014;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 11px;
}

.megaSuperEventBackgroundCategories {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #53736d #07100f;
}

.megaSuperEventBackgroundCategories button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 3px 9px;
    border-width: 5px;
    border-image-width: 5px 7px;
    font-size: 9px;
}

.megaSuperEventBackgroundCategories button[aria-pressed="true"] {
    border-image-source: url("./assets/interface-ui/button-blue.webp");
    color: #f2f7f4;
    filter: brightness(1.16);
}

.megaSuperEventBackgroundBody {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: #5c7772 #070b0b;
}

.megaSuperEventBackgroundGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
}

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

.megaSuperEventBackgroundCard {
    display: grid;
    grid-template-rows: auto minmax(50px, auto);
    min-width: 0;
    padding: 7px;
    overflow: hidden;
    border: 8px solid transparent;
    border-image:
        url("./assets/interface-ui/tile-window-border.webp")
        18 / 8px / 0 stretch;
    box-sizing: border-box;
    color: #dbe6e1;
    background:
        url("./assets/interface-ui/tile-internal-crt.webp")
        center / 160px 160px repeat,
        #060b0b;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.64),
        inset 0 0 18px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    text-align: left;
    transition:
        filter 110ms ease,
        transform 110ms ease,
        box-shadow 110ms ease;
}

.megaSuperEventBackgroundCard:hover {
    filter: brightness(1.13);
    transform: translateY(-1px);
}

.megaSuperEventBackgroundCard[aria-selected="true"] {
    outline: 2px solid rgba(92, 217, 209, 0.92);
    outline-offset: -3px;
    box-shadow:
        0 0 0 1px rgba(106, 232, 224, 0.34),
        0 9px 24px rgba(0, 0, 0, 0.7),
        inset 0 0 24px rgba(65, 163, 157, 0.2);
}

.megaSuperEventBackgroundCard:focus-visible,
.megaSuperEventBackgroundLibraryHeader button:focus-visible,
.megaSuperEventBackgroundCategories button:focus-visible,
.megaSuperEventBackgroundTools input:focus-visible {
    outline: 2px solid #67d4cf;
    outline-offset: 2px;
}

.megaSuperEventBackgroundCardVisual {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 573 / 455;
    overflow: hidden;
    border: 1px solid rgba(103, 132, 125, 0.64);
    box-sizing: border-box;
    background:
        linear-gradient(135deg, #0b1313, #020606);
}

.megaSuperEventBackgroundCardVisual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.megaSuperEventBackgroundCardVisual em {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 3px 7px;
    border: 1px solid rgba(94, 220, 212, 0.88);
    color: #dffffa;
    background: rgba(3, 18, 19, 0.88);
    font-size: 9px;
    font-style: normal;
    box-shadow: 0 0 9px rgba(59, 195, 187, 0.34);
}

.megaSuperEventBackgroundCardCopy {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 5px 3px;
}

.megaSuperEventBackgroundCardCopy strong,
.megaSuperEventBackgroundCardCopy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.megaSuperEventBackgroundCardCopy strong {
    color: #edf4f0;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 11px;
    font-weight: 500;
}

.megaSuperEventBackgroundCardCopy small {
    color: #889b95;
    font-size: 9px;
}

.megaSuperEventBackgroundEmpty {
    margin: 80px auto;
    color: #8fa19b;
    font-family: "RuiZheng", "PingFang SC", sans-serif;
    font-size: 14px;
}

@media screen and (max-width: 460px) {
    .megaSuperEventCategories {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 820px) {
    .megaSuperEventBackgroundTools {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .megaSuperEventBackgroundCategories {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .megaSuperEventBackgroundGrid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 8px;
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .megaSuperEventCanvas {
        image-rendering: auto;
    }
}