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

/* Define custom fonts */
@font-face {
    font-family: "Fanwood Text Italic";
    src: url("fonts/Fanwood Text Italic.otf") format("opentype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Satoshi Variable";
    src: url("fonts/Satoshi-Variable.ttf") format("truetype-variations");
    /* Assuming it's a variable font, you might need to specify axes ranges if needed */
    font-weight: 100 900; /* Example weight range */
    font-style: normal;
}

body {
    font-family: "Satoshi Variable", sans-serif; /* Set Satoshi as base font */
    line-height: 1.6;
    background-color: #000000; /* Dark background */
    color: #e6e7c7; /* Light text */
    display: flex;
    /* Change flex-direction to column to stack dock and main content */
    flex-direction: column;
    /* Align content to the top instead of centering */
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    /* Increased top padding */
    padding: 6em 2em 2em 2em;
    /* Add overflow-x hidden to prevent scrollbar flash during animation */
    overflow-x: hidden;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

/* Container for header elements */
.header-container {
    position: relative;
    width: 100%;
    max-width: 536px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7em;
    /* Animation properties moved to shared rule */
}

/* Header Logo styles */
.header-logo {
    /* Restore width and display block */
    width: 100%; /* Ensure it takes full width of container */
    max-width: 100%; /* Ensure it doesn't overflow */
    height: auto;
    display: block;
    /* Remove temporary border */
}

/* Spinning Star styles */
.spinning-star {
    position: absolute;
    top: 50%;
    left: 95%; /* Original base value */
    width: 80px;
    height: auto;
    transform-origin: center center;
    animation: spin 10s linear infinite;
    z-index: 1; /* Add z-index */
}

/* Lottie Animation styles */
#lottie-animation {
    position: absolute;
    top: 70%;
    left: 102%; /* Original base value */
    width: 300px; /* Original size */
    height: 300px; /* Original size */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

/* Search Bar Styles */
.search-container {
    margin: 2em 0 4em 0;
    text-align: center;
    /* Needed for icon positioning */
    position: relative;
}

.search-input {
    /* Added padding-left for icon */
    padding: 12px 15px 10px 40px;
    font-size: 0.8em;
    border-radius: 20px;
    border: 1px solid #111111;
    background-color: #0c0c0c;
    color: #e0e0e0;
    width: 600px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    caret-color: #d95228;
    font-family: "Satoshi Variable", sans-serif;
}

/* Remove placeholder styling */
/*
.search-input::placeholder {
    color: #2A2A2A;
    font-family: 'Satoshi Variable', sans-serif;
    font-size: 0.9em;
}
.search-input:focus::placeholder {
    color: transparent;
}
*/

/* Search Icon Styles */
.search-icon {
    position: absolute;
    left: 15px; /* Position from left */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    /* fill: #555; Removed: No longer applies to img tag */
    width: 18px !important; /* Set explicit width and force override */
    height: 18px !important; /* Set explicit height and force override */
    pointer-events: none; /* Don't block input click */
    transition: opacity 0.1s ease-out;
}

/* Hide icon when input is focused */
.search-input:focus + .search-icon {
    opacity: 0;
}

/* Keyframes for the spinning animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- CSS Dock Animation Styles (Adapted) --- */

.dock {
    /* Adjust margins: Top=1em, L/R=auto, Bottom=2em */
    margin: 1em auto 3em auto;
    border-radius: 24px;
    padding: 0 12px;
    /* Change background to solid color */
    background-color: #111111;
    /* background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.05)); */
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 0.5px inset;
    display: flex;
    /* Removed align-items: flex-end; to allow vertical centering of ul */
    /* align-items: flex-end; */
    /* Set calculated fixed height */
    height: 102px;
    /* transition for CSS variables */
    transition:
        --dock-offset-left 100ms cubic-bezier(0.25, 1, 0.5, 1),
        --dock-offset-right 100ms cubic-bezier(0.25, 1, 0.5, 1);
    /* Animation properties moved to shared rule */
}

.dock ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* Keep align-items: flex-end here to align icons within the ul */
    align-items: flex-end;
    /* Ensure ul takes full height to center properly */
    height: 100%;
}

.app {
    width: 94px;
    height: 94px;
    position: relative;
    padding: 0 6px;
    transition:
        width 125ms cubic-bezier(0.25, 1, 0.5, 1),
        height 125ms cubic-bezier(0.25, 1, 0.5, 1),
        margin-top 125ms cubic-bezier(0.25, 1, 0.5, 1);
    /* Allow icons to shrink, remove fixed size */
    /* width: 70px; */ /* Remove fixed width */
    /* height: 70px; */ /* Remove fixed height */
    flex: 1 1 auto; /* Allow grow & shrink, basis auto */
    /* padding: 2px; */ /* Remove padding */
    margin: 0 2px; /* Add small horizontal margin */
    text-align: center; /* Center the image within */
    height: 100%; /* Use full height of parent ul */
    display: flex; /* Use flex to center image */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
}

.app a {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px;
    color: #fff;
    position: relative; /* Needed for absolute positioning of tooltip */
}

.app img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit; /* Inherit rounding from parent link */
}

/* Tooltip Styles */
.tooltip {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    /* Use same solid background color */
    background-color: #111111;
    /* background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.05)); */
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 0.5px inset;
    color: #fff;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.8em;
    font-weight: 500;
    /* Prevent wrapping on each line */
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
    z-index: 10;
}

/* Style for the second line */
.tooltip-type {
    font-style: italic;
    font-size: 0.9em; /* Slightly smaller than main tooltip text */
    color: #aaa; /* Lighter grey */
    font-weight: 400; /* Not bold */
}

/* Show tooltip on app hover */
.app:hover .tooltip {
    opacity: 1;
}

/* --- Hover Effects --- */

/* Hovered item - Removed margin-top */
.app:hover {
    width: 113px;
    height: 113px;
    /* margin-top: -19px; */
}

/* Immediate Right neighbor - Removed margin-top */
.app:hover + .app {
    width: calc(107px + var(--dock-offset-right, 0px));
    height: calc(107px + var(--dock-offset-right, 0px));
    /* margin-top: calc(-13px + var(--dock-offset-right, 0px) * -0.66); */
}

/* Second Right neighbor - Removed margin-top */
.app:hover + .app + .app {
    width: calc(100px + var(--dock-offset-right, 0px));
    height: calc(100px + var(--dock-offset-right, 0px));
    /* margin-top: calc(-6px + var(--dock-offset-right, 0px) * -0.33); */
}

/* Immediate Left neighbor (using :has) - Removed margin-top */
.app:has(+ .app:hover) {
    width: calc(107px + var(--dock-offset-left, 0px));
    height: calc(107px + var(--dock-offset-left, 0px));
    /* margin-top: calc(-13px + var(--dock-offset-left, 0px) * -0.66); */
}

/* Second Left neighbor (using :has) - Removed margin-top */
.app:has(+ .app + .app:hover) {
    width: calc(100px + var(--dock-offset-left, 0px));
    height: calc(100px + var(--dock-offset-left, 0px));
    /* margin-top: calc(-6px + var(--dock-offset-left, 0px) * -0.33); */
}

/* --- End CSS Dock Animation Styles --- */

/* Container for the link boxes */
.container {
    display: flex;
    gap: 0.8em;
    /* Prevent wrapping */
    flex-wrap: nowrap;
    justify-content: center;
    /* Add horizontal scroll if needed */
    overflow-x: auto;
    /* Optional: Add some padding to prevent scrollbar overlapping content */
    padding-bottom: 1em;
    /* Animation properties moved to shared rule */
}

section {
    background-color: #0a0909;
    /* Increased vertical padding */
    padding: 1.5em 1em;
    border-radius: 15px;
    flex: 1;
    min-width: 150px;
    text-align: center; /* Center align text within the box */
}

/* Apply specific fonts within sections */
section h2 {
    font-family: "Fanwood Text Italic", serif;
    color: #d95228;
    margin-bottom: 1em;
    font-size: 0.9em;
    font-weight: normal;
    font-style: italic; /* Explicitly set italic style */
}

section a {
    font-family: "Satoshi Variable", sans-serif;
    text-decoration: none;
    color: #e6e7c7;
    font-size: 0.8em;
    /* Add padding and display for hover effect */
    display: inline-block; /* Allows padding/background */
    padding: 0.1em 0.4em; /* Small padding around text */
    margin: 0 -0.4em; /* Counteract padding to maintain alignment */
    border-radius: 4px; /* Rounded corners for hover */
    /* Add transition for hover effect */
    transition: background-color 0.2s ease-out;
}

section a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Faint white overlay */
    color: #ffffff; /* Optional: Make text slightly brighter on hover */
}

ul {
    list-style: none;
    padding: 0;
}

li {
    /* Reduce bottom margin for tighter linespacing */
    margin-bottom: 0.2em;
}

h2 {
    /* This general h2 rule might be overridden or removed */
    /* if section h2 covers all uses */
    color: #f0ad4e;
    margin-bottom: 1em;
    font-size: 1.1em;
}

a {
    /* This general a rule might be overridden or removed */
    /* if section a covers all uses */
    text-decoration: none;
    color: #d4d4d4;
}

/* Removed h1 styles */
/* Removed footer styles */

/* --- Animation Definitions --- */
@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- Apply Animations --- */

/* Hide elements initially and apply animation */
.dock,
.search-container,
.container {
    opacity: 0; /* Start hidden */
    animation: fadeInScaleUp 0.5s ease-out forwards;
}

/* Stagger the animations */
.dock {
    animation-delay: 0.2s;
}
.search-container {
    animation-delay: 0.3s;
}
.container {
    animation-delay: 0.4s;
}

/* Footer Text Styles */
.footer-left,
.footer-right {
    position: fixed;
    bottom: 1.5em; /* Adjust spacing from bottom */
    font-family: "Satoshi Variable", sans-serif;
    font-size: 0.75em;
    color: #4b4b41;
    z-index: 5; /* Ensure it's above background but below tooltips if needed */
}

.footer-left {
    left: 1.5em; /* Adjust spacing from left */
}

.footer-right {
    right: 1.5em; /* Adjust spacing from right */
}

/* --- Responsive Styles --- */

/* Styles for smaller screens (e.g., mobile phones) */
@media (max-width: 767px) {
    body {
        /* Reduce overall padding on smaller screens */
        padding: 4em 1em 1em 1em;
        /* Remove flex alignment to prevent interference */
        /* align-items: center; */
        /* Revert to block layout on mobile */
        display: block;
    }

    .header-container {
        /* Increase max-width slightly */
        max-width: 70%;
        margin-bottom: 3em; /* Adjust margin */
        /* Revert to auto margins for centering */
        margin-left: auto;
        margin-right: auto;
        /* Ensure positioning context for absolute children */
        position: relative;
        /* Manual offset to counteract right-shift */
        left: -3%; /* Adjusted offset */
    }

    /* Reposition star/lottie relative to smaller mobile header */
    .spinning-star {
        width: 45px;
        height: auto;
        left: 90%; /* Position near right edge using left % */
        top: 45%; /* Adjust vertical position */
        /* Ensure absolute positioning if not inherited */
        position: absolute;
        /* Keep animation etc. */
    }

    #lottie-animation {
        width: 110px;
        height: 110px;
        left: 95%; /* Position near right edge using left % */
        top: 65%; /* Adjust vertical position */
        /* Ensure absolute positioning if not inherited */
        position: absolute;
        /* transform: translate(-50%, -50%); */ /* REMOVE transform */
    }

    .search-container {
        /* Reduce margins, match dock width, and center */
        width: 95%;
        margin: 1.5em auto 2.5em auto; /* Keep top/bottom, center left/right */
        /* Remove text-align: center; as the container itself is centered */
    }

    .search-input {
        /* Make search input fill its container */
        width: 100%;
        padding: 10px 15px 8px 35px; /* Adjust padding slightly */
        box-sizing: border-box; /* Ensure padding/border are included in width */
    }

    .search-icon {
        /* Adjust icon position based absolute positioning within the container */
        /* Left padding of input (35px) minus half icon width approx */
        left: 15px;
        /* We might need to fine-tune icon position later */
    }

    .dock {
        /* Allow dock to take more width and items to wrap */
        width: 95%;
        /* height: auto; */ /* Remove auto height */
        height: 60px; /* Set fixed, smaller height */
        padding: 5px; /* Adjust padding */
        margin-bottom: 2em;
        overflow: hidden; /* Clip content extending beyond rounded corners */
        display: flex; /* Ensure dock itself is flex container */
        align-items: center; /* Vertically center the ul inside */
        border-radius: 16px; /* Reduce corner rounding */
    }

    .dock ul {
        /* Allow items to shrink, distribute space between */
        /* flex-wrap: wrap; */ /* Remove wrapping */
        /* width: 100%; */ /* Remove width */
        justify-content: space-between; /* Distribute space between items */
        align-items: center; /* Vertically center items */
        height: 100%; /* Ensure ul uses full height of dock */
        width: 100%; /* Make ul fill the dock width */
        display: flex; /* Ensure ul is flex container */
        padding: 0; /* Remove default ul padding */
    }

    .app {
        /* Allow icons to shrink, remove fixed size */
        /* width: 70px; */ /* Remove fixed width */
        /* height: 70px; */ /* Remove fixed height */
        flex: 1 1 auto; /* Allow grow & shrink, basis auto */
        /* padding: 2px; */ /* Remove padding */
        margin: 0 2px; /* Add small horizontal margin */
        text-align: center; /* Center the image within */
        height: 100%; /* Use full height of parent ul */
        display: flex; /* Use flex to center image */
        align-items: center; /* Vertical center */
        justify-content: center; /* Horizontal center */
    }

    /* Force image not to inherit border-radius on mobile */
    .app img {
        border-radius: 0; /* Prevent inheriting radius from parent 'a' */
        /* Set width/height to fill .app, respect object-fit */
        /* height: 50px; Removed */
        /* width: auto; Removed */
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Disable hover scaling effects on mobile (can be touch-unfriendly) */
    .app:hover,
    .app:hover + .app,
    .app:hover + .app + .app,
    .app:has(+ .app:hover),
    .app:has(+ .app + .app:hover) {
        width: 70px; /* Keep original size */
        height: 70px;
        margin-top: 0;
        transform: none;
        --dock-offset-left: 0;
        --dock-offset-right: 0;
    }

    .tooltip {
        /* Hide tooltips on mobile, often hard to trigger/see */
        display: none;
    }

    .container {
        /* Change to wrap items in 2 columns */
        flex-direction: row; /* Override previous column direction */
        flex-wrap: wrap;
        align-items: stretch; /* Align items to have same height if needed */
        width: 95%;
        gap: 1em; /* Add gap between wrapped items */
        /* Center the container itself */
        margin-left: auto;
        margin-right: auto;
    }

    section {
        /* Adjust width for 2 columns, smaller % */
        width: 47%; /* Reduced further to force 2 columns */
        flex: 0 0 47%; /* Explicit flex sizing, disable grow/shrink */
        min-width: 0; /* Remove min-width constraint on mobile */
        margin-bottom: 0; /* Remove bottom margin as gap handles spacing */
        box-sizing: border-box; /* Explicitly set box-sizing */
    }

    section ul {
        padding-left: 0; /* Remove default list indentation */
    }

    /* Reduce list item spacing on mobile */
    section li {
        margin-bottom: 0; /* Tighten spacing */
    }

    .footer-left,
    .footer-right {
        /* Adjust footer positioning and size for mobile */
        position: static; /* Remove fixed positioning */
        transform: none;
        text-align: center;
        width: 100%;
        margin-top: 1em;
        font-size: 0.8em;
    }

    .footer-left {
        margin-bottom: 0.5em;
    }
}

/* Styles for medium screens (e.g., tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet-specific styles will go here */
}

/* Styles for larger screens are already defined above */