:root {
    /* Font Faces */
    --font-heading: 'Press Start 2P', cursive;
    /* Blocky/Pixelated */
    --font-body: 'VT323', monospace;

    /* Light Mode (Classic Minecraft) */
    --bg-color: #C6C6C6;
    --text-color: #3f3f3f;
    --panel-bg: #C6C6C6;
    --border-light: #ffffff;
    --border-dark: #555555;
    --slot-bg: #8b8b8b;
    --slot-hover: #a0a0a0;
    --header-color: #3f3f3f;
    --accent-color: #383838;
    --sidebar-bg: #C6C6C6;
    --highlight: #808080;

    /* Layout */
    --sidebar-width: 300px;
    --header-height: 60px;
}

[data-theme="dark"] {
    /* Dark Mode (High Contrast Charcoal) */
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    /* High Contrast White */
    --panel-bg: #2d2d2d;
    --border-light: #505050;
    --border-dark: #000000;
    --slot-bg: #111111;
    --slot-hover: #333333;
    --header-color: #FFAA00;
    /* Burnt Yellow Orange */
    --accent-color: #FFAA00;
    --sidebar-bg: #222222;
    --highlight: #444444;
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 20px;
    height: 100vh;
    overflow: hidden;
    /* Ensure textures stay crisp */
    transition: background-color 0.3s, color 0.3s;
}

@media (max-width: 768px) {
    body {
        height: auto;
        overflow-y: auto;
        /* Native scroll */
    }
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--header-color);
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border: 2px solid var(--border-light);
}

/* App Layout */
#app-container {
    display: flex;
    height: 100%;
}

/* Sidebar */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 4px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-shadow: inset -2px -2px 0px var(--border-light), inset 2px 2px 0px var(--border-light);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-dark);
    margin-bottom: 10px;
}

#app-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Center it */
    max-height: 80px;
    /* Limit height so it doesn't dominate */
}



.search-container input {
    width: 100%;
    padding: 8px;
    font-family: var(--font-body);
    font-size: 18px;
    border: 2px solid var(--border-dark);
    border-right-color: var(--border-light);
    border-bottom-color: var(--border-light);
    background-color: var(--slot-bg);
    color: var(--text-color);
    margin-bottom: 10px;
}

#category-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

.minecraft-select {
    width: 100%;
    background-color: var(--slot-bg);
    color: var(--text-color);
    border: 2px solid var(--border-dark);
    border-right-color: var(--border-light);
    border-bottom-color: var(--border-light);
    padding: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 0;
    /* Reset bottom margin for flex context */
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2);
    flex: 1;
    /* Take accessible width */
}

/* Sidebar Theme Toggle (Inline) */
#sidebar-theme-toggle {
    width: 50px;
    height: 38px;
    /* Match select height roughly */
    background-color: var(--slot-bg);
    border: 2px solid var(--border-dark);
    border-right-color: var(--border-light);
    border-bottom-color: var(--border-light);
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

#sidebar-theme-toggle::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-color: #C6C6C6;
    border: 2px solid var(--border-light);
    border-right-color: var(--border-dark);
    border-bottom-color: var(--border-dark);
    position: absolute;
    transform: translateY(-50%);
    transition: left 0.2s;
}

/* 3D Minecraft Button Style */
.minecraft-btn {
    flex: 1;
    background-color: #7E7E7E;
    /* Stone grey base */
    color: #000;
    text-decoration: none;
    text-align: center;
    border: 2px solid;
    border-color: #FFF #555 #555 #FFF;
    /* Top Right Bottom Left: Light, Dark, Dark, Light */
    padding: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-shadow: 2px 2px #000; Removed for readability */
    box-shadow: inset -2px -2px #555, inset 2px 2px #FFF, 2px 2px 0px #000;
    /* Deepen the bezel */
    transition: background-color 0.1s;
}

.minecraft-btn:hover {
    background-color: #909090;
    /* Slightly lighter on hover */
    border-color: #FFF #7E7E7E #7E7E7E #FFF;
    /* Softer shadow */
}

.minecraft-btn:active {
    background-color: #6E6E6E;
    border-color: #555 #FFF #FFF #555;
    /* Inset effect */
    box-shadow: inset 2px 2px #000;
    transform: translateY(2px);
}

#sidebar-links {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

[data-theme="dark"] #sidebar-theme-toggle {
    background-color: #222;
}

[data-theme="dark"] #sidebar-theme-toggle::after {
    left: 28px;
    background-color: var(--accent-color);
    border-color: #FFF;
    border-right-color: #AA5500;
    border-bottom-color: #AA5500;
}

.minecraft-select:focus {
    outline: none;
    background-color: var(--highlight);
}

#recipe-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Allow shrinking in flex container */
    border: 2px solid var(--border-dark);
    background-color: var(--slot-bg);
}

.recipe-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-dark);
    transition: background-color 0.2s;
    font-size: 18px;
}

.recipe-item:hover {
    background-color: var(--highlight);
}

.recipe-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    image-rendering: pixelated;
}

/* Main Content */
/* Main Content */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/dirtbg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#crafting-area {
    background-color: var(--panel-bg);
    padding: 30px 40px;
    border: 4px solid var(--border-dark);
    border-top-color: var(--border-light);
    border-left-color: var(--border-light);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    min-width: 400px;
    /* Ensure frame is substantial */
}

/* Header Elements */
#current-recipe-name {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    width: 100%;
}

/* Pin Button Positioned Top Right */
#pin-recipe {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
    filter: grayscale(100%);
    opacity: 0.6;
}

#pin-recipe:hover {
    transform: scale(1.2);
    opacity: 1;
    filter: none;
}

#pin-recipe.active {
    filter: none;
    opacity: 1;
    transform: rotate(-30deg);
    /* Visual "stuck in" angle */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

#pin-recipe.active:hover {
    transform: scale(1.2) rotate(-30deg);
    /* Maintain angle on hover */
}

.crafting-ui {
    display: flex;
    flex-direction: column;
    /* Stack label above grid */
    align-items: center;
    gap: 10px;
}



.crafting-ui-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center everything horizontally */
    gap: 20px;
    /* Reduced gap slightly to tighten it up */
    width: 100%;
    /* Ensure it spans the container to allow centering */
}

/* Grid Single Centering Update */
.grid-single {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    /* Collapse width to content so gaps are accurate */
    min-width: 48px;
    height: 148px;
    /* Keep height to prevent vertical jumping */
    margin: 0;
}

#recipe-description {
    text-align: center;
    margin-top: 20px;
    color: var(--text-color);
    font-size: 18px;
    max-width: 80%;
}

/* Grid Slots */
.slot {
    width: 48px;
    /* 16px * 3 */
    height: 48px;
    background-color: var(--slot-bg);
    border: 2px solid var(--border-light);
    border-top-color: var(--border-dark);
    border-left-color: var(--border-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.grid-icon,
.result-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
    /* Default Square Clip-Path (matches 6-point stair polygon for smooth morph) */
    clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}

.result-icon {
    width: 48px;
    height: 48px;
}

/* Shape Modifications */
.shape-wall,
.shape-fence {
    transform: scaleX(0.5);
    /* Narrow post look */
}

.shape-slab {
    transform: scaleY(0.5) translateY(50%);
    /* Half height, bottom aligned */
}

.shape-stairs {
    /* Top-Right Cutout */
    clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%);
}

.shape-button {
    transform: scale(0.4);
}

.shape-plate {
    transform: scaleY(0.2) translateY(200%);
}

.shape-carpet {
    transform: scaleY(0.15) translateY(280%);
}

.icon-wrapper {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
}

.icon-wrapper .recipe-icon {
    margin-right: 0;
    /* Reset margin since wrapper handles it */
}

.icon-wrapper.shape-wall .recipe-icon,
.icon-wrapper.shape-fence .recipe-icon {
    transform: scaleX(0.6);
}

.icon-wrapper.shape-slab .recipe-icon {
    transform: scaleY(0.5) translateY(25%);
}

.icon-wrapper.shape-stairs .recipe-icon {
    clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%);
}

/* Foliage Tinting */
.tint-foliage .recipe-icon,
.grid-icon.tint-foliage,
.result-icon.tint-foliage {
    /* Hardcoded "Plains" biome green approx #77AB2F */
    /* Sepia takes it to brown, logic: */
    /* filter: sepia(100%) hue-rotate(80deg) saturate(300%) brightness(0.8); -> Greenish */
    /* Better approach: tint with background color and mix-blend-mode if container allows. */
    /* But .recipe-icon is an img. Let's try filter approach first. */
    /* Update: User requested more intensity. Boosting saturation and lowering brightness. */
    filter: sepia(100%) hue-rotate(90deg) saturate(300%) brightness(0.6) contrast(1.2);
}

.slot:hover {
    background-color: var(--slot-hover);
}

.grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
    gap: 2px;
}

/* Station Animations */
.arrow {
    font-size: 32px;
    color: var(--text-color);
    width: 32px;
    /* Standard arrow width */
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -2px;
    /* Subtle nudge for visual balance */
}

/* Fire Animation */
.arrow-fire {
    font-size: 0;
    width: 16px;
    /* Native sprite width */
    height: 16px;
    /* Native sprite height */
    background-image: url('../assets/textures/fire_0.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    animation: play-fire 2s steps(32) infinite;
    transform: scale(2);
    /* Scale up to match 32px UI */
    transform-origin: center;
    margin: 8px;
    /* Maintain spacing */
    position: relative;
    left: -2px;
}

@keyframes play-fire {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -512px;
    }

    /* Native height */
}

/* Saw Animation */
.arrow-saw {
    font-size: 0;
    width: 16px;
    height: 16px;
    background-image: url('../assets/textures/stonecutter_saw.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    animation: play-saw 0.5s steps(3) infinite;
    transform: scale(2);
    transform-origin: center;
    margin: 8px;
    /* Maintain spacing */
    position: relative;
    left: -2px;
}

@keyframes play-saw {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -48px;
    }

    /* Native height */
}

.output-slot {
    width: 64px;
    height: 64px;
    background-color: var(--slot-bg);
    border: 2px solid var(--border-light);
    border-top-color: var(--border-dark);
    border-left-color: var(--border-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.output-slot .slot {
    width: 64px;
    height: 64px;
}

.output-count {
    position: absolute;
    bottom: 0;
    right: 2px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 0 #000;
}

/* Tooltip */
.minecraft-tooltip {
    position: fixed;
    background: rgba(16, 0, 16, 0.95);
    /* Dark purple-ish background */
    color: white;
    padding: 4px 6px;
    border: 2px solid #2e004e;
    /* Borders */
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 16px;
    pointer-events: none;
    display: none;
    z-index: 1000;
    text-shadow: 2px 2px 0px #000;
    white-space: nowrap;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #app-container {
        flex-direction: column;
        height: auto;
        /* Let content dictate height */
        overflow: visible;
        /* No internal scroll */
    }

    /* Hide sidebar by default on mobile */
    /* Hide sidebar by default on mobile */
    #sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        /* Hide completely regardless of width */
        width: 75vw;
        /* Responsive width */
        max-width: 280px;
        /* Cap at 280px */
        height: 100vh;
        height: 100dvh;
        /* Dynamic Viewport Height for mobile browsers */
        z-index: 3000;
        transition: left 0.3s ease-in-out;
        border-right: 4px solid var(--border-dark);
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5);
    }

    #sidebar.active {
        left: 0;
    }

    /* Mobile Menu Overlay */
    #mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 2900;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    #mobile-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Mobile Header */
    #mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 120px;
        /* Initial large height */
        background-color: var(--bg-color);
        border-bottom: 4px solid var(--border-dark);
        z-index: 2800;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #mobile-logo {
        height: 80px;
        /* Initial large logo */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Scrolled State */
    #mobile-header.scrolled {
        height: 60px;
        /* Shrink height */
        justify-content: flex-start;
        padding-left: 15px;
        background-color: var(--bg-color);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    }

    #mobile-header.scrolled #mobile-logo {
        height: 40px;
        /* Shrink logo */
    }

    /* Mobile Toggle Button (Hammer) */
    /* Initial: Centered Button under Logo */
    #mobile-menu-toggle {
        display: flex;
        position: absolute;
        top: 130px;
        /* Below the 120px header + padding */
        left: 50%;
        transform: translateX(-50%);
        z-index: 2900;
        width: auto;
        white-space: nowrap;
        /* Ensure text is on one line */
        height: 40px;
        padding: 0 20px;
        background-color: var(--slot-bg);
        border: 2px solid var(--border-light);
        border-bottom-color: var(--border-dark);
        border-right-color: var(--border-dark);
        font-family: var(--font-body);
        font-size: 16px;
        color: var(--text-color);
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        gap: 10px;
    }

    #mobile-menu-toggle .btn-icon {
        font-size: 20px;
    }

    /* Scrolled Hammer: Jumps to Top Right & Becomes Icon Only */
    #mobile-menu-toggle.scrolled {
        position: fixed;
        top: 10px;
        left: auto;
        right: 15px;
        transform: none;
        /* Remove centering transform */
        width: 40px;
        /* Square */
        padding: 0;
        background-color: var(--bg-color);
        z-index: 3100;
        /* Above header */
    }

    #mobile-menu-toggle.scrolled .btn-text {
        display: none;
        /* Hide text */
    }

    #mobile-menu-toggle:active {
        border: 2px solid var(--border-dark);
        border-bottom-color: var(--border-light);
        border-right-color: var(--border-light);
        transform: translateX(-50%) translateY(2px);
        /* Maintain centering + offset */
    }

    #mobile-menu-toggle.scrolled:active {
        transform: translateY(2px);
        /* Regular offset for scrolled state */
    }

    /* Hide Logo in Sidebar on Mobile (since it's in header) */
    #sidebar .sidebar-header {
        display: none;
    }

    /* Adjust Sidebar Top Padding since header is gone */
    #sidebar {
        padding-top: 20px;
    }



    /* Scrolled Hammer: Jumps to Top Right */
    #mobile-menu-toggle.scrolled {
        position: fixed;
        top: 10px;
        left: auto;
        right: 15px;
        background-color: var(--bg-color);
        /* Match header */
    }



    /* Adjust Main Content to not be hidden by toggle */
    /* Adjust Main Content to not be hidden by toggle */
    /* Adjust Main Content to not be hidden by toggle/header */
    /* Adjust Main Content to not be hidden by toggle/header */
    /* Adjust Main Content to not be hidden by toggle/header */
    #main-content {
        padding-top: 220px;
        /* Increased safety margin */
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 100px;
        /* Ensure background extends below content */
        min-height: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        /* Prevent centering overlap */
    }

    #recipe-list {
        max-height: none;
        /* Let it fill the sidebar height */
    }

    #theme-toggle {
        display: none !important;
    }

    #crafting-area {
        flex-direction: column;
        width: 100%;
        /* Make it full width */
        min-width: auto;
        /* Override desktop min-width */
        padding: 20px 10px;
        /* Reduce padding to fit content */
        box-sizing: border-box;
        /* Ensure padding doesn't add to width */
        /* Ensure padding doesn't add to width */
    }

    .crafting-ui-inner {
        flex-direction: column;
        /* Stack grid and output on very small screens? */
        /* Actually, keep side-by-side but scale down if needed. 
           User said "grid is floating over edges", implying grid is wider than container.
           Grid 3x3 is ~150px wide. Output is ~64px. Arrow ~32px. Total ~250px.
           Should fit side-by-side on 320px+. 
           The issue is likely the container padding + min-width.
        */
        gap: 10px;
    }

    #current-recipe-name {
        font-size: 20px;
        /* Smaller title */
        margin-bottom: 10px;
        word-wrap: break-word;
        /* Prevent long words breaking layout */
    }
}


/* Desktop default for toggle */
@media (min-width: 769px) {

    #mobile-menu-toggle,
    #mobile-overlay,
    #mobile-header,
    #sidebar-footer {
        display: none;
    }
}

/* Animations */
@keyframes zoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pop {
    animation: zoomIn 0.66s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Smooth overshoot */
}


/* Sidebar Branding */
#sidebar-branding {
    margin-top: auto;
    /* Push to bottom */
    padding: 10px;
    /* Reduced padding */
    text-align: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-top: 1px solid var(--border-dark);
}

#sidebar-branding:hover {
    opacity: 1;
}

#sidebar-sfl-logo {
    max-width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Mobile Modal */
#sfl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}

#sfl-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.sfl-modal {
    width: 300px;
    background: linear-gradient(40deg, #006b63 0%, #203152 50%, #3a0043 100%);
    border: 2px solid #f3b23e;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    color: #E0E0E0;
    /* Ensure text is off-white in all themes */
}

#sfl-modal-overlay.hidden .sfl-modal {
    transform: scale(0.8);
}

#close-modal {
    margin-top: 15px;
    background: transparent;
    border: 1px solid #f3b23e;
    color: #f3b23e;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

#close-modal:hover {
    background: #f3b23e;
    color: #000;
}

/* Hide Sidebar Branding on Desktop if Sidebar is hidden/different? 
   Actually sidebar is always visible on Desktop but maybe we only want it on Mobile?
   User said "for the mobile view". 
   Let's check if sidebar is visible on desktop. 
   Yes, typically left sidebar. 
   If user only wants it for "Mobile View", we should hide it on desktop media query.
*/
@media (min-width: 769px) {
    #sidebar-branding {
        display: none;
    }
}

/* SFL Branding */
#sfl-branding {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
}

.sfl-coin {
    width: 64px;
    height: 64px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: block;
}

.sfl-coin:hover {
    transform: scale(1.1) rotate(5deg);
}

.sfl-toast {
    position: absolute;
    bottom: 80px;
    /* Above the coin */
    right: 0;
    width: 320px;
    height: 200px;
    /* Reduced by 40px as requested */
    background: linear-gradient(40deg, #006b63 0%, #203152 50%, #3a0043 100%);
    /* As requested, 3-stop gradient with purple bottom */
    border: 2px solid #f3b23e;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    /* Darker shadow */
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    /* Start smaller and lower */
    pointer-events: none;
    /* Don't block clicks when hidden */
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    /* Fade Zoom - Slower */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    color: #E0E0E0;
    /* ~15% grey as requested */
}

/* Show Toast on Hover of Container */
#sfl-branding:hover .sfl-toast {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.sfl-text-logo {
    max-width: 100%;
    max-height: 60px;
    /* Scaled down */
    margin: 0 auto 15px auto;
    display: block;
}

.sfl-toast p,
.sfl-modal p {
    font-family: 'Oswald', sans-serif;
    /* User requested Oswald */
    font-size: 14px;
    font-weight: 400;
    /* Normal weight */
    line-height: 1.5;
    margin: 0;
    text-shadow: 2px 2px 0 #000;
    /* Black drop shadow */
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    #sfl-branding {
        display: none;
    }
}