@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
	--background-color: black;
	--color: white;
}

html,
body {
	width: 100%; 
	min-height: 100vh;
	margin: 0;

	color: var(--color);
	/* Background style */
    background-color: var(--background-color);
    background-image: url('assets/shiroBG.png');
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position: right 20px; /* Position from the right and 20px from the top */
    background-size: auto 110%; /* Scale to viewport height */

	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
    overflow-x: hidden;
}

/* Remove background image on specific pages */
body.no-background {
    background-image: none;
}

.profile-link-item {
	display: inline-block;
	text-decoration: none;
	width: 50px;
	height: 50px;
	background-color: transparent;
}

.profile-link-item:hover {
	cursor: pointer;
}

.profile-link-icon {
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: transparent;
}

.big-logo {
	max-width: 500px;
	width: auto;
	margin-top: 20px;
}

.main-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Allow content to scroll from the top */
	align-items: center;
    width: 100%; /* Ensure main-content takes full width */
    max-width: 100%; /* Prevent horizontal overflow */
    box-sizing: border-box; /* Include padding in width calculation */
    padding-top: 20px; /* Add space below the navbar */

	gap: 20px;
	font-size: 10px;
}

.profile-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.divider {
	width: 90%;
	max-width: 1200px;
	height: 5px;
	background-color: var(--color);
}

.big-button {
	background-color: white;
	border: none;
	width: 500px;
	height: 40px;

	font-size: 20px;
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.big-button-wrapper {
	text-decoration: none;
	display: inline-block;
	transition: transform 0.2s ease-in-out;
}

.big-button:hover {
	cursor: pointer;
	transform: scale(1.05);
}

.hidden {
	display: none !important;
}

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

	flex-direction: column;
	gap: 10px;
	position: fixed; /* This ensures the dialog is positioned relative to the viewport */

	background-color: var(--background-color);
	color: var(--color);
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content from overflowing and causing scrollbars */
}

.dialog.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}
.dialog.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}

.highlighted {
	width: 90%;
	max-width: 500px;
	background-color: var(--color);
	border: 2px solid var(--background-color);
	color: var(--background-color);

	font-size: 20px;
	padding: 10px;
}

.highlighted:hover {
	cursor: pointer;
}

.non-highlighted {
	width: 90%;
	max-width: 500px;
	background-color: var(--background-color);
	border: 2px solid var(--color);
	color: var(--color);

	font-size: 20px;
	padding: 10px;
}

.non-highlighted:hover {
	cursor: pointer;
}

::backdrop {
	background-color: rgba(0, 0, 0, 0.75);
    animation: fadeIn 0.3s ease-out forwards;
}

.dialog-buttons {
    display: flex;
    gap: 10px;
    width: 90%;
    max-width: 500px;
}

.dialog-buttons button {
    flex-grow: 1;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

/* To match homepage dialogs */
#tooltip-dialog .dialog-buttons button {
    background-color: var(--background-color);
    border: 2px solid var(--color);
    color: var(--color);
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

/* Highlight the 'Close' button specifically */
#tooltip-dialog #close-tooltip-dialog {
    background-color: var(--color);
    color: var(--background-color);
}

/* Style the text content inside the tooltip dialog */
#tooltip-dialog #tooltip-dialog-content {
    font-size: 16px;
    line-height: 1.5;
    text-align: center; /* Center the text for a cleaner look */
}

/* Style the title of the tooltip dialog */
#tooltip-dialog #tooltip-dialog-title {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* 24px */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
}

.big-text {
	font-size: 150px;
	margin: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes interact {
	0% {

	}
	50% {

	}
	100% {
		
	}
}

.construction-notice {
    font-size: 24px;
    color: #ffcc00;
    margin: 20px 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 80%;
    max-width: 1200px;
    margin-top: 30px;
}

.project-card {
    background: var(--background-color);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 0;
    padding: 20px;
    color: white;
    transition: all 0.2s ease-in-out;
    position: relative;
    flex: 0 1 320px; /* Flex properties to control sizing */
}

.project-card-content {
    padding-bottom: 50px;
}


.project-card:hover {
    background: rgba(20, 20, 20, 0.8); /* Darker, semi-opaque background on hover for readability */
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.project-card h3 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 1.4rem;
}

.project-card p {
    margin: 0;
    color: #ccc;
    font-size: 0.9rem;
}

.github-button {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    color: black;
    padding: 8px 15px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
}

.github-button:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

.github-icon {
    width: 20px;
    height: 20px;
    background-color: black;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>');
    mask-size: cover;
}

/* ================ PORTFOLIO PAGE STYLES ================ */
.portfolio-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
    max-width: 700px;
    margin-top: 20px;
}

.portfolio-button {
    background: var(--background-color);
    border: 1px solid rgb(255, 255, 255);
    border-radius: 0;
    padding: 20px;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.portfolio-button:hover {
    background: rgba(20, 20, 20, 0.8);
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.portfolio-button h3 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 1.4rem;
}

.portfolio-button p {
    margin: 0;
    color: #ccc;
    font-size: 0.9rem;
}

/* ================ PORTFOLIO HEADER STYLE ================ */
.portfolio-header {
    font-size: 48px;
    margin: 20px 0;
    text-align: center;
    color: var(--color);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    width: 100%;
}

/* ================ GAMES PAGE STYLES ================ */
.games-header {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 20px;
}

.games-header p {
    max-width: 800px;
    margin: 0 auto;
    color: #aaa;
    font-size: 18px;
    line-height: 1.6;
}

.section-title {
    font-size: 28px;
    margin: 30px 0 20px;
    text-align: center;
    color: var(--color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    width: 100%;
}
.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--color);
}
.info-icon {
    width: 24px;
    height: 24px;
    background-image: url('assets/info.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: help;
}

.games-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 1250px;
    margin-top: 0;
}

.game-actions {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5; /* Ensure actions are on top of other card content */
}

/* When there's only a play button, make sure it's on the left */
.game-actions:has(.roblox-button:only-child) {
    justify-content: flex-start;
}

.game-card {
    background: var(--background-color);
    border: 1px solid #ffffff;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgb(0, 0, 0);
    flex: 0 1 350px; /* Prevent cards from growing, maintain base size */
}

.game-card:hover {
    transform: scale(1.03);
    background: rgba(20, 20, 20, 0.8); /* Darker, semi-opaque background on hover for readability */
    border-color: rgba(255, 255, 255, 0.3);
    z-index: 10; /* Bring the hovered card to the front */
}

.game-card-content {
    flex-grow: 1;
    padding-bottom: 50px; 
}

.thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.game-info {
    padding: 20px;
    position: relative;
    flex-grow: 1; /* Allow this container to fill the card height */
    display: flex; /* Use flexbox to manage children */
    flex-direction: column; /* Stack children vertically */
}

.game-info h3 {
    margin: 0 0 12px 0;
    color: var(--color);
    font-size: 20px;
    font-weight: 700;
}

.game-info p {
    margin: 0;
    color: #aaa;
    font-size: 14px;
    line-height: 1.5;
}

.game-card-content {
    flex-grow: 1;
    /* The padding-bottom was causing the content box to overlap the actions.
       The flex layout of game-info now handles the spacing. */
}

.roblox-button {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    color: #000;
    padding: 8px 15px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
}

.roblox-button:hover {
    background-color: #e6e6e6;
    transform: scale(1.05);
}

.roblox-logo {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .games-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .games-container {
        grid-template-columns: 1fr;
        max-width: 500px;
        width: 90%;
    }
    
    .big-text {
        font-size: 100px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .big-logo {
        width: 90%;
        max-width: 500px;
    }

    .big-button {
        width: 90vw;
        max-width: 500px;
    }

    /* Make portfolio button inside the profile box fit correctly on mobile */
    .profilelinks-box .big-button {
        width: 100%;
        max-width: none; /* Remove max-width to allow it to fill the container */
        height: 50px; /* Make the button a bit taller on mobile */
    }

    /* Apply hover background effect permanently on mobile */
    .project-card,
    .portfolio-button,
    .game-card {
        background: rgba(20, 20, 20, 0.8);
    }

    /* Disable transform on hover for mobile to prevent layout shifts on tap */
    .project-card:hover,
    .portfolio-button:hover,
    .game-card:hover {
        transform: none;
    }

    /* Disable hover-scaling on mobile for social links and buttons */
    .profile-link-item:hover,
    .profilelinks-box .big-button-wrapper:hover,
    .big-button:hover {
        transform: none;
    }

}

@media (max-width: 480px) {
    .big-text {
        font-size: 80px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .game-info {
        padding: 15px;
        padding-bottom: 60px;
    }
    
    .roblox-button {
        padding: 8px 16px;
        font-size: 14px;
    }
}

/* Center background on portrait mobile */
@media (max-width: 768px) and (orientation: portrait) {
    html, body {
        background-position: center 20%; /* Shift image up to bring ears closer to the top */
        background-size: 170% auto; /* Increase scale to ensure feet are cropped more */
    }
}


/* Utility class to center items in a container */
.centered-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile Landscape adjustments */
@media (max-width: 900px) and (orientation: landscape) {
    .main-content {
        padding: 10px 0; /* Reduce vertical padding for landscape */
        gap: 10px; /* Reduce space between elements for landscape */
    }

    .big-button {
        width: 60%; /* Make button smaller in landscape */
        max-width: 250px; /* Even smaller max-width for button */
        height: 30px; /* Reduce button height for landscape */
        font-size: 16px; /* Reduce button font size for landscape */
    }

    .profile-links {
        width: 90%; /* Ensure social links container takes up less width for landscape */
        gap: 10px; /* Reduce gap between social icons for landscape */
    }

    .profile-link-item {
        width: 40px; /* Smaller social icons for landscape */
        height: 40px;
    }

    .big-text {
        font-size: 30px; /* Smaller main heading for landscape */
    }

    h1 { /* General h1 adjustment for landscape */
        font-size: 1.5rem;
    }

    .portfolio-header {
        font-size: 30px;
    }
}

/* ================ HOME PAGE ================ */

.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 90%;
    max-width: 1000px;
}

.info-box {
    border: 2px solid var(--color);
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
}

.info-box h3 {
    margin-top: 0;
    border-bottom: 1px solid var(--color);
    padding-bottom: 5px;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-box ul {
    list-style-type: square;
    padding-left: 20px;
}

/* Target p and ul only in info-boxes that are NOT the music-artists box */
.info-box:not(.music-artists) p, .info-box:not(.music-artists) ul {
    font-size: 16px; /* Increase font size for better readability */
    line-height: 1.5;
}

.about-me {
    grid-column: 1 / -1; /* Span full width */
}

.music-artists {
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
}
.profilelinks-box {
    grid-column: 1 / -1; /* Span full width */
    text-align: center;
    width: 90%;
    max-width: 1000px;
    position: relative; /* Needed for child absolute positioning */
    overflow: hidden; /* This will clip the animation to the frame */
    box-sizing: border-box;
}
.profilelinks-box .big-button-wrapper {
    /* Add space between the social icons and the portfolio button */
    margin-top: 20px;
    display: block; /* Make the anchor a block element */
}
.profilelinks-box .big-button-wrapper + .big-button-wrapper {
    margin-top: 10px; /* Add space between consecutive buttons */
}
.profilelinks-box .big-button {
    height: 30px; /* Reduced height */
    font-size: 16px; /* Smaller font */
    margin-bottom: 0; /* Remove bottom margin as wrapper handles spacing */
}
.profilelinks-box .big-button-wrapper {
    margin-top: 10px; /* Adjust top margin for spacing */
}
.profilelinks-box .divider {
    width: 100%; /* Make divider span the width of the box */
    max-width: none;
    height: 2px; /* Make it a bit thinner */
    margin: 20px 0; /* Add some vertical space */
}


.artist-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 150px; /* A bit wider to accommodate text */
}

.artist-name {
    font-weight: bold;
    margin-bottom: 2px;
}

.song-title {
    font-style: italic;
    color: #ccc;
    margin-bottom: 8px;
}
.artist-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.hyperfixations-box .artist-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.artist {
    width: 100px;
    height: 100px;
    border: 2px solid var(--color);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.artist:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.artist.playing {
    border-color: #ffcc00;
    box-shadow: 0 0 20px #ffcc00;
}

.hyperfixation-image {
    width: 100px;
    height: 100px;
    border: 2px solid var(--color);
    cursor: pointer;
    object-fit: cover; /* Ensures non-square images scale correctly without stretching */
    transition: transform 0.2s, box-shadow 0.2s;
}

.hyperfixation-image:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.affiliates {
    width: 100%;
    margin-top: 40px;
    border-top: 2px solid var(--color);
    padding-top: 20px;
    box-sizing: border-box;
}

.affiliates-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.affiliates-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

.affiliates-scroll img {
    height: 31px;
    width: 88px;
    flex-shrink: 0; /* Prevents buttons from shrinking */
}

/* Add hover effect for linked affiliate buttons */
.affiliates-scroll a {
    transition: transform 0.2s ease-in-out;
    display: inline-block; /* Ensure transform works correctly */
}

.affiliates-scroll a:hover {
    transform: scale(1.1);
}

/* ================ FAQ SECTION ================ */
.faq-box {
    grid-column: 1 / -1; /* Span full width */
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between each Q&A item */
    margin-top: 15px;
}

.faq-item h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color);
}

.faq-item p {
    margin: 0;
    line-height: 1.6;
}

/* Style for the clickable Mow Mow text */
#mow-mow-trigger {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Style for the image in the Mow Mow dialog */
.mow-mow-carousel-container {
    width: clamp(280px, 70vw, 450px); /* Responsive width: min 280px, 70% of viewport, max 450px */
    aspect-ratio: 3 / 4; /* Maintain image aspect ratio */
    position: relative;
    perspective: 1200px; /* Creates the 3D space */
}

.mow-mow-carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.mow-mow-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--color);
    box-sizing: border-box;
    -webkit-backface-visibility: hidden; /* For Safari */
    backface-visibility: hidden; /* Hides the back of the element when rotated */
}

/* Position each slide in the 3D space. The translateZ value is based on the new max-width. */
.mow-mow-slide:nth-child(1) { transform: rotateY(0deg) translateZ(260px); }
.mow-mow-slide:nth-child(2) { transform: rotateY(120deg) translateZ(260px); }
.mow-mow-slide:nth-child(3) { transform: rotateY(240deg) translateZ(260px); }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid white;
    font-size: 2rem;
    cursor: pointer;
    padding: 5px 10px;
    z-index: 10;
    user-select: none;
    transition: background-color 0.2s;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
    left: 10px;
}
.carousel-btn.next {
    right: 10px;
}

@media (max-width: 768px) {
    .home-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
    }

    /* Add rainbow outline to affiliate buttons on mobile */
    .affiliates-scroll a {
        border: 2px solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        box-sizing: border-box; /* Ensure border is included in element's size */
    }
}

/* Styles for details/summary dropdowns */
details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative; /* For absolute positioning of the pseudo-element */
}

details > summary::-webkit-details-marker {
    display: none; /* Remove default triangle for Safari/Chrome */
}

details > summary h3::before {
    content: '▶';
    font-size: 0.9em; /* Adjust size to be proportional to text */
    transition: transform 0.2s ease-in-out;
}

details > summary h3 {
    display: flex;
    align-items: center; /* This is key for vertical alignment */
    justify-content: center; /* Center the inner span */
    width: 100%;
    border-bottom: none;
    padding-bottom: 0;
}

details[open] > summary h3::before {
    transform: rotate(90deg);
}

details > summary h3 span {
    margin: 0 auto; /* This centers the text, ignoring the arrow */
}

/* ================ WEBSITE BUTTON SECTION ================ */
.website-button-section {
    text-align: center;
    width: 90%;
    margin: 20px auto 0; /* Center the container horizontally */
    max-width: 700px;
}

.website-button-section h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.code-textbox {
    width: 100%;
    padding: 10px;
    background-color: #000;
    border: 1px solid var(--color);
    color: var(--color);
    font-family: monospace;
    font-size: 14px;
    box-sizing: border-box;
}

/* ================ FLAG GRADIENT TEXT ================ */
.flag-pansexual, .flag-gnc, .flag-rainbow {
    /* The gradient is always there, but the text color covers it */
    background-clip: text;
    -webkit-background-clip: text; /* For Safari/Chrome */
    color: var(--color); /* Initial text color */
    transition: color 0.3s ease-in-out;
    font-weight: bold;
}

.flag-pansexual {
    background-image: linear-gradient(to right, #FF218C, #FFD800, #21B1FF);
}

.flag-gnc {
    background-image: linear-gradient(to right, #50284c, #96477a, #5c97f7, #ffe6f8);
}

.flag-genderfluid {
    background-image: linear-gradient(to right, #FF76A4, #FFFFFF, #C011D7, #000000, #2F3CBE);
    background-clip: text;
    -webkit-background-clip: text;
    transition: color 0.3s ease-in-out;
    font-weight: bold;
}

.flag-rainbow {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

.flag-pansexual:hover, .flag-gnc:hover, .flag-rainbow:hover {
    /* On hover, make the text color transparent to reveal the gradient underneath */
    color: transparent;
    cursor: default;
}

/* Make gradient visible on the mobile tooltip dialog title */
#tooltip-dialog-title.flag-pansexual,
#tooltip-dialog-title.flag-gnc,
#tooltip-dialog-title.flag-rainbow,
#tooltip-dialog-title.flag-genderfluid {
    color: transparent;
}

/* Utility class for adding an outline to text */
.text-outline {
    /* Use filter: drop-shadow for the outline to avoid conflicts with background-clip */
    filter: drop-shadow(1px 1px 0 var(--color)) drop-shadow(-1px -1px 0 var(--color)) drop-shadow(1px -1px 0 var(--color)) drop-shadow(-1px 1px 0 var(--color));
}
/* ================ TOOLTIP STYLES ================ */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip-box {
    visibility: hidden;
    width: max-content;
    max-width: 250px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: var(--color);
    text-align: left;
    border: 2px solid var(--color);
    border-radius: 0;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the text */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    flex-direction: column; /* Stack content vertically */
    display: flex; /* Use flexbox for layout */
    white-space: normal; /* Allow text to wrap */
    font-size: 14px; /* Increase font size for readability */
    line-height: 1.4; /* Improve line spacing */
}

.tooltip-container:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
}

/* Styles for multi-page tooltips */
.tooltip-page {
    display: none;
}

.tooltip-page.active {
    display: block;
}

.tooltip-nav {
    display: flex;
    justify-content: center; /* Center the arrows */
    margin-top: 8px;
    border-top: 1px solid var(--color);
    padding-top: 5px;
    gap: 15px; /* Add some space between the arrows */
}

.tooltip-nav button {
    background: none;
    border: none;
    color: var(--color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 5px;
}

.tooltip-nav button:hover {
    color: #aaa;
}

/* Style for disabled pagination buttons */
.tooltip-nav button:disabled, #tooltip-dialog .dialog-buttons button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Mobile dialog pagination */
#tooltip-dialog .dialog-buttons {
    justify-content: space-between;
    align-items: center;
}
/* Center title text in mobile tooltip dialog */
#tooltip-dialog-title {
    text-align: center;
}

/* On mobile, hide the hover tooltip and use a dialog instead */
@media (max-width: 768px) {
    .tooltip-box {
        display: none !important;
    }

    /* On mobile, show gradient text as bold default color and not interactive */
    .flag-pansexual,
    .flag-gnc,
    .flag-rainbow,
    .flag-genderfluid {
        color: var(--color); /* Use default text color */
        cursor: default;   /* Prevent cursor change on tap */
    }
}

/* ================ ROBLOX PEEK ANIMATION ================ */
#roblox-peek {
    position: absolute; /* Position relative to .profilelinks-box */
    bottom: 0;
    right: 0;
    width: 150px; /* Adjust size as needed */
    height: auto;
    z-index: 1000;
    pointer-events: none; /* Prevents the image from blocking mouse events */
    transform: translate(0, 100%); /* Start hidden directly below its final position */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy transition */
}

#roblox-peek.peek {
    transform: translate(0, 10%); /* Slide into view, slightly cropped at the bottom */
}

/* New class for uncropped peek */
#roblox-peek.peek-full {
    transform: translate(0, 0); /* Slide fully into view */
}

/* Hide on mobile devices */
@media (max-width: 768px) {
    #roblox-peek { display: none !important; }
}

/* ================ 404 PAGE ================ */
.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    padding: 20px;
}

.quirky-joke {
    font-size: 1.2rem;
    color: #ccc;
    margin: 0;
}

.not-found-image {
    max-width: 300px;
    width: 80%;
    aspect-ratio: 588 / 618; /* Aspect ratio of 404.png */
    background-image: url('assets/404.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.not-found-image:hover {
    cursor: pointer;
}

@keyframes squish {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.1, 0.8) translateY(10%);
    }
    100% {
        transform: scale(1, 1);
    }
}

/* ================ WOBBLE TEXT ANIMATION ================ */
.wobble-char {
    position: relative; /* Keep this for positioning */
    display: inline-block; /* Required for transform to work correctly */
    animation: wobble-bounce 1.2s ease-in-out infinite;
}

@keyframes wobble-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-13px); /* Controls the "bounce" height */
    }
}

#current-squeeze-counter {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ccc;
    margin: 15px 0;
}

#current-squeeze-count {
    display: inline-block; /* Needed for animation */
    color: var(--color);
}

.count-up-animation {
    animation: count-up 0.4s ease-out;
}

#total-squeeze-counter {
    font-size: 1.2rem;
    color: #aaa;
    margin: -10px 0 5px 0;
}

@keyframes count-up {
    0% { transform: translateY(15px); opacity: 0; }
    50% { transform: translateY(-5px); opacity: 1; }
    100% { transform: translateY(0); }
}

.squeeze-stats-container {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#record-counter {
    font-size: 1.2rem;
    color: #aaa;
    margin: 0 0 15px 0;
}

#record-count {
    font-weight: bold;
    color: #ffcc00; /* Gold color for the record */
}

/* ================ CONFETTI EFFECT ================ */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 20px;
    opacity: 0;
    animation: fall 4s ease-in forwards;
}

@keyframes fall {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}