<!--
            dddddddd
            d::::::d                                     iiii          lllllll   iiii  kkkkkkkk                                                                                                                                          tttt
            d::::::d                                    i::::i         l:::::l  i::::i k::::::k                                                                                                                                       ttt:::t
            d::::::d                                     iiii          l:::::l   iiii  k::::::k                                                                                                                                       t:::::t
            d:::::d                                                    l:::::l         k::::::k                                                                                                                                       t:::::t
    ddddddddd:::::d   aaaaaaaaaaaaa  nnnn  nnnnnnnn    iiiiiii          l::::l iiiiiii  k:::::k    kkkkkkk eeeeeeeeeeee        ssssssssss              mmmmmmm    mmmmmmm      ooooooooooo   nnnn  nnnnnnnn        ssssssssss   ttttttt:::::ttttttt        eeeeeeeeeeee    rrrrr   rrrrrrrrr
  dd::::::::::::::d   a::::::::::::a n:::nn::::::::nn  i:::::i          l::::l i:::::i  k:::::k   k:::::kee::::::::::::ee    ss::::::::::s           mm:::::::m  m:::::::mm  oo:::::::::::oo n:::nn::::::::nn    ss::::::::::s  t:::::::::::::::::t      ee::::::::::::ee  r::::rrr:::::::::r
 d::::::::::::::::d   aaaaaaaaa:::::an::::::::::::::nn  i::::i          l::::l  i::::i  k:::::k  k:::::ke::::::eeeee:::::eess:::::::::::::s         m::::::::::mm::::::::::mo:::::::::::::::on::::::::::::::nn ss:::::::::::::s t:::::::::::::::::t     e::::::eeeee:::::eer:::::::::::::::::r
d:::::::ddddd:::::d            a::::ann:::::::::::::::n i::::i          l::::l  i::::i  k:::::k k:::::ke::::::e     e:::::es::::::ssss:::::s        m::::::::::::::::::::::mo:::::ooooo:::::onn:::::::::::::::ns::::::ssss:::::stttttt:::::::tttttt    e::::::e     e:::::err::::::rrrrr::::::r
d::::::d    d:::::d     aaaaaaa:::::a  n:::::nnnn:::::n i::::i          l::::l  i::::i  k::::::k:::::k e:::::::eeeee::::::e s:::::s  ssssss         m:::::mmm::::::mmm:::::mo::::o     o::::o  n:::::nnnn:::::n s:::::s  ssssss       t:::::t          e:::::::eeeee::::::e r:::::r     r:::::r
d:::::d     d:::::d   aa::::::::::::a  n::::n    n::::n i::::i          l::::l  i::::i  k:::::::::::k  e:::::::::::::::::e    s::::::s              m::::m   m::::m   m::::mo::::o     o::::o  n::::n    n::::n   s::::::s            t:::::t          e:::::::::::::::::e  r:::::r     rrrrrrr
d:::::d     d:::::d  a::::aaaa::::::a  n::::n    n::::n i::::i          l::::l  i::::i  k:::::::::::k  e::::::eeeeeeeeeee        s::::::s           m::::m   m::::m   m::::mo::::o     o::::o  n::::n    n::::n      s::::::s         t:::::t          e::::::eeeeeeeeeee   r:::::r
d:::::d     d:::::d a::::a    a:::::a  n::::n    n::::n i::::i          l::::l  i::::i  k::::::k:::::k e:::::::e           ssssss   s:::::s         m::::m   m::::m   m::::mo::::o     o::::o  n::::n    n::::nssssss   s:::::s       t:::::t    tttttte:::::::e            r:::::r
d::::::ddddd::::::dda::::a    a:::::a  n::::n    n::::ni::::::i        l::::::li::::::ik::::::k k:::::ke::::::::e          s:::::ssss::::::s        m::::m   m::::m   m::::mo:::::ooooo:::::o  n::::n    n::::ns:::::ssss::::::s      t::::::tttt:::::te::::::::e           r:::::r
 d:::::::::::::::::da:::::aaaa::::::a  n::::n    n::::ni::::::i ...... l::::::li::::::ik::::::k  k:::::ke::::::::eeeeeeee  s::::::::::::::s  ...... m::::m   m::::m   m::::mo:::::::::::::::o  n::::n    n::::ns::::::::::::::s       tt::::::::::::::t e::::::::eeeeeeee   r:::::r
  d:::::::::ddd::::d a::::::::::aa:::a n::::n    n::::ni::::::i .::::. l::::::li::::::ik::::::k   k:::::kee:::::::::::::e   s:::::::::::ss   .::::. m::::m   m::::m   m::::m oo:::::::::::oo   n::::n    n::::n s:::::::::::ss          tt:::::::::::tt  ee:::::::::::::e   r:::::r
   ddddddddd   ddddd  aaaaaaaaaa  aaaa nnnnnn    nnnnnniiiiiiii ...... lllllllliiiiiiiikkkkkkkk    kkkkkkk eeeeeeeeeeeeee    sssssssssss     ...... mmmmmm   mmmmmm   mmmmmm   ooooooooooo     nnnnnn    nnnnnn  sssssssssss              ttttttttttt      eeeeeeeeeeeeee   rrrrrrr
-->


<html lang="en">
<head>
    <meta property="og:title" content="dani" />
    <meta property="og:description" content="welcome to my webpage" />
    <meta property="og:url" content="https://dani.likes.monster" />
    <meta property="og:image" content="https://dani.likes.monster/favicon.png" />
    <meta name="theme-color" content="#070709" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta charset="UTF-8" />
    <title>dani.likes.monster</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        :root { --bg: #0c0c0c; --panel: #161616; --panel-2: #222; --line: #333; --text: #eee; --muted: #888; --radius: 12px; --radius-sm: 8px; --max-width: 640px; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; min-height: 100vh; padding: 40px 20px 60px; display: flex; justify-content: center; cursor: url('/cursor.png') 16 16, auto; }
        @media (pointer: fine) {
            ::selection { background: transparent; color: inherit; }
        }
        .sel-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
        #sparkCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 35; }
        .sel-mark { position: absolute; background: rgba(255, 255, 255, 0.4); border-radius: 10px; pointer-events: none; }
        img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-drag: none; }
        .wrap { width: 100%; max-width: var(--max-width); display: flex; flex-direction: column; align-items: center; gap: 18px; }
        .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; width: 100%; }
        .profile-banner { height: 96px; background: var(--panel-2); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transition: background-image 0.4s ease; }
        .profile-banner .banner-fallback { width: 100%; height: 100%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .profile-body { padding: 0 24px 20px; }
        .avatar-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -38px; flex-wrap: wrap; gap: 12px; }
        .avatar-wrapper { display: flex; align-items: flex-end; gap: 16px; flex: 1; min-width: 0; }
        .avatar { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--panel); background: var(--panel-2); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; flex-shrink: 0; }
        .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: none; position: relative; z-index: 1; }
        .avatar .fallback { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); border-radius: 50%; background: var(--panel-2); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; }
        .avatar .decoration { position: absolute; top: -6px; left: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border-radius: 50%; pointer-events: none; z-index: 2; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.9; }
        .status-dot { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); border: 4px solid var(--panel); z-index: 3; overflow: hidden; }
        .status-dot svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
        .name-group { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .name-group .display-name { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: #eee; }
        .username-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 0; }
        .username-row .username { font-size: 13px; color: var(--muted); }
        .username-row .username .discrim { color: #555; }
        .plat-inline { display: none; width: 14px; height: 14px; opacity: 0.35; transition: opacity 0.2s ease; flex-shrink: 0; color: #bbb; position: relative; }
        .plat-inline.active { display: inline-block; opacity: 0.55; }
        .plat-inline.active:hover { opacity: 0.9; }
        .plat-inline svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .plat-inline + .plat-inline { margin-left: 1px; }
        .clock-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; position: relative; }
        .clock-chip { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap; position: relative; }
        .clock-offset { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #555; white-space: nowrap; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; }
        .profile-activities { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
        .profile-activities .act-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .profile-activities .act-label .count { background: var(--panel-2); padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); font-size: 10px; }
        .activity-mini-list { display: flex; flex-direction: column; gap: 8px; }
        .activity-mini { display: flex; gap: 12px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
        .activity-mini .mini-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); }
        .activity-mini .mini-icon img { width: 100%; height: 100%; object-fit: cover; }
        .activity-mini .mini-body { flex: 1; min-width: 0; }
        .activity-mini .mini-body .mini-name { font-size: 13px; font-weight: 600; color: #eee; }
        .activity-mini .mini-body .mini-detail { font-size: 12px; color: #aaa; margin-top: 0; }
        .activity-mini .mini-body .mini-state { font-size: 11px; color: var(--muted); margin-top: 0; }
        .activity-mini .mini-body .mini-timer { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 2px; }
        .no-activities { color: var(--muted); font-size: 12px; padding: 4px 0; }
        .about-section { padding: 20px 22px; }
        .about-section h3 { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #ccc; }
        .about-section p { font-size: 14px; line-height: 1.6; color: #bbb; }
        .about-section strong { color: #fff; font-weight: 600; }
        .place-link { cursor: pointer; position: relative; border-bottom: 1px dotted var(--muted); }
        .place-link:hover { color: #fff; }
        .map-preview {
            position: fixed;
            z-index: 70;
            width: 280px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
            opacity: 0;
            pointer-events: none;
            transform: translateY(6px);
            transition: opacity 0.18s ease, transform 0.18s ease;
        }
        .map-preview.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
        .map-preview .map-frame {
            width: 100%;
            height: 160px;
            display: block;
            border: 0;
            background: var(--panel-2);
            pointer-events: none;
            user-select: none;
        }
        .map-tiles {
            width: 100%;
            height: 160px;
            overflow: hidden;
            pointer-events: none;
            user-select: none;
            background-color: var(--panel-2);
            background-image: url('https://tile.openstreetmap.org/5/17/11.png'), url('https://tile.openstreetmap.org/5/18/11.png');
            background-size: 50% 100%, 50% 100%;
            background-position: left center, right center;
            background-repeat: no-repeat;
            filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.08) saturate(0.75);
        }
        .map-pin {
            position: absolute;
            left: 61%;
            top: 34%;
            width: 14px;
            height: 14px;
            transform: translate(-50%, -100%);
            pointer-events: none;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
        }
        .map-preview .map-visual {
            position: relative;
            height: 160px;
            overflow: hidden;
        }
        .map-preview .map-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 12px;
        }
        .map-preview .map-title {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: #eee;
        }
        .map-preview .map-sub {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--muted);
            margin-top: 2px;
        }
        .map-preview .map-open {
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            color: var(--muted);
            text-decoration: none;
            white-space: nowrap;
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 4px 8px;
            transition: color 0.2s, border-color 0.2s;
        }
        .map-preview .map-open:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.16); }
        .about-section .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 14px; margin-bottom: 4px; }
        .tooltip-trigger { position: relative; border-bottom: 1px dotted var(--muted); }
        .tooltip-box { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
        .tooltip-trigger:hover .tooltip-box { opacity: 1; }
        .clock-chip:hover .tooltip-box { opacity: 1; }
        .plat-inline:hover .tooltip-box { opacity: 1; }
        .views-counter { position: fixed; bottom: 16px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-sm); }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 70% { transform: scale(0.94); } 100% { transform: scale(1); } }
        @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.5); } 70% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
        @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
        @keyframes spinSlow { to { transform: rotate(360deg); } }
        @keyframes ambientDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 4%, 0) scale(1.08); } }
        @keyframes glowBreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
        body::before {
            content: '';
            position: fixed;
            inset: -25%;
            background:
                radial-gradient(ellipse 50% 40% at 20% 15%, rgba(255, 255, 255, 0.045), transparent 60%),
                radial-gradient(ellipse 45% 50% at 85% 80%, rgba(255, 255, 255, 0.03), transparent 55%),
                radial-gradient(ellipse 35% 35% at 60% 30%, rgba(160, 160, 170, 0.03), transparent 50%);
            animation: ambientDrift 24s ease-in-out infinite alternate;
            pointer-events: none;
            z-index: 0;
        }
        .wrap { position: relative; z-index: 2; }
        .wrap > * { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
        .wrap > *:nth-child(1) { animation-delay: 0.05s; }
        .wrap > *:nth-child(2) { animation-delay: 0.16s; }
        .wrap > *:nth-child(3) { animation-delay: 0.27s; }
        .gb-open, .views-counter { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s backwards; }
        .panel { transition: border-color 0.25s; }
        .about-section:hover { border-color: rgba(255, 255, 255, 0.08); }
        .avatar { animation: bob 4.5s ease-in-out infinite; }
        .avatar::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
            animation: glowBreathe 3.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }
        .status-dot.online { animation: pulseRing 2.2s ease-out infinite; }
        .activity-mini { animation: fadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
        .activity-mini .mini-icon.is-art {
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            background: #111;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        .activity-mini .mini-icon.is-art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 50%;
            animation: spinSlow 18s linear infinite;
        }
        .activity-mini .mini-icon.is-art::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            z-index: 2;
            pointer-events: none;
            background:
                repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
                radial-gradient(circle at center, transparent 26%, rgba(0, 0, 0, 0.25) 27%, transparent 28%);
        }
        .activity-mini .mini-icon.is-art::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18%;
            height: 18%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: #e8e8e8;
            box-shadow: 0 0 0 2px #0c0c0c, inset 0 0 0 1px #bbb;
            z-index: 3;
            pointer-events: none;
        }
        .activity-mini .mini-icon.is-art:hover img { animation-play-state: paused; }
        .guestbook-item { animation: fadeUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
        .guestbook-item:nth-child(1) { animation-delay: 0.02s; }
        .guestbook-item:nth-child(2) { animation-delay: 0.05s; }
        .guestbook-item:nth-child(3) { animation-delay: 0.08s; }
        .guestbook-item:nth-child(4) { animation-delay: 0.11s; }
        .guestbook-item:nth-child(5) { animation-delay: 0.14s; }
        .gb-heart { transition: transform 0.15s ease, color 0.2s, border-color 0.2s; }
        .gb-heart:hover { transform: scale(1.06); }
        .gb-heart.pulse { animation: pop 0.4s ease; }
        @keyframes squish {
            0% { transform: scale(1); }
            30% { transform: scale(0.82, 0.9); }
            55% { transform: scale(1.08, 0.95); }
            75% { transform: scale(0.96, 1.03); }
            100% { transform: scale(1); }
        }
        .gb-open, .gb-close, .guestbook-form button, .gb-admin button, .gb-heart {
            transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.2s, border-color 0.2s;
        }
        .gb-open:hover, .gb-close:hover, .guestbook-form button:hover, .gb-admin button:hover { transform: translateY(-1px); }
        .gb-open:active, .gb-close:active, .guestbook-form button:active, .gb-admin button:active, .gb-heart:active {
            transform: scale(0.82, 0.88);
            transition-duration: 0.04s;
        }
        .squish { animation: squish 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
        .gb-sidebar { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
        .gb-overlay { transition: opacity 0.3s ease; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; }
        }
        .gb-msg { font-size: 13px; line-height: 1.5; color: #bbb; }
        .spotify-progress { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; margin-top: 8px; overflow: hidden; }
        .spotify-progress-bar { height: 100%; width: 0%; background: #eee; border-radius: 2px; }
        .spotify-times { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 4px; }
        .guestbook-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
        .guestbook-form input, .guestbook-form textarea, .guestbook-form button {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: var(--text);
            background: var(--panel-2);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 8px 12px;
            outline: none;
            width: 100%;
        }
        .guestbook-form input:focus, .guestbook-form textarea:focus { border-color: rgba(255, 255, 255, 0.18); }
        .guestbook-form textarea { min-height: 64px; resize: vertical; }
        .guestbook-form button {
            width: auto;
            align-self: flex-end;
            cursor: pointer;
            color: var(--muted);
            transition: color 0.2s, border-color 0.2s;
        }
        .guestbook-form button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.18); }
        .gb-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); min-height: 14px; margin-bottom: 10px; }
        .guestbook-list { display: flex; flex-direction: column; gap: 8px; }
        .guestbook-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
        .gb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
        .gb-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #eee; }
        .gb-when { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
        .gb-msg { font-size: 13px; line-height: 1.5; color: #bbb; }
        .gb-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
        .gb-heart { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
        .gb-heart:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.14); }
        .gb-heart.on { color: #eee; border-color: rgba(255, 255, 255, 0.22); }
        .gb-creator-heart { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
        .gb-reply { margin-top: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5; color: #ccc; }
        .gb-reply .gb-reply-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #eee; margin-right: 6px; }
        .gb-admin { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
        .gb-admin button { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
        .gb-admin button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.14); }
        .gb-admin input { flex: 1; min-width: 120px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 8px; outline: none; }
        .gb-open { position: fixed; top: 16px; right: 16px; z-index: 40; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
        .gb-open:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.12); }
        .gb-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 50; }
        .gb-overlay.open { opacity: 1; pointer-events: auto; }
        .gb-sidebar { position: fixed; top: 0; right: 0; height: 100%; width: min(360px, 100vw); background: var(--panel); border-left: 1px solid var(--line); z-index: 60; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; padding: 20px 18px; gap: 12px; overflow: hidden; }
        .gb-sidebar.open { transform: translateX(0); }
        .gb-sidebar-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
        .gb-sidebar-head h3 { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: #ccc; }
        .gb-close { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
        .gb-close:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.12); }
        .gb-sidebar-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
        .gb-sidebar-body .guestbook-form, .gb-sidebar-body .gb-status { flex-shrink: 0; }
        .gb-sidebar-body .guestbook-list { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
        @media (max-width: 480px) { body { padding: 20px 12px 40px; cursor: auto; } .profile-banner { height: 72px; } .avatar { width: 68px; height: 68px; } .avatar .fallback { font-size: 26px; } .name-group .display-name { font-size: 20px; } .profile-body { padding: 0 16px 16px; } .avatar-row { margin-top: -32px; } .clock-chip { font-size: 10px; padding: 4px 10px; } .plat-inline { width: 12px; height: 12px; } .activity-mini { padding: 8px 12px; } .activity-mini .mini-icon { width: 32px; height: 32px; } .activity-mini .mini-body .mini-name { font-size: 12px; } .activity-mini .mini-body .mini-detail { font-size: 11px; } .gb-open { top: 10px; right: 10px; font-size: 10px; padding: 5px 10px; } .gb-sidebar { width: 100vw; padding: 16px 14px; } }
        @media (max-height: 500px) and (orientation: landscape) { body { padding: 12px 20px 16px; cursor: auto; } .wrap { gap: 10px; } .profile-banner { height: 56px; } .avatar { width: 56px; height: 56px; border-width: 3px; } .avatar .fallback { font-size: 22px; } .avatar .decoration { top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); } .status-dot { width: 14px; height: 14px; border-width: 3px; } .avatar-row { margin-top: -26px; gap: 8px; } .name-group .display-name { font-size: 18px; } .username-row .username { font-size: 12px; } .profile-body { padding: 0 16px 14px; } .profile-activities { margin-top: 16px; padding-top: 10px; } .activity-mini { padding: 6px 10px; } .activity-mini .mini-icon { width: 28px; height: 28px; } .activity-mini .mini-body .mini-name { font-size: 12px; } .activity-mini .mini-body .mini-detail, .activity-mini .mini-body .mini-state { font-size: 11px; } .about-section { padding: 14px 18px; } .about-section p { font-size: 13px; line-height: 1.5; } .clock-chip { font-size: 10px; padding: 4px 8px; } .clock-offset { font-size: 9px; } .views-counter { bottom: 8px; left: 8px; font-size: 10px; padding: 4px 8px; } }
    </style>
</head>
<body>
    <div class="sel-layer" id="selLayer" aria-hidden="true"></div>
    <canvas id="sparkCanvas" aria-hidden="true"></canvas>
    <div class="map-preview" id="mapPreview" aria-hidden="true">
        <div class="map-visual">
            <div class="map-tiles" aria-hidden="true"></div>
            <svg class="map-pin" viewBox="0 0 24 24" aria-hidden="true"><path fill="#eee" stroke="#0c0c0c" stroke-width="1.5" d="M12 21s-7-6.2-7-11a7 7 0 1 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5" fill="#0c0c0c"/></svg>
        </div>
        <div class="map-meta">
            <div>
                <div class="map-title">Romania</div>
                <div class="map-sub">OpenStreetMap</div>
            </div>
            <a class="map-open" id="mapOpen" href="https://www.openstreetmap.org/?mlat=45.9432&mlon=24.9668&zoom=5" target="_blank" rel="noopener">open</a>
        </div>
    </div>
    <div class="wrap">
        <div class="panel">
            <div class="profile-banner" id="profileBanner">
                <div class="banner-fallback">banner</div>
            </div>
            <div class="profile-body">
                <div class="avatar-row">
                    <div class="avatar-wrapper">
                        <div class="avatar" id="avatarContainer">
                            <img id="avatarImg" alt="avatar" />
                            <span class="fallback" id="avatarFallback">d</span>
                            <span class="status-dot" id="statusDot"></span>
                            <div class="decoration" id="avatarDecoration" style="display:none;"></div>
                        </div>
                        <div class="name-group">
                            <div class="display-name" id="displayName">dani</div>
                            <div class="username-row">
                                <span class="username" id="usernameLine">@actofpassion<span class="discrim">#0</span></span>
                                <span class="plat-inline" data-platform="desktop"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg><span class="tooltip-box">desktop</span></span>
                                <span class="plat-inline" data-platform="web"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg><span class="tooltip-box">web</span></span>
                                <span class="plat-inline" data-platform="mobile"><svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg><span class="tooltip-box">mobile</span></span>
                                <span class="plat-inline" data-platform="embedded"><svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="13" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="19"/></svg><span class="tooltip-box">embedded</span></span>
                                <span class="plat-inline" data-platform="vr"><svg viewBox="0 0 24 24"><path d="M4 14v-3a8 8 0 0 1 16 0v3"/><path d="M18 14c0 1.5-1.5 3-3 3h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1c1.5 0 3 .5 3 2z"/><path d="M6 14c0 1.5 1.5 3 3 3h1a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9c-1.5 0-3 .5-3 2z"/></svg><span class="tooltip-box">vr</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="clock-box">
                        <div class="clock-chip"><svg style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> <span id="clock">--:--</span><span class="tooltip-box" style="bottom: calc(100% + 8px);">Europe/Bucharest</span></div>
                        <div class="clock-offset" id="clockOffset"></div>
                    </div>
                </div>
                <div class="profile-activities" id="profileActivities">
                    <div class="act-label">
                        <span>activities</span>
                        <span class="count" id="activityCount">0</span>
                    </div>
                    <div class="activity-mini-list" id="activityMiniList">
                        <div class="no-activities" id="noActMsg">no active activities.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel about-section">
            <h3>about</h3>
            <p>hey, i'm <strong>dani</strong>, a <span class="tooltip-trigger"><span id="static-age">14</span> year old<span class="tooltip-box" id="animated-age"></span></span> from <strong class="place-link" id="romaniaPlace">romania</strong></p>
            <div class="eyebrow">interests</div>
            <p>i like gaming, music, coding and spending all of my time on my computer</p>
        </div>
    </div>
    <button class="gb-open" id="gbOpen" type="button">guestbook</button>
    <div class="gb-overlay" id="gbOverlay"></div>
    <aside class="gb-sidebar" id="gbSidebar" aria-hidden="true">
        <div class="gb-sidebar-head">
            <h3>guestbook</h3>
            <button class="gb-close" id="gbClose" type="button">close</button>
        </div>
        <div class="gb-sidebar-body">
            <form class="guestbook-form" id="guestbookForm">
                <input id="gbName" maxlength="32" placeholder="name" required autocomplete="off" />
                <textarea id="gbMessage" maxlength="200" placeholder="message" required></textarea>
                <button type="submit">sign</button>
            </form>
            <div class="gb-status" id="gbStatus"></div>
            <div class="guestbook-list" id="guestbookList">
                <div class="no-activities">no messages yet.</div>
            </div>
        </div>
    </aside>
    <div class="views-counter">
        <span>views: </span><span id="viewCount">...</span>
    </div>
    <script>
        const DISCORD_ID = '852991682748219392';
        let lastBannerUrl = null;
        let spotifyData = null;
        let creatorAvatarUrl = null;
        function tickClock() {
            const d = new Date();
            document.getElementById('clock').textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Bucharest' });
            const localOffset = -d.getTimezoneOffset() / 60;
            const bucharestStr = d.toLocaleString('en-US', { timeZone: 'Europe/Bucharest', hour: 'numeric', hour12: false });
            const bucharestHour = parseInt(bucharestStr);
            const localHour = d.getHours();
            let diff = bucharestHour - localHour;
            if (diff > 12) diff -= 24;
            if (diff < -12) diff += 24;
            const offsetEl = document.getElementById('clockOffset');
            if (diff === 0) { offsetEl.textContent = 'same time as you'; }
            else if (diff > 0) { offsetEl.textContent = `${diff}h ahead of you`; }
            else { offsetEl.textContent = `${Math.abs(diff)}h behind you`; }
            updateSpotifyProgress();
            document.querySelectorAll('.mini-timer[data-start]').forEach(el => {
                el.textContent = `⏱ ${formatDuration(Date.now() - Number(el.dataset.start))}`;
            });
        }
        tickClock();
        setInterval(tickClock, 1000);
        const STATUS_COLORS = { online: '#3ddc84', idle: '#f5b942', dnd: '#f04747', offline: '#747f8d' };
        const STATUS_ICONS = {
            online: '<svg viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="5" fill="#3ddc84"/></svg>',
            idle: '<svg viewBox="0 0 10 10" aria-hidden="true"><defs><mask id="idleMoon"><rect width="10" height="10" fill="white"/><circle cx="2.8" cy="3.2" r="3.1" fill="black"/></mask></defs><circle cx="5" cy="5" r="5" fill="#f5b942" mask="url(#idleMoon)"/></svg>',
            dnd: '<svg viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="5" fill="#f04747"/><rect x="2.4" y="4.2" width="5.2" height="1.6" rx="0.8" fill="#0c0c0c"/></svg>',
            offline: '<svg viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="3.4" fill="none" stroke="#747f8d" stroke-width="1.6"/></svg>',
        };
        function formatDuration(ms) {
            if (!ms) return '—';
            const totalSec = Math.floor(ms / 1000);
            const h = Math.floor(totalSec / 3600);
            const m = Math.floor((totalSec % 3600) / 60);
            const s = totalSec % 60;
            if (h > 0) return `${h}h ${m}m ${s}s`;
            if (m > 0) return `${m}m ${s}s`;
            return `${s}s`;
        }
        function formatSpotifyTime(ms) {
            if (!ms || ms < 0) return '0:00';
            const totalSec = Math.floor(ms / 1000);
            const m = Math.floor(totalSec / 60);
            const s = totalSec % 60;
            return `${m}:${s.toString().padStart(2, '0')}`;
        }
        function updateSpotifyProgress() {
            if (!spotifyData) return;
            const { start, end } = spotifyData;
            const now = Date.now();
            const bar = document.getElementById('spotifyProgress');
            const elapsedEl = document.getElementById('spotifyElapsed');
            const durationEl = document.getElementById('spotifyDuration');
            if (!bar || !elapsedEl || !durationEl) return;
            if (start && end) {
                const progress = Math.min(1, Math.max(0, (now - start) / (end - start)));
                bar.style.width = `${progress * 100}%`;
                elapsedEl.textContent = formatSpotifyTime(now - start);
                durationEl.textContent = formatSpotifyTime(end - start);
            } else {
                bar.style.width = '0%';
                elapsedEl.textContent = '';
                durationEl.textContent = '';
            }
        }
        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
        }
        async function resolveActivityIconUrl(activity) {
            if (!activity) return null;
            const assets = activity.assets;
            const appId = activity.application_id;
            const image = assets?.large_image || assets?.small_image;

            if (!image) {
                if (!appId) return null;
                return `https://dcdn.dstn.to/app-icons/${appId}`;
            }

            if (image.startsWith('mp:external/')) {
                return image.replace('mp:external/', 'https://media.discordapp.net/external/');
            }

            if (image.startsWith('spotify:')) {
                return `https://i.scdn.co/image/${image.replace('spotify:', '')}`;
            }

            if (!appId) return null;

            return /^\d+$/.test(image)
                ? `https://cdn.discordapp.com/app-assets/${appId}/${image}.png?size=512`
                : `https://cdn.discordapp.com/app-icons/${appId}/${image}.png?size=512`;
        }
        async function renderPresence(data) {
            try {
                const user = data.discord_user;
                const status = data.discord_status || 'offline';
                const bannerEl = document.getElementById('profileBanner');
                const fallbackDiv = bannerEl.querySelector('.banner-fallback');
                try {
                    const bannerRes = await fetch(`https://dcdn.dstn.to/profile/${DISCORD_ID}`);
                    const bannerData = await bannerRes.json();
                    if (bannerData.user?.banner) {
                        const ext = bannerData.user.banner.startsWith('a_') ? 'gif' : 'png';
                        const bannerUrl = `https://cdn.discordapp.com/banners/${DISCORD_ID}/${bannerData.user.banner}.${ext}?size=1024`;
                        if (bannerUrl !== lastBannerUrl) {
                            const img = new Image();
                            img.onload = function () { bannerEl.style.backgroundImage = `url("${bannerUrl}")`; bannerEl.style.backgroundColor = 'transparent'; fallbackDiv.style.display = 'none'; lastBannerUrl = bannerUrl; };
                            img.src = bannerUrl;
                        }
                    } else {
                        bannerEl.style.backgroundImage = 'none';
                        bannerEl.style.backgroundColor = 'var(--panel-2)';
                        fallbackDiv.style.display = 'flex';
                        fallbackDiv.textContent = 'banner';
                    }
                } catch (e) {
                    if (!lastBannerUrl) { bannerEl.style.backgroundImage = 'none'; bannerEl.style.backgroundColor = 'var(--panel-2)'; fallbackDiv.style.display = 'flex'; fallbackDiv.textContent = 'banner'; }
                }
                const avatarImg = document.getElementById('avatarImg');
                const fallback = document.getElementById('avatarFallback');
                if (user.avatar) {
                    avatarImg.src = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=128`;
                    avatarImg.style.display = 'block';
                    fallback.style.display = 'none';
                    const nextAvatar = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=32`;
                    if (nextAvatar !== creatorAvatarUrl) {
                        creatorAvatarUrl = nextAvatar;
                        loadGuestbook();
                    }
                }
                else { avatarImg.style.display = 'none'; fallback.style.display = 'flex'; const initial = (user.global_name || user.username || 'u')[0] || 'u'; fallback.textContent = initial.toLowerCase(); }
                const decoContainer = document.getElementById('avatarDecoration');
                if (user.avatar_decoration_data && user.avatar_decoration_data.asset) { const asset = user.avatar_decoration_data.asset; const decoUrl = `https://cdn.discordapp.com/avatar-decoration-presets/${asset}.png?size=128`; decoContainer.style.backgroundImage = `url(${decoUrl})`; decoContainer.style.display = 'block'; }
                else { decoContainer.style.display = 'none'; }
                const displayName = user.global_name || user.username || 'dani';
                document.getElementById('displayName').textContent = displayName;
                const usernameLine = document.getElementById('usernameLine');
                const discrim = user.discriminator && user.discriminator !== '0' ? `#${user.discriminator}` : '';
                usernameLine.innerHTML = `@${user.username || 'actofpassion'}<span class="discrim">${discrim}</span>`;
                const statusKey = STATUS_COLORS[status] ? status : 'offline';
                document.getElementById('statusDot').innerHTML = STATUS_ICONS[statusKey];
                document.getElementById('statusDot').classList.toggle('online', status === 'online');
                document.getElementById('statusDot').title = status;
                const activeMap = { desktop: data.active_on_discord_desktop || false, web: data.active_on_discord_web || false, mobile: data.active_on_discord_mobile || false, embedded: data.active_on_discord_embedded || false, vr: data.active_on_discord_vr || false };
                document.querySelectorAll('.plat-inline').forEach(el => { const p = el.dataset.platform; if (activeMap[p]) el.classList.add('active'); else el.classList.remove('active'); });
                const activities = data.activities || [];
                const displayActivities = activities.filter(a => a.type !== 4);
                document.getElementById('activityCount').textContent = displayActivities.length;
                const listEl = document.getElementById('activityMiniList');
                spotifyData = data.spotify?.song
                    ? { start: data.spotify.timestamps?.start, end: data.spotify.timestamps?.end }
                    : null;
                if (displayActivities.length === 0) {
                    spotifyData = null;
                    listEl.innerHTML = `<div class="no-activities">no active activities.</div>`;
                }
                else {
                    let html = '';
                    for (const act of displayActivities) {
                        const isSpotify = act.name === 'Spotify' && data.spotify?.song;
                        if (isSpotify) {
                            const sp = data.spotify;
                            const start = sp.timestamps?.start;
                            const end = sp.timestamps?.end;
                            let width = 0, elapsed = '', duration = '';
                            if (start && end) {
                                const now = Date.now();
                                width = Math.min(1, Math.max(0, (now - start) / (end - start))) * 100;
                                elapsed = formatSpotifyTime(now - start);
                                duration = formatSpotifyTime(end - start);
                            }
                            const artUrl = sp.album_art_url || '';
                            const iconHtml = artUrl
                                ? `<img src="${escapeHtml(artUrl)}" alt="" loading="lazy" />`
                                : `<div style="width:100%;height:100%;background:var(--panel);border-radius:6px;"></div>`;
                            html += `<div class="activity-mini"><div class="mini-icon is-art">${iconHtml}</div><div class="mini-body"><div class="mini-name">${escapeHtml(sp.song)}</div>${sp.artist ? `<div class="mini-detail">${escapeHtml(sp.artist)}</div>` : ''}<div class="spotify-progress"><div class="spotify-progress-bar" id="spotifyProgress" style="width:${width}%"></div></div><div class="spotify-times"><span id="spotifyElapsed">${elapsed}</span><span id="spotifyDuration">${duration}</span></div></div></div>`;
                            continue;
                        }
                        const appName = act.name || 'unknown';
                        const detail = act.details || '';
                        const state = act.state || '';
                        const startTs = act.timestamps?.start;
                        let elapsed = '';
                        if (startTs) { const now = Date.now(); elapsed = `⏱ ${formatDuration(now - startTs)}`; }
                        const iconUrl = await resolveActivityIconUrl(act);
                        let iconHtml = '';
                        if (iconUrl) { iconHtml = `<img src="${escapeHtml(iconUrl)}" alt="${escapeHtml(appName)}" loading="lazy" />`; }
                        else { iconHtml = `<div style="width:100%;height:100%;background:var(--panel-2);border-radius:6px;"></div>`; }
                        html += `<div class="activity-mini"><div class="mini-icon">${iconHtml}</div><div class="mini-body"><div class="mini-name">${escapeHtml(appName)}</div>${detail ? `<div class="mini-detail">${escapeHtml(detail)}</div>` : ''}${state ? `<div class="mini-state">${escapeHtml(state)}</div>` : ''}${startTs ? `<div class="mini-timer" data-start="${startTs}">${elapsed}</div>` : ''}</div></div>`;
                    }
                    listEl.innerHTML = html;
                    updateSpotifyProgress();
                }
            } catch (e) {
                console.warn('presence render error:', e);
                spotifyData = null;
                document.getElementById('usernameLine').textContent = '@actofpassion · presence unavailable';
                document.getElementById('activityMiniList').innerHTML = `<div class="no-activities">⚠️ could not load presence.</div>`;
            }
        }

        async function loadDiscord() {
            try {
                const res = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_ID}`);
                const json = await res.json();
                if (!json.success) throw new Error('lanyard: user not found');
                await renderPresence(json.data);
            } catch (e) {
                console.warn('lanyard error:', e);
                spotifyData = null;
                document.getElementById('usernameLine').textContent = '@actofpassion · presence unavailable';
                document.getElementById('activityMiniList').innerHTML = `<div class="no-activities">⚠️ could not load presence.</div>`;
            }
        }

        let lanyardSocket = null;
        let lanyardHeartbeat = null;
        let lanyardRetry = 0;
        function connectLanyard() {
            try { if (lanyardSocket) lanyardSocket.close(); } catch (e) {}
            lanyardSocket = new WebSocket('wss://api.lanyard.rest/socket');
            lanyardSocket.onopen = () => { lanyardRetry = 0; };
            lanyardSocket.onmessage = (e) => {
                let msg;
                try { msg = JSON.parse(e.data); } catch (err) { return; }
                if (msg.op === 1) {
                    lanyardSocket.send(JSON.stringify({ op: 2, d: { subscribe_to_id: DISCORD_ID } }));
                    clearInterval(lanyardHeartbeat);
                    lanyardHeartbeat = setInterval(() => {
                        if (lanyardSocket?.readyState === WebSocket.OPEN) {
                            lanyardSocket.send(JSON.stringify({ op: 3 }));
                        }
                    }, msg.d?.heartbeat_interval || 30000);
                }
                if (msg.op === 0 && msg.d && msg.d.discord_user) {
                    renderPresence(msg.d);
                }
            };
            lanyardSocket.onclose = () => {
                clearInterval(lanyardHeartbeat);
                lanyardRetry = Math.min(lanyardRetry + 1, 5);
                setTimeout(connectLanyard, 1000 * lanyardRetry);
            };
            lanyardSocket.onerror = () => { lanyardSocket.close(); };
        }

        loadDiscord();
        connectLanyard();
        document.addEventListener('contextmenu', e => e.preventDefault());

        const BIRTH_DATE = new Date('2012-01-26');
        function updateAge() {
            const now = new Date();
            const diff = now - BIRTH_DATE;
            const years = diff / (365.25 * 24 * 60 * 60 * 1000);
            document.getElementById('static-age').textContent = Math.floor(years);
            document.getElementById('animated-age').textContent = years.toFixed(10);
        }
        updateAge();
        setInterval(updateAge, 100);

        async function fetchViews() {
            try {
                const r = await fetch('/api/views/current');
                const d = await r.json();
                document.getElementById('viewCount').textContent = d.count.toLocaleString();
            } catch (e) {}
        }

        fetch('/api/views').then(r => r.json()).then(d => {
            document.getElementById('viewCount').textContent = d.count.toLocaleString();
        }).catch(() => fetchViews());

        setInterval(fetchViews, 30000);

        function creatorToken() {
            return localStorage.getItem('gb_creator') || '';
        }
        function isCreatorUnlocked() {
            return Boolean(creatorToken());
        }
        function visitorId() {
            let id = localStorage.getItem('gb_vid');
            if (!id) {
                id = (crypto.randomUUID && crypto.randomUUID()) || (Date.now().toString(36) + Math.random().toString(36).slice(2, 12));
                localStorage.setItem('gb_vid', id);
            }
            return id;
        }
        function creatorHeaders() {
            const t = creatorToken();
            return {
                'X-Visitor-Id': visitorId(),
                ...(t ? { 'X-Creator-Token': t } : {}),
            };
        }

        let lastGuestbookSig = '';
        function guestbookSig(messages) {
            return JSON.stringify(messages || []) + '|' + (creatorAvatarUrl || '');
        }

        function renderGuestbook(messages) {
            const el = document.getElementById('guestbookList');
            const prevScroll = el.scrollTop;
            lastGuestbookSig = guestbookSig(messages);
            if (!messages || messages.length === 0) {
                el.innerHTML = '<div class="no-activities">no messages yet.</div>';
                return;
            }
            el.innerHTML = messages.map(m => {
                const when = new Date(m.created_at).toLocaleDateString([], { month: 'short', day: 'numeric' });
                const hearts = Number(m.heart_count) || 0;
                const heartBtn = `<button type="button" class="gb-heart ${m.hearted_by_me ? 'on' : ''}" data-heart="${m.id}">♥ ${hearts}</button>`;
                const creatorHeart = m.creator_hearted && creatorAvatarUrl
                    ? `<img class="gb-creator-heart" src="${escapeHtml(creatorAvatarUrl)}" alt="dani" title="dani hearted this" />`
                    : '';
                const reply = m.reply
                    ? `<div class="gb-reply"><span class="gb-reply-name">dani</span>${escapeHtml(m.reply)}</div>`
                    : '';
                let admin = '';
                if (isCreatorUnlocked()) {
                    admin = `<div class="gb-admin">
                        <button type="button" data-admin="reply" data-id="${m.id}">reply</button>
                        ${m.reply ? `<button type="button" data-admin="clear_reply" data-id="${m.id}">clear reply</button>` : ''}
                        <button type="button" data-admin="delete" data-id="${m.id}">delete</button>
                    </div>`;
                }
                return `<div class="guestbook-item">
                    <div class="gb-head"><span class="gb-name">${escapeHtml(m.name)}</span><span class="gb-when">${when}</span></div>
                    <div class="gb-msg">${escapeHtml(m.message)}</div>
                    <div class="gb-actions">${heartBtn}${creatorHeart}</div>
                    ${reply}
                    ${admin}
                </div>`;
            }).join('');
            el.scrollTop = prevScroll;
        }

        async function loadGuestbook() {
            try {
                const r = await fetch('/api/guestbook?t=' + Date.now(), {
                    cache: 'no-store',
                    headers: creatorHeaders(),
                });
                const d = await r.json();
                const messages = d.messages || [];
                if (guestbookSig(messages) !== lastGuestbookSig) {
                    renderGuestbook(messages);
                }
            } catch (e) {}
        }

        async function gbFetch(path, body) {
            const r = await fetch(path, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', ...creatorHeaders() },
                body: JSON.stringify(body),
                cache: 'no-store',
            });
            return r.json();
        }

        document.getElementById('guestbookForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const nameEl = document.getElementById('gbName');
            const msgEl = document.getElementById('gbMessage');
            const statusEl = document.getElementById('gbStatus');
            const name = nameEl.value.trim();
            const message = msgEl.value.trim();
            if (!name || !message) return;
            statusEl.textContent = 'sending...';
            try {
                const d = await gbFetch('/api/guestbook', { name, message });
                if (d.messages) {
                    renderGuestbook(d.messages);
                    msgEl.value = '';
                    statusEl.textContent = 'signed.';
                    setTimeout(() => { if (statusEl.textContent === 'signed.') statusEl.textContent = ''; }, 2000);
                } else {
                    statusEl.textContent = d.error || 'failed to post.';
                }
            } catch (err) {
                statusEl.textContent = 'failed to post.';
            }
        });

        document.getElementById('guestbookList').addEventListener('click', async (e) => {
            const heart = e.target.closest('[data-heart]');
            if (heart) {
                const id = Number(heart.dataset.heart);
                try {
                    const d = await gbFetch('/api/guestbook/heart', { message_id: id });
                    if (d.messages) {
                        renderGuestbook(d.messages);
                        const btn = document.querySelector(`[data-heart="${id}"]`);
                        if (btn) {
                            btn.classList.remove('pulse');
                            void btn.offsetWidth;
                            btn.classList.add('pulse');
                        }
                    }
                } catch (err) {}
                return;
            }
            const adminBtn = e.target.closest('[data-admin]');
            if (!adminBtn || !isCreatorUnlocked()) return;
            const action = adminBtn.dataset.admin;
            const id = Number(adminBtn.dataset.id);
            try {
                if (action === 'reply') {
                    const reply = prompt('reply:');
                    if (!reply || !reply.trim()) return;
                    const d = await gbFetch('/api/guestbook/admin', { message_id: id, action: 'reply', reply: reply.trim() });
                    if (d.messages) renderGuestbook(d.messages);
                } else if (action === 'delete') {
                    if (!confirm('delete this message?')) return;
                    const d = await gbFetch('/api/guestbook/admin', { message_id: id, action: 'delete' });
                    if (d.messages) renderGuestbook(d.messages);
                } else {
                    const d = await gbFetch('/api/guestbook/admin', { message_id: id, action });
                    if (d.messages) renderGuestbook(d.messages);
                }
            } catch (err) {}
        });

        const tokenParam = new URLSearchParams(location.search).get('gb');
        if (tokenParam) {
            localStorage.setItem('gb_creator', tokenParam);
            const clean = new URL(location.href);
            clean.searchParams.delete('gb');
            history.replaceState(null, '', clean);
        }
        loadGuestbook();
        setInterval(loadGuestbook, 4000);

        document.addEventListener('click', (e) => {
            const el = e.target.closest('.gb-open, .gb-close, .guestbook-form button, .gb-admin button, .gb-heart');
            if (!el) return;
            el.classList.remove('squish');
            void el.offsetWidth;
            el.classList.add('squish');
        });

        (function initPlacePreview() {
            const place = document.getElementById('romaniaPlace');
            const preview = document.getElementById('mapPreview');
            const openBtn = document.getElementById('mapOpen');
            const APPLE_MAPS_URL = 'https://www.openstreetmap.org/?mlat=45.9432&mlon=24.9668&zoom=5';
            openBtn.href = APPLE_MAPS_URL;

            let hideTimer = 0;

            function placePreview() {
                const rect = place.getBoundingClientRect();
                const w = 280;
                const left = Math.min(Math.max(8, rect.left - 20), window.innerWidth - w - 8);
                let top = rect.bottom + 10;
                if (top + 210 > window.innerHeight) {
                    top = Math.max(8, rect.top - 220);
                }
                preview.style.left = left + 'px';
                preview.style.top = top + 'px';
            }

            function show() {
                clearTimeout(hideTimer);
                placePreview();
                preview.classList.add('show');
                preview.setAttribute('aria-hidden', 'false');
            }

            function hide() {
                hideTimer = setTimeout(() => {
                    preview.classList.remove('show');
                    preview.setAttribute('aria-hidden', 'true');
                }, 140);
            }

            place.addEventListener('mouseenter', show);
            place.addEventListener('mouseleave', hide);
            preview.addEventListener('mouseenter', () => clearTimeout(hideTimer));
            preview.addEventListener('mouseleave', hide);
            place.addEventListener('click', () => {
                window.open(APPLE_MAPS_URL, '_blank', 'noopener');
            });
            window.addEventListener('scroll', () => {
                if (preview.classList.contains('show')) placePreview();
            }, true);
        })();

        (function initSparkles() {
            if (!window.matchMedia || !matchMedia('(pointer: fine)').matches) return;
            if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
            const canvas = document.getElementById('sparkCanvas');
            const ctx = canvas.getContext('2d');
            let particles = [];
            let lastSpawn = 0;
            let raf = 0;
            let running = false;

            function resize() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            resize();
            window.addEventListener('resize', resize);

            function spawn(x, y) {
                const count = 1 + (Math.random() < 0.35 ? 1 : 0);
                for (let i = 0; i < count; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = 0.4 + Math.random() * 1.1;
                    particles.push({
                        x: x + (Math.random() - 0.5) * 8,
                        y: y + (Math.random() - 0.5) * 8,
                        vx: Math.cos(angle) * speed,
                        vy: Math.sin(angle) * speed + 0.25,
                        life: 1,
                        decay: 0.02 + Math.random() * 0.03,
                        size: 1.2 + Math.random() * 2.2,
                        spin: Math.random() * Math.PI,
                    });
                }
                if (particles.length > 120) particles = particles.slice(-120);
            }

            function drawStar(x, y, r, rot, alpha) {
                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(rot);
                ctx.globalAlpha = alpha;
                ctx.fillStyle = '#fff';
                ctx.beginPath();
                for (let i = 0; i < 4; i++) {
                    ctx.rotate(Math.PI / 2);
                    ctx.moveTo(0, 0);
                    ctx.quadraticCurveTo(r * 0.25, r * 0.25, 0, r);
                    ctx.quadraticCurveTo(-r * 0.25, r * 0.25, 0, 0);
                }
                ctx.fill();
                ctx.restore();
            }

            function tick() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (let i = particles.length - 1; i >= 0; i--) {
                    const p = particles[i];
                    p.x += p.vx;
                    p.y += p.vy;
                    p.vy += 0.02;
                    p.life -= p.decay;
                    p.spin += 0.08;
                    if (p.life <= 0) {
                        particles.splice(i, 1);
                        continue;
                    }
                    const alpha = Math.max(0, p.life);
                    const size = p.size * (0.5 + p.life * 0.5);
                    if (Math.random() < 0.5) {
                        drawStar(p.x, p.y, size * 2, p.spin, alpha * 0.9);
                    } else {
                        ctx.globalAlpha = alpha;
                        ctx.fillStyle = 'rgba(255,255,255,0.95)';
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, size * 0.45, 0, Math.PI * 2);
                        ctx.fill();
                    }
                }
                if (particles.length > 0) {
                    raf = requestAnimationFrame(tick);
                } else {
                    running = false;
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }
            }

            window.addEventListener('mousemove', (e) => {
                const now = performance.now();
                if (now - lastSpawn < 16) return;
                lastSpawn = now;
                spawn(e.clientX, e.clientY);
                if (!running) {
                    running = true;
                    raf = requestAnimationFrame(tick);
                }
            });
        })();

        (function initSelectionMarkers() {
            if (!window.matchMedia || !matchMedia('(pointer: fine)').matches) return;
            const layer = document.getElementById('selLayer');

            function clearMarks() {
                layer.textContent = '';
            }

            function drawMarks() {
                const sel = window.getSelection();
                clearMarks();
                if (!sel || sel.isCollapsed || sel.rangeCount === 0) return;
                const active = document.activeElement;
                if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) return;

                const range = sel.getRangeAt(0);
                const rects = Array.from(range.getClientRects()).filter(r => r.width > 0.5 && r.height > 0.5);
                const rows = [];
                for (const r of rects) {
                    const row = rows.find(row => Math.abs(row.top - r.top) < r.height * 0.5 && r.left <= row.right + 8 && r.right >= row.left - 8);
                    if (row) {
                        row.left = Math.min(row.left, r.left);
                        row.right = Math.max(row.right, r.right);
                        row.top = Math.min(row.top, r.top);
                        row.bottom = Math.max(row.bottom, r.bottom);
                    } else {
                        rows.push({ left: r.left, right: r.right, top: r.top, bottom: r.bottom });
                    }
                }
                for (const row of rows) {
                    const el = document.createElement('div');
                    el.className = 'sel-mark';
                    const padX = 3;
                    const padY = 1;
                    el.style.left = (row.left - padX) + 'px';
                    el.style.top = (row.top - padY) + 'px';
                    el.style.width = (row.right - row.left + padX * 2) + 'px';
                    el.style.height = (row.bottom - row.top + padY * 2) + 'px';
                    layer.appendChild(el);
                }
            }

            let raf = 0;
            const schedule = () => {
                cancelAnimationFrame(raf);
                raf = requestAnimationFrame(drawMarks);
            };

            document.addEventListener('selectionchange', schedule);
            window.addEventListener('scroll', schedule, true);
            window.addEventListener('resize', schedule);
        })();

        const gbSidebar = document.getElementById('gbSidebar');
        const gbOverlay = document.getElementById('gbOverlay');
        function openGuestbook() {
            gbSidebar.classList.add('open');
            gbOverlay.classList.add('open');
            gbSidebar.setAttribute('aria-hidden', 'false');
            loadGuestbook();
        }
        function closeGuestbook() {
            gbSidebar.classList.remove('open');
            gbOverlay.classList.remove('open');
            gbSidebar.setAttribute('aria-hidden', 'true');
        }
        document.getElementById('gbOpen').addEventListener('click', openGuestbook);
        document.getElementById('gbClose').addEventListener('click', closeGuestbook);
        gbOverlay.addEventListener('click', closeGuestbook);
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeGuestbook();
        });
    </script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b0e8ffb3ea66400995d6e3b218df9900"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>