@import url('https://fonts.googleapis.com/css?family=Lato');

@font-face {
    font-family: Pusab;
    src: url('../assets/pusab.ttf')
}

:root {
    --boxHeight: 20vh;
    --canvasButtonPadding: 20px;
    --scrollbarSize: 1vh;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    margin: 0px;
    background-color: black;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 0px;
    overflow: hidden;

    background-color: #287DFF;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('../assets/background.jpg');
}

body div {
    display: revert;
}

textarea, input, select {
    padding: 8px 10px;
    border-radius: 7px;
    border: none;
    color: white;
    resize: none;
    background-color: var(--darker);
}

textarea::placeholder, input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

p, textarea, input, select {
    color: white;
    font-family: Lato, Helvetica, Aller, Arial;
    font-size: 18px;
}

a {
    color: cyan !important;
}

.smaller {
    font-size: 16px;
}

h1, h3, .greenButton {
    color: white;
    font-size: 24px;
    font-weight: bolder;
    margin: 0 0;
    font-family: Pusab, Arial;
    -webkit-text-stroke-color: black;
    /* -webkit-text-stroke-width: 0.055em; */
    -webkit-text-stroke-width: 0.018em;
    text-shadow: 0.08em 0.06em 0.08em rgba(0, 0, 0, 0.3);
    text-align: center;
}

#canvasBox {
    position: relative;
    cursor: pointer;
    text-align: center;
    width: 100vw;
    height: var(--boxHeight);
    min-height: 7vh;
    max-height: 50vh;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 0px 20px 0px;
    flex: 0 0 auto;
    --fullscreenDuration: 0.25s;
}

#canvasBox.animating, #canvasBox.animating .canvasButtons, #canvasBox.animating #canvasResizer {
    transition-duration: var(--fullscreenDuration);
    transition-timing-function: ease-in-out;
    transition-property: height, max-height, padding, bottom, opacity;
}

#canvasBox .canvasParent {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#canvasBox .canvasParent:focus-visible {
    outline: 2px dotted rgba(255, 255, 255, 0.33);
}

canvas {
    object-fit: contain;
    width: 100%;
    height: 95%;
    pointer-events: none;
}

#canvasResizer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.66);
    cursor: ns-resize;
    padding: 2px 0px;
    touch-action: none;
}

#canvasResizer:active {
    border-bottom-color: white;
    border-bottom-width: 3px;
}

.canvasButtons {
    position: absolute;
    height: 0px;
    bottom: 0px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: 100%;
    z-index: 3;
}

.canvasButtonsLeft {
    justify-content: flex-start;
    left: var(--canvasButtonPadding);
    width: 75%;
}

.canvasButtonsRight {
    justify-content: flex-end;
    right: var(--canvasButtonPadding);
}

.canvasButton img {
    height: 38px;
    aspect-ratio: 1/1;
}

.canvasButtonsLeft img {
    height: 25px;
    aspect-ratio: unset;
}

#canvasBox.expanded {
    height: 100dvh;
    max-height: 100dvh;
    padding: 0px 0px;
}

#canvasBox.expanded .canvasButtons {
    bottom: 25px;
}

#canvasBox.expanded #canvasResizer {
    pointer-events: none;
    opacity: 0%;
}

.parent {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: calc(100% - var(--scrollbarSize));
    padding-right: var(--scrollbarSize);
}

.main {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 auto;
    width: 100%;
}

#textboxList {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#textboxList[boxcount='1'] .deleteOptions {
    display: none;
}

.newTextbox {
    margin-top: 14px;
    width: 42px;
}

input[type="range"] {
    --sliderThumb: url("../assets/slider_thumb.png");
    --sliderThumbActive: url("../assets/slider_thumb_active.png");
    --sliderTrack: url("../assets/slider_track.png");
    --sliderThumbSize: 22px;
    --sliderWidth: 100px;
    --sliderHeight: 10px;

    width: var(--sliderWidth);
    height: var(--sliderHeight);
    min-height: var(--sliderHeight);
    background-color: rgba(0, 0, 0, 0);
    appearance: none !important;
    padding: 0px 0px;
    border: 1px solid;
    cursor: pointer;
    border-image: var(--sliderTrack);
    border-image-slice: 21 22 22 21;
    border-image-width: 30px 30px 30px 30px;
    margin-right: 10px;
}

input[type="range"]:active {
    --sliderThumb: var(--sliderThumbActive);
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none !important;
    height: var(--sliderThumbSize);
    width: var(--sliderThumbSize);
    background-image: var(--sliderThumb);
    background-repeat: no-repeat;
    background-size: 100%;
}

input[type="range"]::-moz-range-thumb {
    appearance: none !important;
    height: var(--sliderThumbSize);
    width: var(--sliderThumbSize);
    background-image: var(--sliderThumb);
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 100%;
    border: none;
}

.gdCheckboxInput {
    opacity: 0;
    width: 1px;
    height: 1px;
}

.gdCheckbox {
  vertical-align: middle;
  display: inline-block;
  background-image: url("../assets/check_off.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  text-align: left;
}

label.gdCheckbox:has(input[type=checkbox]:checked) {
  background-image: url("../assets/check_on.png");
}

label.gdCheckbox:has(input[type=checkbox]:focus-visible) {
    outline: 1px solid white;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  background: transparent !important;
}

input[type="color"]::-moz-color-swatch {
  border: none;
  background: transparent !important;
}

.exportTypes {
    gap: 12px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 16px 0px;
}

.exportSection {
    width: 800px;
    max-width: 85%;  
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    padding: 16px 16px;
}

.exportDetails {
    border: 2px solid #24E5E4;
    margin-bottom: 12px;
}

.exportDetails div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.exportDetails p {
    max-width: 600px;
    margin: 0px 0px;
}

.exportDetails cr a {
    color: #ff8000 !important;
}

.exportCodeBox {
    font-family: Consolas, monospace;
    font-size: 14px;
    color: white;
    min-height: 400px;
    margin-bottom: 25px;
    overflow: auto;
    white-space: pre;
}

#footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    width: 100vw;
    height: 38px;
    gap: 16px;
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    overflow: hidden;
}

#footer > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#footer .footerLeft {
    padding-left: 16px;
}

#footer .footerRight {
    padding-right: 16px;
}

#footer > div p {
    font-size: 14px;
    white-space: nowrap;
    pointer-events: all;
    margin: 0px 0px;
}

#footer > div .smaller {
    font-size: 10px;
    color: #cccccc;
}

#footer > div a {
    text-decoration: underline;
    cursor: pointer;
}

.flalert {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.66);
    width: 100%;
    height: 100%;
    z-index: 100;
}

.flalert .alertbox {
    width: 400px;
    height: 300px;
    max-width: 90%;
    max-height: 85%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    border: 20px solid transparent;
    border-radius: 10px;
    border-image: url("../resources/textboxes/extra/square01_001-uhd.png") 25% fill;
    background-color: rgba(0, 0, 0, 0.5);
}

.flalert .closePopup {
    position: absolute;
    right: -34px;
    top: -34px;
}

.flalert .closePopup img {
    height: 55px;
}

#changelog .alertbox {
    width: 700px;
    height: 500px;
}

#changelogVersions {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 97%;
    overflow: auto;
    margin-top: 10px;
    padding-bottom: 16px;
}

#changelogVersions p {
    line-height: 24px;
    padding-left: 16px;
    padding-right: 8px;
    margin: 10px 0px 0px 0px;
}

#changelogVersions .ver {
    color: rgb(128, 255, 255);
    line-height: 30px;
}

.gdButton {
    cursor: pointer;
    user-select: none;
    pointer-events: all;
    touch-action: manipulation;
    transition-duration: 0.07s;
    transition-timing-function: ease-in-out;
}

.gdButton[disabled] {
    filter: saturate(0);
    animation: none !important;
}

.gdButton img {
    -webkit-user-drag: none;
}

.gdButton:active, .gdButton:focus-visible, a:focus-visible .gdButton {
    animation: bounceButton 0.25s ease-in-out forwards;
}

.greenButton {
    font-size: 18px;
    border: 7px solid transparent;
    border-radius: 10px;
    border-image: url("../resources/textboxes/extra/GJ_button_01-uhd.png") 15% fill;
}

.greenButton.selected {
    border-image-source: url("../resources/textboxes/extra/GJ_button_02-uhd.png");
}

.fancyScroll::-webkit-scrollbar {
    width: var(--scrollbarSize);
    height: var(--scrollbarSize);
    background: rgba(0, 0, 0, 0.5);
}

.fancyScroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.33);
    border-radius: 6px;
    cursor: pointer;
}

.fancyScroll::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.5);
}

.fancyScroll::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}

cr { color: #FF5A5A !important }

cg { color: #40E348 !important }

cy { color: #FFFF00 !important }

cl { color: #40E348 !important }

@keyframes bounceButton {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

    75% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1.1);
    }
}

/* mobile */

@media (max-width: 500px) {
    :root {
        --sliderWidth: 120px;
        --sliceSize: var(--sliceSizeMobile);
        --canvasButtonPadding: 10px;
    }

    canvas {
        scale: 1.2;
    }

    .canvasButtons {
        gap: 2vw;
    }

    .canvasButtonsLeft {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
    }

    .canvasButtons img {
        max-height: 11vw;
    }

    .canvasButtonsLeft img {
        height: 20px;
        max-height: 7vw;
    }
    
    #footer {
        height: fit-content;
        flex-direction: column;
        text-align: center;
        padding: 10px 0px;
        justify-content: space-between;
    }

    #footer .footerLeft {
        padding: 0px 12px !important;
    }

    #footer .footerRight {
        display: none;
    }

    #footer > div p {
        white-space: normal;
    }

    #footer .footerdiv {
        display: none;
    }
}:root {
    --darker: rgba(0, 0, 0, 0.35);

    --boxWidth: 600px;

    --boxHeight: 145px;
    --boxHeightUnfocused: 70px;

    --portraitSize: 90%;
    --portraitSizeUnfocused: 65%;

    --sliceSize: 20%;
    --sliceSizeMobile: 10%;
    --sliceMultiplier: 1;

    --sideWidth: 50px;
}

.textboxBuilder {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 95vw;
}

.configSide {
    width: var(--sideWidth);
    height: 100%;
    z-index: 1;
}

.configBox {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: var(--boxWidth);
    height: var(--boxHeightUnfocused);
    padding: 2px 0px;

    border: 20px solid transparent;
    border-radius: 10px;
    border-image: url("../resources/textboxes/GJ_square02-uhd.png") calc(var(--sliceSize) * var(--sliceMultiplier)) fill;
    background-color: rgba(0, 0, 0, 0.5);

    filter: brightness(0.7);
    cursor: pointer;
}

.focusedTextbox .configBox {
    height: var(--boxHeight);
    filter: drop-shadow(0px 0px 8px white);
    cursor: initial;
}

.configCol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.focusedTextbox .configCol {
    justify-content: flex-end;
}

.configCol.configColChar {
    width: 18%;
}

.configCol.configColText {
    width: 10%;
    flex: 1;
}

.configCol.configColButtons {
    width: 7%;
    gap: 8px;
}

.configTextbox {
    width: 95%;
    background-color: var(--darker);

}

input.configTextbox {
    height: 40px;
    display: none;
}

.focusedTextbox input.configTextbox {
    display: block;
}

textarea.configTextbox {
    height: 100%;
}

select.configTextbox {
    height: 37px;
    appearance: none;
    text-align: center;
    font-size: 16px;
}

.hiddenDropdopwn {
    width: 0px;
    height: 0px;
    pointer-events: none;
    opacity: 0%;
    background-color: black;
}

.configPortrait {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--portraitSizeUnfocused);
    aspect-ratio: 1/1;
    cursor: pointer;
    border-radius: 7px;
    background-color: var(--darker);
    user-select: none;
}

.focusedTextbox .configPortrait {
    width: var(--portraitSize);
}

.configPortrait img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    -webkit-user-drag: none;
}

.configPortrait img[src=""] {
    display: none;
}

.configButton {
    display: none;
    align-items: center;
    justify-content: center;
    width: 95%;
    aspect-ratio: 1/1;
    cursor: pointer;
    background-image: url("../assets/button.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.focusedTextbox .configButton, .configButton.alwaysShow {
    display: flex;
}

.configButton img {
    width: 50%;
    aspect-ratio: 1/1;
    object-fit: contain;
    user-select: none;
}

#customColorInput {
    position: absolute;
    pointer-events: none;
    opacity: 0%;
}

.configTopLeft {
    display: none;
    position: absolute;
    top: -11px;
    left: -11px;
    pointer-events: none;
    width: 200px;
    height: 200px;
}

.focusedTextbox .configTopLeft {
    display: block;
}

.configTopLeft .configButton {
    width: 40px;
    pointer-events: all;
}



.configSettings {
    display: flex;
    justify-content: center;
}

.configSettingsGroups {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 60px;
}

.configSettingGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.configSettingGroup:last-child {
    margin-right: 25px;
}

.configSetting {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 4px;
}

.configSettingSubgroup {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.configSetting input[type="color"] {
    height: 20px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

.configGroupLabel {
    margin-bottom: 2.5px;
    margin-top: -4px;
}

.configSettingLabel {
    font-size: 18px;
    margin: 0px 0px;
    width: 65px;
    text-align: left;
}

.configSettingSubgroup .configSettingLabel {
    width: fit-content;
    margin-right: 8px;
}

.configSettingLabel:last-child {
    width: fit-content;
}

input.sliderInput {
    font-size: 15px;
    padding: 2px 3px;
    width: 40px;
    text-align: center;
}

input.sliderInput::-webkit-outer-spin-button, input.sliderInput::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.configSettingsCorner {
    display: flex;
    flex-direction: column;
    position: absolute;
    gap: 5px;
    right: -10px;
    top: -12px;
}

.configSettingsCorner img {
    width: 30px;
}



.reorderTextbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    margin-left: 5px;
}

.focusedTextbox .reorderTextbox {
    gap: 12px;
}

.reorderTextbox img {
    width: 70%;
    min-width: 10px;
}

.reorderTextbox img.reorderClone {
    width: 85%;
}

/* .textboxBuilder:first-of-type .reorderUp {
    visibility: hidden;
}

.textboxBuilder:last-of-type .reorderDown {
    visibility: hidden;
} */


.deleteOptions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 4px;
    gap: 8px;
}

.deleteOptions img {
    width: 70%;
}



/* mobile */
@media (max-width: 500px) {
    :root {
        --boxWidth: 92vw;
        --sliceSize: var(--sliceSizeMobile)
    }

    #textboxList {
        gap: 25px;
    }

    .configBox {
        border-width: 8px;
    }

    .configBox p, .configBox textarea, .configBox input, .configBox select {
        font-size: 15px;
    }

    .configBox input.configTextbox {
        height: 22px;
    }

    .configCol {
        gap: 6px;
    }

    .configCol.configColButtons {
        justify-content: center;
    }
    
    .configTopLeft {
        left: -1px;
        top: -1px;
    }

    .configSettingsCorner {
        right: 0px;
        top: 0px;
    }
    
    .configSide {
        height: var(--sideWidth);
        pointer-events: none;
        position: absolute;
        bottom: -30px;
    }

    .reorderTextbox img.reorderClone {
        width: 64%;
    }
    
    .configSideRight {
        right: 45px;
    }

    .configSideLeft {
        left: -32px;
    }

    .deleteOptions img {
        width: 50%;
    }

    .textboxBuilder {
        flex-direction: column;
    }

    .reorderTextbox {
        flex-direction: row;
        height: auto;
    }

    .reorderTextbox img {
        min-width: unset;
    }

    .configSettingsGroups {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow-x: hidden;
        overflow-y: auto;
        width: 75%;
        margin-right: 16px;;
        padding: 16px 10px 20px 10px;
        background-color: var(--darker);
        border-radius: 8px;
        gap: 25px;
    }

    .configSetting {
        margin-bottom: 2px;
    }

    .configGroupLabel {
        font-size: 20px;
    }

    .configSettingLabel {
        font-size: 16px;
    } 

    .configBox .sliderInput {
        font-size: 13px;
    }

    .configSetting input[type="color"] {
        height: 17px;
    }

}:root {
    --characterPickerHeight: 255px;
    --characterPickerColumns: 6;
    --characterPickerColumnsMobile: 4;
    --characterButtonSize: 50px;
    --characterButtonScale: 0.2;
    --characterPickerFooterHeight: 28px;
    --characterPickerFooterFont: 18px;

    --textPickerWidth: 100px;
    --textEffectHeight: 25px;
    --textEffectFontSize: 15px;
    --textColorSquareSize: 23.5px;

    --bgPickerColumns: 4;
}

.basePicker {
    position: absolute;
    background-color: rgb(35, 35, 35);
    width: fit-content;
    border-radius: 10px;
    overflow: hidden;
    animation: popin 0.2s cubic-bezier(0.18, 0.89, 0.27, 1.21) forwards;
    transform-origin: top left;
    z-index: 10;
}

.basePicker:focus-visible {
    outline: none;
}

#characterPickerPopup .characterGridParent {
    display: flex;
    justify-content: center;
    padding: 8px 12px 0px 12px;
    overflow: auto;
    height: var(--characterPickerHeight);
}

#characterPickerPopup .characterGrid {
    display: grid;
    grid-template-columns: repeat(var(--characterPickerColumns), 1fr);
    gap: 2px;
    height: fit-content;
}

#characterPickerPopup .characterButton, #characterPickerPopup #customCharacterUpload {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--characterButtonSize);
    height: var(--characterButtonSize);
    aspect-ratio: 1;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    user-select: none;
}

#characterPickerPopup #customCharMobileUpload {
    display: none;
}

#characterPickerPopup .characterButton:hover, #characterPickerPopup .characterButton:focus-visible {
    outline: none;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
    transition-property: scale;
    scale: 1.04;
    background-color: rgba(255, 255, 255, 0.2);
}

#characterPickerPopup .characterButton:active {
    background-color: rgba(255, 255, 255, 0.25);
    scale: 1.07;
}

#characterPickerPopup .characterButton .charFrame {
    position: absolute;
    z-index: -10;
}

#characterPickerPopup .characterButton img {
    --extraScale: 1;
    scale: calc(var(--characterButtonScale) * var(--extraScale));
    -webkit-user-drag: none;
}

#characterPickerPopup .characterButtonCustom img {
    scale: 1.025;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#characterPickerPopup .characterButtonExtra img {
    scale: 1;
    width: 100%;
    height: 100%;
}

#characterPickerPopup #customCharacterUpload {
    background-color: rgba(0, 0, 0, 0.5);
    outline: 2px dotted rgba(255, 255, 255, 0.5);
    width: 95%;
    padding: 5px 0px;
    margin: 10px auto 0px auto;
    grid-column: 1 / -1;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
    transition-property: scale;
}

#characterPickerPopup #customCharacterUpload:hover, #characterPickerPopup #customCharacterUpload:focus-visible {
    scale: 1.025;
    background-color: rgba(0, 0, 0, 0.66);
}

#characterPickerPopup.fileHover #customCharacterUpload {
    scale: 1.04;
    background-color: rgba(255, 255, 255, 0.33);
}

#characterPickerPopup #customCharacterUpload p {
    text-align: center;
    color: rgba(255, 255, 255, 0.66);
    font-size: 16px;
}

#characterPickerPopup .characterLabelParent {
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    height: var(--characterPickerFooterHeight);
}

#characterPickerPopup .characterLabelParent h1 {
    position: absolute;
    font-size: var(--characterPickerFooterFont);
    user-select: none;
    white-space: nowrap;
}

#characterPickerPopup #creditLabel {
    text-align: right;
    right: 10px;
    color: #80FF80;
}




#textPickerPopup, #fullscreenPickerPopup {
    border-radius: 5px;
    transform-origin: top right;
    width: var(--textPickerWidth);
}

#textPickerPopup .textEffectList {
    display: flex;
    flex-direction: column;
    padding: 8px 5px;
}

#textPickerPopup .textEffect {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--textEffectHeight);
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    transition-duration: 0.1s;
    user-select: none;
}

#textPickerPopup .textEffect:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

#textPickerPopup .textEffect:active {
    background-color: rgba(0, 0, 0, 0.66);
}

#textPickerPopup .textEffect p {
    font-size: var(--textEffectFontSize);
}

#textPickerPopup .textColorList, #fullscreenPickerPopup .fullscreenColorList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 5px;
    gap: 5px;
}

#textPickerPopup .textColor, #fullscreenPickerPopup .bgColor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--textColorSquareSize);
    height: var(--textColorSquareSize);
    border: 1px solid black;
    border-radius: 7px;
    cursor: pointer;
    transition-duration: 0.07s;
}

#textPickerPopup .textColor img, #fullscreenPickerPopup .bgColor img {
    width: 85%;
    aspect-ratio: 1/1;
    user-select: none;
}

#textPickerPopup .textColor:hover, #fullscreenPickerPopup .bgColor:hover {
    scale: 1.07;
}


#bgPickerPopup {
    border-radius: 5px;
    max-height: 55vh;
    overflow: auto;
    width: fit-content;
}

#bgPickerPopup .backgroundList {
    display: grid;
    grid-template-columns: repeat(var(--bgPickerColumns), 50px);
    padding: 8px;
    gap: 8px;
    justify-content: center;
    align-content: start;
    height: fit-content;
}

#bgPickerPopup .backgroundList .bgOption {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    user-select: none;
    cursor: pointer;
    transition-duration: 0.06s;
    transition-timing-function: ease-in-out;
}

#bgPickerPopup .backgroundList .bgOption:hover {
    scale: 1.07;
}


#fullscreenPickerPopup .bgColor img {
    width: 40%;
    opacity: 50%;
}




@keyframes popin  {
    0% { scale: 0 }
    100% { scale: 1 }
}


/* mobile */
@media (max-width: 500px) {
    :root {
        --characterPickerFooterFont: 16px;
    }

    #characterPickerPopup .characterGrid {
        grid-template-columns: repeat(var(--characterPickerColumnsMobile), 1fr);
    }

    #characterPickerPopup #customCharacterUpload {
        display: none;
    }

    #characterPickerPopup #customCharMobileUpload {
        display: flex;
    }

    #characterPickerPopup .characterLabelParent {
        padding-left: 8px;
    }
    
}