.ad-container {
    width: 100%;      /* Full width */
    max-width: 300px; /* Max width if you want */
    min-height: 250px; 
    margin: 20px auto; 
    text-align: center;
}

.ad-container .adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.ad-container .adsbygoogle[data-ad-status="filled"] {
    display: block !important;
}


@media (max-width: 600px) {
  .ad-container {
    max-width: 100%;
  }
}

#title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: max(20px, env(safe-area-inset-top)); /* Updated: Account for safe area */
}

.titleIconImage {
    width: 38px;
    height: 38px;
    margin-right: 8px;
    position: relative; /* Required for pseudo-element positioning */
    z-index: 1; /* Ensure the image stays above the glow */
    transition: transform 0.3s ease; /* Smooth scaling on hover */
}

.titleIconImage:hover,
.titleIconImage:active { /* Updated: Added :active for touch devices */
    transform: scale(1.1) rotateZ(-2deg);
}

.titleIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.titleIcon::before {
    content: '';
    position: absolute;
    width: 38px; /* Slightly larger than the image for glow spread */
    height: 38px;
    background-image: url(BloxdImageConverterLogo-min3.webp); /* Inherit the image from the <img> element */
    background-size: cover;
    filter: blur(10px) saturate(2); /* Blur and saturate for glow effect */
    z-index: -1; /* Place glow behind the image */
    animation: smartGlow 20s ease-in-out infinite; /* Subtle pulsing animation */
    opacity: 0.8; /* Slightly transparent for a softer glow */
}

/* Keyframes for a subtle pulsing glow */
@keyframes smartGlow {
    0%, 100% {
        transform: translate(-15%, -15%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-15%, -15%) scale(1.15);
        opacity: 1;
    }
}

.InsertImages {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    width: 100vw;
}

.custom-file-label.drop-zone {
    position: relative;
    margin: 10px;
    padding: 92px 230px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s, border-color 0.3s;
    box-shadow: 0 0 30px rgba(0, 30, 255, 0.7);
    touch-action: manipulation;
    min-height: 90px;
    font-size: 30pt;
    overflow: hidden;
    z-index: 0; /* ensures pseudo-elements can go behind */
}

/* ensure the text itself is always above */
.custom-file-label.drop-zone > * {
    position: relative;
    z-index: 1;
}

/* solid background */
.custom-file-label.drop-zone::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #100055;
    z-index: -1; /* furthest back */
    margin: 4px;
}

/* animated striped border */
.custom-file-label.drop-zone::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px; /* border thickness */
    background: repeating-linear-gradient(
        -45deg,
        #005cc5 0px,
        #005cc5 5px,
        #0077ff 5px,
        #0077ff 15px
    );
    background-size: 40px 40px;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    animation: stripe-move 1s linear infinite;
    z-index: -2; /* between background and text */
    pointer-events: none;
}

@keyframes stripe-move {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}





.custom-file-label.drop-zone:hover,
.custom-file-label.drop-zone:active {
    background-color: #0a0037;
}

.custom-file-label.drop-zone.dragging {
    background-color: #1a1a1a;
    border: 2px dashed #00ff00;
}
/* .custom-file-label.drop-zone.green-outline {
    outline: 2px solid #00ff00;
} */

input[type="file"]#imageInput {
    display: none;
}

.stepText {
    font-size: 20pt;
    font-weight: 600;
}

.palette-zone {
    background-color: #005508;
    border: 2px dashed #00c503;
    box-shadow: 0 0 10px rgba(0, 255, 34, 0.7);
    margin: 10px;
    padding: 90px 103px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s, border-color 0.3s;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 90px; /* Updated: Ensure touch target size */
    font-size: 30pt;
}

.palette-zone:hover,
.palette-zone:active { /* Updated: Added :active for touch */
    background-color: #003700;
    border: 2px dashed #008712;
}

.palette-zone.dragging {
    background-color: #1a1a1a;
    border: 2px dashed #00ff00;
}

.palette-zone.green-outline {
    outline: 2px solid #00ff00;
}

input[type="file"]#imageInput {
    display: none;
}


input[type="file"]#paletteInput {
    display: none;
}

#resetPalette, .copyText, .enterCode {
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    margin: 10px;
    padding: 35px 30px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 12pt;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#resetPalette {
    padding: 50px 60px !important;
    min-height: 257px;
    font-size: 20pt !important;
}



#resetPalette:hover,
#resetPalette:active,
.copyText:hover,
.copyText:active,
.enterCode:hover,
.enterCode:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1);
}

#warningPopup {
    max-height: 200px;
}



.popupTexture {
    position: fixed; /* Position it absolutely */
    transform: translateX(-50%); /* Center horizontally */
    transition: top 0.5s ease-in-out; /* Smooth transition for top */
    pointer-events: none; /* Prevent interaction when hidden */
    top: -180px; /* Initial hidden position above the viewport */
    left: 50%;
    background-color: #230000;
    border: 2px solid #890000;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(137, 0, 0, 0.2);
    padding: 30px;
    
    font-size: 1.2rem;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Start as fully transparent */
    transition: top 0.5s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition for both top and opacity */
}
.popupTexture.show {
    pointer-events: auto; /* Enable interaction when visible */
    opacity: 1; /* Fully visible when shown */
}

#convertButton {
    color: white;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    justify-content: center;
    margin-right: 15px;
    margin-top: 10px;
     font-size: 25pt;
    font-weight: 700;
    padding: 46px 50px !important; /* Updated: Increased padding for touch */
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

.unselectedConvert {
    background-color: #4b4b4b;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.unselectedConvert:hover,
.unselectedConvert:active { /* Updated: Added :active for touch */
    background-color: #373737;
    border: 2px solid #c8c8c8;
}

.lessBlocksConvert {
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
}
.lessBlocksConvert:hover,
.lessBlocksConvert:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
}

.normalConvert {
    background-color: #100055;
    border: 2px solid #0052c5;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
}
.normalConvert:hover,
.normalConvert:active { /* Updated: Added :active for touch */
    background-color: #0a0037;
    border: 2px solid #003687;
}

.moreSolidConvert {
    background-color: #005508; /* Green background */
    border: 2px solid #00c503;
box-shadow: 0 0 10px rgba(0, 255, 34, 0.7); /* Blue glow */
}

.moreSolidConvert:hover,
.moreSolidConvert:active { /* Updated: Added :active for touch */
    background-color: #003700;
    border: 2px solid #008712;
}

.fasterConvert {
    border: 2px solid #c5bf00;
    background-color: #3a3e00;
    box-shadow: 0 0 10px rgba(229, 255, 0, 0.7);
}
.fasterConvert:hover,
.fasterConvert:active { /* Updated: Added :active for touch */
    background-color: #2a2e00;
    border-color: #8a8700;
}

#convertButton:hover,
#convertButton:active { /* Updated: Added :active for touch */
    transform: scale(1.1);
}

#convertButton:active {
    transform: scale(0.95); /* Shrink on click */
}

#downloadButton, .downloadText, .uploadText {
    background-color: #005508;
    border: 2px solid #00c503;
    box-shadow: 0 0 10px rgba(0, 255, 34, 0.7);
    color: white;
    border-radius: 5px;
    font-size: 25pt;
    font-weight: 700;
    padding: 20px 50px; /* Updated: Increased padding for touch */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    margin-top: 10px;
    margin-right: 15px;
    
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    
}

#downloadButton {
    padding: 46px 50px !important;
    min-height: 44px; /* Updated: Ensure touch target size */
}

#downloadButton:hover,
#downloadButton:active,
.downloadText:hover,
.downloadText:active,
.uploadText:hover,
.uploadText:active 
{ /* Updated: Added :active for touch */
    background-color: #003700;
    border: 2px solid #008712;
    transform: scale(1.1);
}

#downloadButton:active {
    transform: scale(0.95); /* Shrink on click */
}

.importantButton {
    margin-top: 0px;
}

#helpButton {
    margin-top: 20px;
    width: 50px; /* Updated: Increased for touch target */
    height: 50px; /* Updated: Increased for touch target */
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    color: white;
    font-size: 20pt;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: fixed;
    top: max(20px, env(safe-area-inset-top)); /* Updated: Account for safe area */
    right: 20px;
    cursor: pointer;
    transform: translateY(-10px);
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
}

#helpButton:hover,
#helpButton:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1) translateY(calc(-10px / 1.1));
}

.navigate-button {
    position: fixed; /* Updated: Changed to fixed for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    top: max(10px, env(safe-area-inset-top)); /* Updated: Account for safe area */
    left: 10px;
    z-index: 1000;
    padding: 15px 20px; /* Updated: Increased padding for touch */
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

.navigate-button:hover,
.navigate-button:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1);
}

.home-button-icon {
    width: 20px;
    height: 20px;
    image-rendering: crisp-edges;
    margin: 5px;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.navigate-button:hover .home-button-icon,
.navigate-button:active .home-button-icon { /* Updated: Added :active for touch */
    transform: translateX(-5px); /* Updated: Simplified movement */
}


.discord-button {
    position: fixed; /* Updated: Changed to fixed for consistency */
    left: 170px;
    top: max(24px, env(safe-area-inset-top)); /* Updated: Account for safe area */
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.discord-button img {
    cursor: pointer;
}

.discord-button:hover,
.discord-button:active { /* Updated: Added :active for touch */
    transform: scale(1.1);
}

@media (max-width: 730px) {
    #titleText, .titleIcon {
        visibility: hidden;
    }
}

@media (max-width: 480px) { /* Updated: Added new breakpoint for small mobile devices */
    #title {
        margin-bottom: 10px;
        margin-top: max(10px, env(safe-area-inset-top));
    }
    .custom-file-label.drop-zone, .palette-zone, #resetPalette {
        padding: 25px 20px; /* Updated: Reduce padding for smaller screens */
        margin: 5px;
    }
    .InsertImages {
        margin-top: 50px;
    }
}

.main {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 40px;
}

.results {
      flex-grow: 2; /* This item will grow twice as much */
      flex-direction: row;
}

.modifiers {
    flex-grow: 1;
    flex-direction: column;
}

.results, .modifiers {
    flex: 1; /* Each div takes up 50% of the container */
    min-width: 300px; /* Minimum width to prevent squishing */
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}



@media (max-width: 2000px) { 
    .main {
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }
    .results, .modifiers {
        width: 100%;
        min-width: unset;
        padding: 10px;
    }
    #outputContainer {
        width: 90vw !important; /* Updated: Slightly smaller than 95vw for better fit */
    }
}

@media (max-width: 1464px) {
    .main {
        flex-direction: column;
        align-items: center;
    }
    .results, .modifiers {
        width: 100%;
        min-width: unset;
    }
    #outputContainer {
        width: 90vw !important; /* Updated: Adjusted for consistency */
    }
}

@media (max-width: 768px) {
    .main {
        min-height: auto; /* Remove huge fixed height */
    }
    
    #publisherContent {
        margin-top: 20px;
        padding: 10px;
    }

    /* Optional: reduce padding/margin of results/modifiers */
    .results, .modifiers {
        padding: 10px;
    }
}


#outputContainer {
    width: 35vw;
    height: 500pt;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    overflow: scroll; /* Updated: Changed to auto for better scrolling */
    scrollbar-color: #c89cff #190039;
    scrollbar-width: thin;
    transition: all 0.7s ease 0.1s; 
    position: relative;
}

#blockCountContainer {
    width: 300px; /* width of the container */
    min-width: 250px;
    height: 500pt; /* or px */
    overflow-y: auto; /* vertical scroll */
    display: flex; 
    flex-direction: column; /* stack vertically */
    align-items: flex-start; /* keep everything to the left */
    gap: 5px; /* spacing between block rows */
    flex-wrap: nowrap; /* no wrapping needed */
    transition: all 0.3s ease;
}



@media (max-width: 960px) {
    .results {
        flex-direction: column-reverse;
    }
    #blockCountContainer {
        width: 90vw; /* Updated: Slightly smaller for better fit */
    }
}

@media (max-width: 400px) {
    #outputContainer {
        height: 400px;
    }
    #block-display-container {
        height: 380px;
    }
}

canvas {
    display: none;
    /* border: 1px solid #000; */
    border: 0px;
}

#outputCanvas {
    display: block !important;
    margin: 0 auto;
    image-rendering: pixelated;
    background-color: transparent;
    max-width: 100%; /* Updated: Ensure canvas doesn't overflow */
    max-height: 100%; /* Updated: Ensure canvas doesn't overflow */
    object-fit: contain; /* Updated: Maintain aspect ratio */
    transform-origin: top center;
}

#optionsContainer {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toggle {
    margin-right: 20px;
    margin-bottom: 10px;
}

#block-display-container {
    display: flex;
    flex-wrap: wrap;
    max-height: 430pt;
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
    width: 100%;
    background-color: #A3948164;
    box-shadow: 0 0 20px rgba(163, 148, 129, 0.924);
    padding: 10px;
    margin-bottom: 20px;
}

.block-container {
    position: relative;
    width: 50px;
    height: 50px;
    transition: filter 0.3s ease;
}
.block-image {
    width: 100%;
    height: 100%;
}
/* Define base styles for the overlay */
.none-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    height: 90%;
}

img {
    image-rendering: crisp-edges;
    object-fit: contain; /* Updated: Maintain aspect ratio */
}

#savePrefrences {
    background-color: #100055;
    border: 2px solid #0052c5;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}
#savePrefrences:hover,
#savePrefrences:active { /* Updated: Added :active for touch */
    background-color: #0a0037;
    border: 2px solid #003687;
    transform: scale(1.1);
}

#loadPrefrences {
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#loadPrefrences:hover,
#loadPrefrences:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1);
}

#savePrefrencesPopup, #loadPrefrencesPopup {
    max-height: 350px;
}

#instructionsBackground {
    transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out;
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0; /* Updated: Use inset for better positioning */
    background-color: #00000000;
    backdrop-filter: blur(0px);
    justify-content: center;
    align-items: center;
    display: flex;
}

.subsectionPage {
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Help book container */
.help-book {
    position: fixed;
    inset: 0; /* Updated: Use inset for better positioning */
    margin: auto; /* Updated: Center using margin */
    width: min(1000px, 90vw); /* Updated: Responsive width */
    height: min(800px, 90vh); /* Updated: Responsive height */
    transform: translateY(20px);
    background-color: #252525;
    border: 5px solid #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: auto; /* Updated: Allow scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}


/* Page styling */
.page {
    width: calc(100% - 40px); /* Adjust width to account for padding */
    height: calc(100% - 40px); /* Adjust height to account for padding */
    padding: 20px;
    box-sizing: border-box;
    background-color: #252525;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    margin: 0 40px; /* Margin to prevent touching navigation buttons */
    flex-direction: column;
}

/* Navigation buttons */
.page-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    color: white;
    border: none;
    padding: 15px; /* Updated: Increased padding for touch */
    cursor: pointer;
    font-size: 18px;
    z-index: 1100;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#prevPage {
    left: 10px;
}

#nextPage {
    right: 10px;
}

/* Navigation buttons */
#escapeInstructions {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4%;
    right: 15px;
    background-color: #9c0808;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    width: 44px; /* Updated: Increased for touch target */
    height: 44px; /* Updated: Increased for touch target */
    z-index: 1100;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
}

/* Show the first page initially */
.page.active {
    display: flex;
}

/* Hide the book initially */
.hidden {
    visibility: hidden;
}

.imagesInBook {
    image-rendering: crisp-edges;
    object-fit: contain; /* Updated: Maintain aspect ratio */
}

.imagesInBookpg2 {
    width: 50px;
    height: auto;
    object-fit: contain;
}

#downloadBackgroundPopup, #conversionTypeBackground, #innapropriateWarningBackgroundPopup {
    transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out;
    z-index: 99999;
    position: fixed;
    width: 100vw;
    height: 100vh;
    inset: 0; /* Updated: Use inset for better positioning */
    background-color: #00000000;
    backdrop-filter: blur(0px);
    justify-content: center;
    align-items: center;
    display: flex;
}

#downloadPopup, #conversionTypePopup{
    max-height: 1000px; 
    position: fixed;
    inset: 0; /* Updated: Use inset for better positioning */
    margin: auto; /* Updated: Center using margin */
    width: min(1000px, 90vw); /* Updated: Responsive width */
    height: min(800px, 90vh); /* Updated: Responsive height */
    background-color: #0b0114;
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.924);
    border-radius: 10px;
    overflow: auto; /* Updated: Allow scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#innapropriateWarningPopup {
    max-height: 300px !important;
}

.innapropriateTextCopyContainer {
    height: 70px;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: auto;
    align-items: center;
    margin-top: 20px;
}

.innapropriateTextReport {
    background-color: #1a004e;
    border: 3.4px solid #6927a7;
    border-radius: 2px;
    width: 200px;
    height: 70px;
    margin-left: auto;
    position: relative;
    font-size: 20pt;
    color: white;
    overflow: scroll;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    scrollbar-color: #c89cff #190039;
    scrollbar-width: thin;
}

.copyinnapropriateTextReport {
    background-color: #000ba5;
    border: 3.4px solid #4332c6;
    height: 70px;
    width: 100px;
    color: white;
    font-size: 20pt;
    margin-right: auto;
    font-weight: 480;
    transition: all 0.2s ease;
}

.copyinnapropriateTextReport:hover {
    filter: brightness(0.7);
    transform: scale(1.05);
}



#imgDownload {
    max-width: min(500px, 80vw); /* Updated: Responsive max-width */
    max-height: min(500px, 80vh); /* Updated: Responsive max-height */
    image-rendering: crisp-edges;
    font-size: 32px;
    font-weight: 800;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    align-items: center;
    justify-content: center;
}

.slidecontainer {
    flex-direction: row;
    display: flex;
    flex-wrap: nowrap;
}

#downloadRealButton {
    background-color: #005508;
    border: 2px solid #00c503;
    box-shadow: 0 0 10px rgba(0, 255, 34, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#downloadRealButton:hover,
#downloadRealButton:active { /* Updated: Added :active for touch */
    background-color: #003700;
    border: 2px solid #008712;
    transform: scale(1.1);
}

#downloadSchemButton {
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    margin-top: 50px;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#downloadSchemButton:hover,
#downloadSchemButton:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1);
}

#escapeDownloadPopup {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #d60000;
    width: 44px; /* Updated: Increased for touch target */
    height: 44px; /* Updated: Increased for touch target */
    color: white;
    text-align: center;
    line-height: 44px; /* Updated: Match increased height */
    font-size: 16px;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
}

#escapeDownloadPopup:hover,
#escapeDownloadPopup:active { /* Updated: Added :active for touch */
    background-color: #ff3333;
}

#loading-screen {
    position: fixed;
    inset: 0; /* Updated: Use inset for better positioning */
    background: rgba(0, 0, 0, 0.548);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    backdrop-filter: blur(4px);
}

#loading-message1{
    color: white;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px; /* Space between message and loading bar */
}

#loading-bar-container {
    width: min(50%, 300px); /* Updated: Responsive width */
    top: -20px;
    background-color: #f3f3f3;
    border-radius: 20px;
    overflow: hidden;
    height: 20px;
    margin-top: 10px;
}

#loading-bar {
    width: 0%; /* Start with no width */
    height: 100%; /* Full height of the container */
    background-image: linear-gradient(0deg, #28a745 ,#1c7931); /* Green color for the loading bar */
    transition: width 0.5s ease; /* Smooth transition */
}

#tooltip {
    font-size: 13pt;
    z-index: 200;
    padding: 5px;
    position: absolute;
    background-color: #000000bc;
    border-radius: 5px;
    pointer-events: none;
}


.Background {
    background-color: #00000088;
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 50000;
    transition: opacity 0.3s ease;
    opacity: 0;
    backdrop-filter: blur(10px);
    inset: 0; /* Updated: Use inset for better positioning */
}

.refrencesCodeCopy {
    flex-direction: row;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

.codeText {
    background-color: #121212;
    width: min(300px, 80vw); /* Updated: Responsive width */
    max-height: 50px;
    margin-right: 30px;
    overflow: auto; /* Updated: Changed to auto for better scrolling */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    height: 100%;
}

.textCode {
    margin-left: 10px;
}

.copyText {
    width: 112.617px !important;
    height: 50.4333px !important;
    color: white;
    padding: 15px 20px; /* Updated: Increased padding for touch */
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
    white-space: nowrap;
}


.refrencesLoad {
    flex-direction: row;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pasteText {
    background-color: #121212;
    width: min(300px, 80vw); /* Updated: Responsive width */
    height: 50px;
    margin-right: 30px;
    overflow: auto; /* Updated: Changed to auto for better scrolling */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    height: 100%;
}

.textCodeLoad {
    background-color: #121212;
    width: 100%;
    height: 50px;
    overflow: auto; /* Updated: Changed to auto for better scrolling */
    border: none;
    color: white;
}

.uploadText {
    margin-top: 20px;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
}



@keyframes shakeButton {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(20px);
    }
    75% {
        transform: translateX(-20px);
    }
}

/* Popup styling */
.popup {
    position: fixed;
    inset: 0; /* Updated: Use inset for better positioning */
    margin: auto; /* Updated: Center using margin */
    width: min(700px, 90vw); /* Updated: Responsive width */
    height: auto;
    background-color: #0b0114;
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.924);
    border-radius: 10px;
    padding: 20px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto; /* Updated: Allow scrolling */
}

.tooltip {
    display: block;
}

#lowerQualityBtn {
    background-color: #100055;
    border: 2px solid #0052c5;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#lowerQualityBtn:hover,
#lowerQualityBtn:active { /* Updated: Added :active for touch */
    background-color: #0a0037;
    border: 2px solid #003687;
    transform: scale(1.1);
}

#continueBtn {
    background-color: #005508;
    border: 2px solid #00c503;
    box-shadow: 0 0 10px rgba(0, 255, 34, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#continueBtn:hover,
#continueBtn:active { /* Updated: Added :active for touch */
    background-color: #003700;
    border: 2px solid #008712;
    transform: scale(1.1);
}

#lowerQualityManualBtn {
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: white;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#lowerQualityManualBtn:hover,
#lowerQualityManualBtn:active { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1);
}

#conversionTypePopup {
    position: fixed;
    inset: 0; /* Updated: Use inset for better positioning */
    margin: auto; /* Updated: Center using margin */
    width: min(1000px, 90vw); /* Updated: Responsive width */
    height: min(800px, 90vh); /* Updated: Responsive height */
    background-color: #0b0114;
    border: 2px solid #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.924);
    border-radius: 10px;
    overflow: auto; /* Updated: Allow scrolling */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#conversionTypePopup.show {
  opacity: 1;
  display: flex;
}

#conversionSettings {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#conversionSettings label {
  margin-right: 10px;
  font-size: 14px;
}

#conversionSettings input[type="range"] {
    width: min(200px, 60vw); /* Updated: Responsive width */
}

#conversionSettings span {
  margin-left: 10px;
  font-size: 14px;
}

.escape-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #d60000;
    width: 44px; /* Updated: Increased for touch target */
    height: 44px; /* Updated: Increased for touch target */
    color: white;
    text-align: center;
    line-height: 44px; /* Updated: Match increased height */
    font-size: 16px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
}

.escape-button:hover,
.escape-button:active { /* Updated: Added :active for touch */
    background-color: #ff3333;
}

#convertLessBlocks, #convertNormal, #convertMoreSolid, #convertFaster, #confirmConversion {
    padding: 15px 20px !important;
    font-size: 12pt !important;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    width: 150px;
    margin: 10px;
    box-sizing: border-box;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

/* Specific styles for #convertLessBlocks */
#convertLessBlocks {
    border: 2px solid #6900c5;
    background-color: #1d003e;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
}
#convertLessBlocks:hover,
#convertLessBlocks:active,
#convertLessBlocks.selected { /* Updated: Added :active for touch */
    background-color: #100023;
    border-color: #490089;
    transform: scale(1.1);
}

#convertFaster {
    border: 2px solid #c5bf00;
    background-color: #3a3e00;
    box-shadow: 0 0 10px rgba(229, 255, 0, 0.7);
}

#convertFaster:hover,
#convertFaster:active,
#convertFaster.selected { /* Updated: Added :active for touch */
    background-color: #2a2e00;
    border-color: #8a8700;
    transform: scale(1.1);
}

#convertNormal {
    background-color: #100055;
    border: 2px solid #0052c5;
    box-shadow: 0 0 10px rgba(0, 30, 255, 0.7);
}

#convertNormal:hover,
#convertNormal:active,
#convertNormal.selected { /* Updated: Added :active for touch */
    background-color: #0a0037;
    border: 2px solid #003687;
    transform: scale(1.1);
}

#convertMoreSolid {
    background-color: #005508;
    border: 2px solid #00c503;
    box-shadow: 0 0 10px rgba(0, 255, 34, 0.7);
}

#convertMoreSolid:hover,
#convertMoreSolid:active,
#convertMoreSolid.selected { /* Updated: Added :active for touch */
    background-color: #003700;
    border: 2px solid #008712;
    transform: scale(1.1);
}

#confirmConversion {
    background-color: #4b4b4b;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

#confirmConversion:hover,
#confirmConversion:active { /* Updated: Added :active for touch */
    background-color: #373737;
    border: 2px solid #c8c8c8;
    transform: scale(1.1);
}

.conversion-options {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

#conversionDescription {
    font-size: 12pt;
    height: 30px;
    width: auto;
    max-width: min(700px, 80vw); /* Updated: Responsive max-width */
    text-align: center;
}


#lessBlocksSettings {
    flex-direction: column;
}

#sizeRange {
    visibility: hidden;
}

#pixelHeightInput {
    margin: 0 !important;
}

#conversionSettingsButton {
    position: relative;
    background: linear-gradient(
        -45deg,
        #1d003e 0%,
        #1d003e 12.5%,
        #001d9d 12.5%,
        #001d9d 37.5%,
        #005508 37.5%,
        #005508 62.5%,
        #3a3e00 62.5%,
        #3a3e00 87.5%,
        #1d003e 87.5%,
        #1d003e 100%
    );
    background-size: 500% 100%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    padding: 15px 20px; /* Updated: Increased padding for touch */
    margin: 5px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: swipeDiagonal 8s linear infinite;
    touch-action: manipulation; /* Updated: Improve touch responsiveness */
    min-height: 44px; /* Updated: Ensure touch target size */
}

#conversionSettingsButton:hover,
#conversionSettingsButton:active { /* Updated: Added :active for touch */
    border-color: #cccccc;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
    animation-play-state: paused;
}

@keyframes swipeDiagonal {
    0% {
        background-position: 500% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* Updated: Add focus styles for accessibility */
button:focus,
input[type="button"]:focus,
.custom-file-label.drop-zone:focus,
.palette-zone:focus,
.navigate-button:focus,
#helpButton:focus,
#conversionSettingsButton:focus,
.escape-button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Updated: Additional media query for very small screens */
@media (max-width: 320px) {
    #outputContainer, #blockCountContainer {
        width: 95vw;
        height: 300px; /* Updated: Reduce height for very small screens */
    }
    #block-display-container {
        max-height: 280px;
    }
    .custom-file-label.drop-zone, .palette-zone, #resetPalette {
        padding: 10px 15px; /* Updated: Further reduce padding */
        font-size: 10pt; /* Updated: Smaller font for small screens */
    }
    #convertButton, #downloadButton, #savePrefrences, #loadPrefrences, #downloadRealButton, #downloadSchemButton, #lowerQualityBtn, #continueBtn, #lowerQualityManualBtn, #conversionSettingsButton {
        padding: 10px 15px; /* Updated: Smaller padding for small screens */
        font-size: 14px; /* Updated: Smaller font */
    }
    #conversionSettings input[type="range"] {
        width: 150px; /* Updated: Smaller range slider */
    }
}

.slider {
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ebe9e7;
    outline: none;
    border-radius: 5px;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    outline: none;
    border: none;
    cursor: pointer;
}
.slider::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

.publisher-content {
    max-width: 2000px;
    width: 90%;
    margin: 40px auto 70px;
    padding: 30px;
    background: linear-gradient(145deg, #14001d, #1e002f, #14001d);
    background-size: 300% 300%;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(113, 25, 255, 0.708);
    color: #e6dcff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 1;
    text-align: left;
    border: #5800b6b1 5px solid;
}

.publisher-content h2, 
.publisher-content h3 {
    margin-bottom: 10px;
    color: #e0e0ff;
}

.publisher-content p, 
.publisher-content li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.publisher-content ol {
    padding-left: 20px;
    margin-bottom: 10px;
}

.sample-conversion {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 15px 0;
    flex-direction: row;
}

.sample-conversion div {
    text-align: center;
}

.sample-conversion img {
    border: 1px solid #ccc;
    display: block;
    margin-bottom: 5px;
    width: 150px;
    height: auto;
    border-radius: 4px;
}