@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Silkscreen&display=swap');

        :root {
            --soil: #3b2f1e;
            --bark: #5c4033;
            --terracotta: #c2703e;
            --burnt-orange: #d4762c;
            --moss: #6b7c3e;
            --sage: #8a9a5b;
            --cream: #f5eed6;
            --parchment: #e8dcc4;
            --mushroom: #b5a48e;
            --clay: #a0785a;
            --forest: #2d3e1f;
            --lichen: #c4cfa0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext x='0' y='15' font-size='15'%3E🌿%3C/text%3E%3C/svg%3E"), auto;
        }

        body {
            background-color: var(--soil);
            background-image:
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(91, 64, 33, 0.15) 2px,
                    rgba(91, 64, 33, 0.15) 4px
                ),
                url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q35 20 30 30 Q25 20 30 5' fill='%232d3e1f' opacity='0.08'/%3E%3Cpath d='M10 35 Q15 50 10 60 Q5 50 10 35' fill='%232d3e1f' opacity='0.06'/%3E%3Cpath d='M50 40 Q55 52 50 60 Q45 52 50 40' fill='%232d3e1f' opacity='0.07'/%3E%3C/svg%3E");
            font-family: 'Courier Prime', monospace;
            color: var(--cream);
            overflow-x: hidden;
        }

        /* ===== MARQUEE TOP BAR ===== */
        .top-marquee {
            background: var(--forest);
            border-bottom: 3px dashed var(--terracotta);
            padding: 6px 0;
            overflow: hidden;
            white-space: nowrap;
        }

        .top-marquee .scroll-text {
            display: inline-block;
            animation: marquee 18s linear infinite;
            font-family: 'VT323', monospace;
            font-size: 1.1rem;
            color: var(--lichen);
            letter-spacing: 2px;
        }

        @keyframes marquee {
            0% { transform: translateX(100vw); }
            100% { transform: translateX(-100%); }
        }

        /* ===== MAIN LAYOUT ===== */
        .page-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            padding: 10px;
        }

        /* ===== HEADER ===== */
        .site-header {
            background: var(--bark);
            border: 3px solid var(--terracotta);
            outline: 3px dashed var(--moss);
            outline-offset: 4px;
            padding: 20px;
            margin: 15px 0;
            text-align: center;
            position: relative;
        }

        .site-header::before,
        .site-header::after {
            content: '🍄';
            font-size: 1.8rem;
            position: absolute;
            top: -15px;
        }
        .site-header::before { left: 15px; }
        .site-header::after { right: 15px; }

        .site-title {
            font-family: 'VT323', monospace;
            font-size: 3.5rem;
            color: var(--burnt-orange);
            text-shadow:
                3px 3px 0 var(--soil),
                -1px -1px 0 var(--forest);
            letter-spacing: 4px;
            animation: titlePulse 3s ease-in-out infinite;
        }

        @keyframes titlePulse {
            0%, 100% { text-shadow: 3px 3px 0 var(--soil), -1px -1px 0 var(--forest); }
            50% { text-shadow: 3px 3px 0 var(--soil), -1px -1px 0 var(--forest), 0 0 15px var(--terracotta); }
        }

        .site-subtitle {
            font-family: 'Silkscreen', cursive;
            font-size: 0.75rem;
            color: var(--sage);
            margin-top: 5px;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .under-construction {
            display: inline-block;
            background: var(--burnt-orange);
            color: var(--soil);
            font-family: 'VT323', monospace;
            font-size: 0.9rem;
            padding: 2px 12px;
            margin-top: 10px;
            animation: blink 1s steps(2) infinite;
            border: 2px solid var(--cream);
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* ===== COLUMNS ===== */
        .columns {
            display: grid;
            grid-template-columns: 200px 1fr 200px;
            gap: 10px;
            margin-bottom: 15px;
        }

        @media (max-width: 768px) {
            .columns {
                grid-template-columns: 1fr;
            }
        }

        /* ===== SIDEBAR BOXES ===== */
        .box {
            background: var(--bark);
            border: 2px solid var(--terracotta);
            margin-bottom: 10px;
        }

        .box-title {
            background: linear-gradient(90deg, var(--terracotta), var(--clay));
            color: var(--cream);
            font-family: 'VT323', monospace;
            font-size: 1.1rem;
            padding: 4px 8px;
            letter-spacing: 2px;
            border-bottom: 2px solid var(--terracotta);
            text-transform: uppercase;
        }

        .box-content {
            padding: 10px;
            font-size: 0.85rem;
            line-height: 1.6;
        }

        /* ===== ABOUT ME ===== */
        .about-me-pic {
            width: 100px;
            height: 100px;
            border: 3px solid var(--terracotta);
            outline: 2px dashed var(--moss);
            outline-offset: 2px;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            background: var(--soil);
        }

        .stamp {
            display: inline-block;
            background: var(--forest);
            border: 1px solid var(--moss);
            color: var(--lichen);
            font-family: 'Silkscreen', cursive;
            font-size: 0.6rem;
            padding: 3px 6px;
            margin: 2px;
            text-transform: uppercase;
        }

        /* ===== NAV ===== */
        .nav-list {
            list-style: none;
        }

        .nav-list li {
            border-bottom: 1px dashed var(--clay);
            padding: 0;
        }

        .nav-list li:last-child {
            border-bottom: none;
        }

        .nav-list a {
            display: block;
            padding: 6px 8px;
            color: var(--lichen);
            text-decoration: none;
            font-family: 'VT323', monospace;
            font-size: 1rem;
            letter-spacing: 1px;
            transition: all 0.1s;
        }

        .nav-list a:hover {
            background: var(--terracotta);
            color: var(--soil);
        }

        .nav-list a::before {
            content: '> ';
            color: var(--moss);
        }

        /* ===== MAIN CONTENT ===== */
        .main-content .box-content {
            font-size: 0.9rem;
        }

        .blog-entry {
            border-bottom: 1px dashed var(--clay);
            padding-bottom: 15px;
            margin-bottom: 15px;
        }

        .blog-entry:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .blog-date {
            font-family: 'VT323', monospace;
            color: var(--terracotta);
            font-size: 1rem;
            margin-bottom: 4px;
        }

        .blog-title-text {
            font-family: 'VT323', monospace;
            color: var(--burnt-orange);
            font-size: 1.3rem;
            letter-spacing: 1px;
        }

        .blog-body {
            color: var(--parchment);
            margin-top: 6px;
            line-height: 1.7;
        }

        .mood-tag {
            display: inline-block;
            background: var(--forest);
            border: 1px solid var(--sage);
            color: var(--lichen);
            font-family: 'VT323', monospace;
            font-size: 0.85rem;
            padding: 1px 8px;
            margin-top: 6px;
        }

        /* ===== FRIENDS ===== */
        .friends-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        .friend-btn {
            display: block;
            background: var(--soil);
            border: 1px solid var(--moss);
            color: var(--sage);
            text-align: center;
            padding: 6px 2px;
            font-family: 'Silkscreen', cursive;
            font-size: 0.55rem;
            text-decoration: none;
            text-transform: uppercase;
            transition: all 0.1s;
        }

        .friend-btn:hover {
            background: var(--moss);
            color: var(--soil);
            border-color: var(--lichen);
        }

        /* ===== NOW PLAYING ===== */
        .now-playing {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .music-bars {
            display: flex;
            gap: 2px;
            align-items: end;
            height: 20px;
        }

        .music-bar {
            width: 3px;
            background: var(--sage);
            animation: musicBounce 0.8s ease-in-out infinite;
        }

        .music-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
        .music-bar:nth-child(2) { height: 14px; animation-delay: 0.15s; }
        .music-bar:nth-child(3) { height: 6px; animation-delay: 0.3s; }
        .music-bar:nth-child(4) { height: 18px; animation-delay: 0.1s; }
        .music-bar:nth-child(5) { height: 10px; animation-delay: 0.25s; }

        @keyframes musicBounce {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.3); }
        }

        .now-playing-text {
            font-family: 'VT323', monospace;
            font-size: 0.95rem;
            color: var(--mushroom);
        }

        .now-playing-text span {
            color: var(--lichen);
        }

        /* ===== GUESTBOOK ===== */
        .gb-entry {
            background: var(--soil);
            border: 1px solid var(--clay);
            padding: 8px;
            margin-bottom: 6px;
            font-size: 0.8rem;
        }

        .gb-name {
            font-family: 'VT323', monospace;
            color: var(--burnt-orange);
        }

        .gb-msg {
            color: var(--parchment);
            margin-top: 2px;
        }

        /* ===== BLINKIES BAR ===== */
        .blinkies {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
        }

        .blinkie {
            display: inline-block;
            background: var(--forest);
            border: 1px solid var(--moss);
            color: var(--lichen);
            font-family: 'Silkscreen', cursive;
            font-size: 0.5rem;
            padding: 3px 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            animation: blinkiePulse 2s ease-in-out infinite;
        }

        .blinkie:nth-child(even) { animation-delay: 0.5s; }
        .blinkie:nth-child(3n) { animation-delay: 1s; }

        @keyframes blinkiePulse {
            0%, 100% { opacity: 0.7; border-color: var(--moss); }
            50% { opacity: 1; border-color: var(--lichen); }
        }

        .blinkie.earthy { background: var(--bark); border-color: var(--terracotta); color: var(--burnt-orange); }
        .blinkie.sage { background: var(--moss); border-color: var(--lichen); color: var(--cream); }

        /* ===== FOOTER ===== */
        .site-footer {
            background: var(--bark);
            border: 2px solid var(--terracotta);
            padding: 12px;
            text-align: center;
            margin: 10px 0 20px;
        }

        .footer-text {
            font-family: 'VT323', monospace;
            color: var(--mushroom);
            font-size: 0.9rem;
        }

        .footer-text a {
            color: var(--sage);
        }

        .hit-counter {
            display: inline-block;
            background: #000;
            color: var(--sage);
            font-family: 'VT323', monospace;
            font-size: 1rem;
            padding: 2px 10px;
            border: 1px inset var(--clay);
            margin-top: 6px;
            letter-spacing: 3px;
        }

        /* ===== DIVIDER ===== */
        .wiggly-hr {
            border: none;
            height: 8px;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 Q5 0 10 4 Q15 8 20 4 Q25 0 30 4 Q35 8 40 4' fill='none' stroke='%236b7c3e' stroke-width='2'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            margin: 10px 0;
        }

        /* ===== SPARKLE TRAIL ===== */
        .sparkle {
            position: fixed;
            pointer-events: none;
            font-size: 12px;
            animation: sparkleFloat 1s ease-out forwards;
            z-index: 9999;
        }

        @keyframes sparkleFloat {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-30px) scale(0.3); }
        }

        /* ===== STATUS ICON ===== */
        .status-online {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--sage);
            border-radius: 50%;
            animation: statusPulse 2s infinite;
            vertical-align: middle;
            margin-right: 4px;
        }

        @keyframes statusPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(138, 154, 91, 0.4); }
            50% { box-shadow: 0 0 0 5px rgba(138, 154, 91, 0); }
        }

        /* ===== TOOLTIP ===== */
        .tooltip {
            position: relative;
        }

        .tooltip:hover::after {
            content: attr(data-tip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--soil);
            border: 1px solid var(--terracotta);
            color: var(--cream);
            font-family: 'VT323', monospace;
            font-size: 0.8rem;
            padding: 2px 8px;
            white-space: nowrap;
            z-index: 10;
        }
    

/* ===== AUTH BAR ===== */
.auth-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 4px 15px;
    font-size: 0.8rem;
    font-family: 'VT323', monospace;
}

.auth-bar a, .auth-bar button {
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: var(--lichen);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.auth-bar a:hover, .auth-bar button:hover {
    color: var(--burnt-orange);
}

.auth-bar .username {
    text-decoration: none;
    font-weight: bold;
    color: var(--burnt-orange);
}

/* ===== AUTH MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(29, 20, 10, 0.85);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bark);
    border: 3px solid var(--terracotta);
    outline: 3px dashed var(--moss);
    outline-offset: 4px;
    padding: 25px;
    max-width: 360px;
    width: 90%;
}

.modal h2 {
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    color: var(--burnt-orange);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.modal input, .modal select {
    width: 100%;
    background: var(--soil);
    border: 2px solid var(--terracotta);
    color: var(--cream);
    padding: 8px 12px;
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    margin-bottom: 10px;
    outline: none;
}

.modal input::placeholder {
    color: var(--mushroom);
}

.modal input:focus, .modal select:focus {
    border-color: var(--burnt-orange);
}

.modal select {
    font-family: 'Courier Prime', monospace;
}

.modal select option {
    background: var(--soil);
    color: var(--cream);
}

.modal button {
    background: var(--terracotta);
    color: var(--cream);
    border: 2px solid var(--burnt-orange);
    padding: 10px 20px;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
    cursor: pointer;
    width: 100%;
    margin-top: 5px;
    text-transform: uppercase;
}

.modal button:hover {
    background: var(--burnt-orange);
    color: var(--soil);
}

.modal .error {
    color: #e07040;
    font-family: 'VT323', monospace;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.modal .switch-link {
    text-align: center;
    margin-top: 12px;
    font-family: 'VT323', monospace;
    font-size: 0.9rem;
    color: var(--mushroom);
}

.modal .switch-link a {
    color: var(--lichen);
    cursor: pointer;
    text-decoration: underline;
}

.modal .switch-link a:hover {
    color: var(--burnt-orange);
}

.modal .note {
    font-size: 0.75rem;
    color: var(--mushroom);
    margin-bottom: 10px;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 50px;
}

.toggle-pw {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-65%);
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    color: var(--mushroom);
    cursor: pointer;
    user-select: none;
}

.toggle-pw:hover {
    color: var(--burnt-orange);
}