@import url("./auth.css");

/* ------------------------------------------------------------------ */
/* Fonts (Open Sans, self-hosted, SIL OFL - see /fonts/OpenSans/OFL.txt) */
/* ------------------------------------------------------------------ */
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-latin-400-normal.woff2")
                format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
        unicode-range:
                U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-cyrillic-400-normal.woff2")
                format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-latin-400-italic.woff2")
                format("woff2");
        font-weight: 400;
        font-style: italic;
        font-display: swap;
        unicode-range:
                U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-cyrillic-400-italic.woff2")
                format("woff2");
        font-weight: 400;
        font-style: italic;
        font-display: swap;
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-latin-600-normal.woff2")
                format("woff2");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
        unicode-range:
                U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-cyrillic-600-normal.woff2")
                format("woff2");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-latin-700-normal.woff2")
                format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        unicode-range:
                U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                U+2215, U+FEFF, U+FFFD;
}
@font-face {
        font-family: "Open Sans";
        src: url("../fonts/OpenSans/open-sans-cyrillic-700-normal.woff2")
                format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
        --font:
                "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype",
                "Myriad Pro", "Lucida Grande", Tahoma, Verdana, sans-serif;

        --ink: #12394f;
        --ink-soft: #46697f;
        --ink-faint: #6f8ea2;
        --link: #0a63ad;
        --heading: #0a4f82;
        --leaf-deep: #2a7d12;
        --line: #a9d4ec;
        --line-strong: #8fc3e2;
        --paper: #f2faff;
        --sun: #ffab2e;

        --taskbar-h: 2.75rem;

        /* shared glossy gradients: the hard stop at 50% is the "gel" look */
        --gel-aqua: linear-gradient(
                180deg,
                #62c6f5 0%,
                #2a9fe6 46%,
                #0e7fd0 50%,
                #1c93e0 78%,
                #2ea4ea 100%
        );
        --gel-green: linear-gradient(
                180deg,
                #b6f080 0%,
                #6cc83a 46%,
                #3f9f1a 50%,
                #55b92a 100%
        );
        --gel-glass: linear-gradient(
                180deg,
                #ffffff 0%,
                #eaf7fe 46%,
                #c6e8f9 50%,
                #e2f4fd 100%
        );
        --gel-glass-hover: linear-gradient(
                180deg,
                #ffffff 0%,
                #e6f6ff 46%,
                #a6dcf6 50%,
                #cdeefd 100%
        );
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
        box-sizing: border-box;
}

::selection {
        color: #fff;
        background: #1a8fd8;
}

html {
        font-size: 16px;
        color-scheme: light;
}

body {
        margin: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding: 1rem 1rem calc(var(--taskbar-h) + 1rem);
        font-family: var(--font);
        font-size: 1rem;
        line-height: 1.5;
        color: var(--ink);
        background: #4fb4ee;
        cursor: url("../cursors/pointer.cur"), auto;
        -webkit-font-smoothing: antialiased;
}

h1,
h2 {
        margin: 0;
        font: inherit;
}

p {
        margin: 0 0 0.5rem;
}

a {
        color: var(--link);
}
a:hover {
        color: #0b7fd6;
}

a,
button,
summary {
        cursor: url("../cursors/link.cur"), pointer;
}
input,
textarea,
.box-title,
p {
        cursor: url("../cursors/beam.cur"), text;
}

input,
textarea,
button {
        font-family: var(--font);
}

:focus-visible {
        outline: 3px solid var(--sun);
        outline-offset: 2px;
}

.sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
}

/* ------------------------------------------------------------------ */
/* Desktop: sky, meadow, bubbles, stickers                             */
/* ------------------------------------------------------------------ */
.desktop {
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
}

.page-bg {
        position: absolute;
        inset: 0;
        background: #4fb4ee url("../img/background-frutiger.png") center / cover
                no-repeat;
}

.bubbles span {
        position: absolute;
        bottom: -12vh;
        left: var(--x);
        width: var(--s);
        aspect-ratio: 1;
        border-radius: 50%;
        background:
                radial-gradient(
                        circle at 30% 26%,
                        rgb(255 255 255 / 0.95) 0 7%,
                        rgb(255 255 255 / 0.25) 22%,
                        rgb(255 255 255 / 0) 42%
                ),
                radial-gradient(
                        circle at 50% 50%,
                        rgb(255 255 255 / 0) 56%,
                        rgb(150 225 255 / 0.5) 80%,
                        rgb(255 255 255 / 0.85) 100%
                ),
                radial-gradient(
                        circle at 68% 78%,
                        rgb(255 255 255 / 0.5),
                        rgb(255 255 255 / 0) 38%
                );
        box-shadow:
                inset 0 0 0 1px rgb(255 255 255 / 0.55),
                0 0 1rem rgb(255 255 255 / 0.35);
        animation: bubble-rise var(--t) linear var(--d) infinite;
}

@keyframes bubble-rise {
        from {
                transform: translate(0, 0);
        }
        50% {
                transform: translate(var(--sway), -65vh);
        }
        to {
                transform: translate(calc(var(--sway) * -0.6), -125vh);
        }
}

.gif {
        position: absolute;
        height: auto;
        object-fit: contain;
        border: 4px solid rgb(255 255 255 / 0.78);
        border-radius: 14px;
        background: rgb(255 255 255 / 0.4);
        box-shadow:
                0 0 0 1px rgb(8 70 120 / 0.45),
                0 8px 22px rgb(4 48 96 / 0.35);
}
.gif-center {
        width: min(500px, 90vw);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.gif-tl {
        width: 200px;
        top: 0.75rem;
        left: 0.75rem;
}
.gif-tr {
        width: 200px;
        top: 0.75rem;
        right: 0.75rem;
}
.gif-br {
        width: 200px;
        right: 0.75rem;
        bottom: calc(var(--taskbar-h) + 0.75rem);
}

/* ------------------------------------------------------------------ */
/* Window (Vista-style glass frame)                                    */
/* ------------------------------------------------------------------ */
.window {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        width: min(100%, 70rem);
        max-height: calc(100vh - var(--taskbar-h) - 2rem);
        max-height: calc(100dvh - var(--taskbar-h) - 2rem);
        margin: 0 auto;
        padding: 0 0.5rem 0.5rem;
        border-radius: 14px 14px 8px 8px;
        background: linear-gradient(
                135deg,
                rgb(255 255 255 / 0.5),
                rgb(140 215 255 / 0.5)
        );
        backdrop-filter: blur(12px) saturate(1.5);
        -webkit-backdrop-filter: blur(12px) saturate(1.5);
        box-shadow:
                0 0 0 1px rgb(6 52 96 / 0.6),
                inset 0 0 0 1px rgb(255 255 255 / 0.75),
                0 22px 48px rgb(4 48 96 / 0.42);
}
/* the diagonal glass reflection across the frame */
.window::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(
                112deg,
                rgb(255 255 255 / 0.42) 0%,
                rgb(255 255 255 / 0.42) 22%,
                rgb(255 255 255 / 0) 22.2%,
                rgb(255 255 255 / 0) 62%,
                rgb(255 255 255 / 0.16) 62.2%,
                rgb(255 255 255 / 0.16) 78%,
                rgb(255 255 255 / 0) 78.2%
        );
}
.window[data-hidden] {
        display: none;
}
.window[data-restored] {
        animation: window-restore 0.22s ease-out;
}
@keyframes window-restore {
        from {
                opacity: 0;
                transform: translateY(1.5rem) scale(0.97);
        }
}

.titlebar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        height: 2.25rem;
        padding-left: 0.25rem;
}
.titlebar-icon {
        width: 1.25rem;
        height: 1.25rem;
}
.titlebar-title {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #0b2b44;
        text-shadow:
                0 0 0.5rem #fff,
                0 0 0.25rem #fff,
                0 0 0.1rem #fff;
}

.caption-buttons {
        display: flex;
        align-self: flex-start;
        margin-right: 0.125rem;
        margin-bottom: 5px;
        border-radius: 0 0 6px 6px;
        overflow: hidden;
        box-shadow:
                0 0 0 1px rgb(6 52 96 / 0.65),
                0 1px 3px rgb(0 40 80 / 0.4);
}
.cap-btn {
        display: grid;
        place-items: center;
        width: 2.25rem;
        height: 1.375rem;
        padding: 0;
        border: 0;
        color: #12394f;
        background: linear-gradient(
                180deg,
                #f2f9fe 0%,
                #cfe7f6 48%,
                #aad2ea 52%,
                #c4e3f4 100%
        );
}
.cap-btn + .cap-btn {
        border-left: 1px solid rgb(6 52 96 / 0.45);
}
.cap-btn:hover {
        background: linear-gradient(
                180deg,
                #ffffff 0%,
                #e3f4ff 48%,
                #92d8fb 52%,
                #c7efff 100%
        );
}
.cap-close {
        width: 3.25rem;
        color: #fff;
        background: linear-gradient(
                180deg,
                #f4b5a6 0%,
                #e0705a 48%,
                #c32f17 52%,
                #e0583a 100%
        );
}
.cap-close:hover {
        background: linear-gradient(
                180deg,
                #ffd0c4 0%,
                #f0846c 48%,
                #e0371a 52%,
                #ff7a56 100%
        );
        box-shadow: 0 0 0.75rem rgb(255 120 80 / 0.8);
}
.cap-btn svg {
        display: block;
        filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.5));
}
.cap-close svg {
        filter: drop-shadow(0 1px 1px rgb(90 10 0 / 0.7));
}

.window-content {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--paper);
        border-radius: 4px 4px 2px 2px;
        box-shadow:
                0 0 0 1px rgb(6 52 96 / 0.6),
                0 0 0 2px rgb(255 255 255 / 0.55);
        scrollbar-color: #7cc4ee #dff2fc;
}
.window-content > * {
        flex-shrink: 0;
}
.window-content::-webkit-scrollbar {
        width: 1rem;
}
.window-content::-webkit-scrollbar-track {
        background: linear-gradient(90deg, #cfe9f8, #eef8fe);
        border-left: 1px solid var(--line);
}
.window-content::-webkit-scrollbar-thumb {
        border: 1px solid #4f9ccb;
        border-radius: 6px;
        background: linear-gradient(
                90deg,
                #e9f7ff 0%,
                #a9dcf8 45%,
                #6cc0f0 50%,
                #a3dafa 100%
        );
}

/* ------------------------------------------------------------------ */
/* Header banner + search + nav                                        */
/* ------------------------------------------------------------------ */
.sh-header {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem 1.5rem;
        padding: 0.75rem 1.25rem;
        color: #fff;
        background:
                radial-gradient(
                        ellipse 22rem 7rem at 82% 0%,
                        rgb(255 255 255 / 0.45),
                        rgb(255 255 255 / 0) 70%
                ),
                radial-gradient(
                        circle at 62% 70%,
                        rgb(255 255 255 / 0.22) 0 1.4rem,
                        rgb(255 255 255 / 0) 1.5rem
                ),
                radial-gradient(
                        circle at 71% 30%,
                        rgb(255 255 255 / 0.18) 0 0.7rem,
                        rgb(255 255 255 / 0) 0.8rem
                ),
                var(--gel-aqua);
        border-bottom: 1px solid #0a5a99;
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
}

.sh-logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #fff;
        text-decoration: none;
}
.sh-logo img {
        width: 3rem;
        height: 3rem;
        filter: drop-shadow(0 2px 3px rgb(0 40 90 / 0.55));
}
.sh-logo-name {
        display: block;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;
        text-shadow:
                0 1px 0 #0a5a99,
                0 2px 8px rgb(0 40 90 / 0.55);
}
.sh-logo small {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 400;
        text-shadow: 0 1px 2px rgb(0 40 90 / 0.7);
}

.sh-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.5rem;
}

.sh-search {
        margin: 0;
}
.sh-search-container {
        display: flex;
        align-items: stretch;
        padding: 2px;
        border-radius: 999px;
        background: #fff;
        box-shadow:
                inset 0 1px 3px rgb(0 50 100 / 0.5),
                0 0 0 1px rgb(6 62 110 / 0.65),
                0 1px 0 1px rgb(255 255 255 / 0.45);
}
.sh-search-container input {
        width: 15rem;
        min-width: 0;
        padding: 0.25rem 0.875rem;
        border: 0;
        border-radius: 999px 0 0 999px;
        background: transparent;
        color: var(--ink);
        font-size: 0.9375rem;
}
.sh-search-container input:focus {
        outline: none;
}
.sh-search-container:focus-within {
        box-shadow:
                inset 0 1px 3px rgb(0 50 100 / 0.5),
                0 0 0 1px rgb(6 62 110 / 0.65),
                0 0 0 4px rgb(255 171 46 / 0.75);
}
.sh-search-container .btn {
        border-radius: 999px;
        padding-inline: 1rem;
}

.sh-account {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.25rem 0;
        font-size: 0.875rem;
}
.sh-account a {
        color: #fff;
        text-shadow: 0 1px 2px rgb(0 40 90 / 0.7);
}
.sh-account a + a::before {
        content: "|";
        display: inline-block;
        margin: 0 0.5rem;
        color: rgb(255 255 255 / 0.7);
        text-decoration: none;
}
.sh-account a + a {
        text-decoration: none;
}
.sh-account a:hover {
        color: #fff;
        text-decoration: underline;
}

.sh-nav {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.3125rem 1rem;
        overflow-x: auto;
        background: var(--gel-glass);
        border-bottom: 1px solid var(--line-strong);
        box-shadow: 0 2px 6px rgb(8 70 120 / 0.15);
        scrollbar-width: none;
}
.sh-nav::-webkit-scrollbar {
        display: none;
}
.nav-link {
        padding: 0.25rem 0.875rem;
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--heading);
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
}
.nav-link:hover {
        color: var(--heading);
        border-color: #7cc0e6;
        background: var(--gel-glass-hover);
}
.nav-link[aria-current="page"] {
        color: #fff;
        text-shadow: 0 1px 1px rgb(0 50 100 / 0.65);
        border-color: #0a5a99;
        background: var(--gel-aqua);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
}
.nav-sep {
        flex: none;
        align-self: stretch;
        width: 1px;
        margin: 0.25rem 0.375rem;
        background: linear-gradient(rgb(0 0 0 / 0), #8fc3e2, rgb(0 0 0 / 0));
}
.nav-ghosts {
        display: flex;
        gap: 0.25rem;
}
.nav-ghosts span {
        padding: 0.25rem 0.5rem;
        color: var(--ink-faint);
        font-size: 0.875rem;
        white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Page body                                                           */
/* ------------------------------------------------------------------ */
.sh-body {
        flex: 1 0 auto;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        background: linear-gradient(180deg, #d9f1fc 0, var(--paper) 14rem);
}
.col-left {
        width: 21.25rem;
        flex-shrink: 0;
}
.col-right {
        flex: 1;
        min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Boxes                                                               */
/* ------------------------------------------------------------------ */
.box {
        position: relative;
        margin: 0 0 1rem;
        border-radius: 12px;
        background: linear-gradient(180deg, #fff 0%, #f6fcff 100%);
        box-shadow:
                0 0 0 1px var(--line-strong),
                0 0 0 2px rgb(255 255 255 / 0.9),
                0 4px 12px rgb(8 70 120 / 0.16);
}
.box-title {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.5rem;
        padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
        border-radius: 12px 12px 0 0;
        color: var(--heading);
        font-weight: 700;
        text-shadow: 0 1px 0 #fff;
        background: var(--gel-glass);
        border-bottom: 1px solid var(--line-strong);
        box-shadow: inset 0 1px 0 #fff;
}
.box-heading {
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.25;
}
.box-icon {
        flex: none;
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        font-size: 0.9375rem;
        line-height: 1;
        background: radial-gradient(
                circle at 32% 24%,
                #fff 0 12%,
                #c4ecff 38%,
                #55bcf0 100%
        );
        box-shadow:
                0 0 0 1px #4f9ccb,
                inset 0 -3px 5px rgb(0 110 190 / 0.3),
                0 1px 2px rgb(0 50 90 / 0.35);
        text-shadow: none;
}
.viewall {
        margin-left: auto;
        flex: none;
        padding: 0.0625rem 0.75rem;
        border: 1px solid #7cc0e6;
        border-radius: 999px;
        background: var(--gel-glass);
        color: var(--link);
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: none;
        text-shadow: none;
}
.viewall:hover {
        background: var(--gel-glass-hover);
}
.box-body {
        padding: 0.875rem;
}
.box-body > :last-child {
        margin-bottom: 0;
}
.friends-label {
        margin: 0 !important;
}

/* Buttons */
.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        padding: 0.3125rem 1rem;
        border: 1px solid #3d7fa6;
        border-radius: 7px;
        color: var(--heading);
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.3;
        text-decoration: none;
        white-space: nowrap;
        text-shadow: 0 1px 0 rgb(255 255 255 / 0.8);
        background: var(--gel-glass);
        box-shadow:
                inset 0 1px 0 #fff,
                0 1px 3px rgb(0 60 100 / 0.3);
}
.btn:hover {
        color: var(--heading);
        background: var(--gel-glass-hover);
        box-shadow:
                inset 0 1px 0 #fff,
                0 0 0.75rem rgb(60 180 255 / 0.6);
}
.btn:active {
        box-shadow: inset 0 2px 5px rgb(0 60 100 / 0.4);
}
.btn-green {
        border-color: #2a7a10;
        color: #fff;
        text-shadow: 0 1px 2px rgb(10 60 0 / 0.75);
        background: var(--gel-green);
        box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.65),
                0 1px 3px rgb(0 60 0 / 0.35);
}
.btn-green:hover {
        color: #fff;
        background: linear-gradient(
                180deg,
                #c8ff9a 0%,
                #80dd48 46%,
                #4cb620 50%,
                #66cc34 100%
        );
        box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.65),
                0 0 0.875rem rgb(130 230 60 / 0.8);
}
.btn:disabled {
        cursor: url("../cursors/forbidden.cur"), not-allowed;
        color: #6f8a9a;
        border-color: #a6bccb;
        text-shadow: none;
        background: linear-gradient(180deg, #f4f8fb, #dfe8ee);
        box-shadow: none;
}

/* Profile */
.profile-top {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
}
.pfp {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        padding: 5px;
        border-radius: 18px;
        background: linear-gradient(145deg, #fff, #bfe8fb 50%, #fff);
        box-shadow:
                0 0 0 1px rgb(20 100 160 / 0.6),
                0 6px 14px rgb(10 80 140 / 0.35);
}
.pfp img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 13px;
}
.pfp::after {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 13px;
        pointer-events: none;
        background: linear-gradient(
                168deg,
                rgb(255 255 255 / 0.5) 0%,
                rgb(255 255 255 / 0.12) 38%,
                rgb(255 255 255 / 0) 39%
        );
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5);
}
.profile-info {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 0.9375rem;
}
.profile-info p {
        margin: 0 0 0.375rem;
}
.profile-info b {
        color: var(--heading);
}
.profile-media {
        position: relative;
        flex: none;
        width: 8.75rem;
}
.profile-stage {
        position: absolute;
        bottom: -30px;
        left: 0;
        z-index: 10;

        text-align: center;
        line-height: 0;
}
.profile-gif {
        width: 100%;
        height: auto;
        filter: drop-shadow(0 6px 4px rgb(8 70 120 / 0.25));
}

.url-box {
        overflow: hidden;
        background: #3aa9e6 url("../miami-vice-speedboat.gif") center / cover;
        color: #fff;
        text-align: center;
}
.url-box .box-body {
        background: linear-gradient(
                180deg,
                rgb(255 255 255 / 0.25),
                rgb(6 60 100 / 0.55) 60%
        );
        text-shadow: 0 1px 3px rgb(0 30 60 / 0.9);
        font-weight: 700;
}
.url-box p {
        margin: 0;
}

.font-download .box-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        font-weight: 700;
        color: var(--heading);
}

.topic {
        margin: 0.875rem 0 0.125rem;
        color: var(--leaf-deep);
        font-weight: 700;
}
.topic:first-child {
        margin-top: 0;
}

.profile-link {
        display: inline-block;
        margin: 0 0.375rem 0.375rem 0;
        padding: 0.25rem 0.875rem;
        border: 1px solid #7cc0e6;
        border-radius: 999px;
        background: var(--gel-glass);
        font-weight: 600;
        text-decoration: none;
}
.profile-link:hover {
        background: var(--gel-glass-hover);
}

.thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 0 0 0.75rem;
}
.thumbs img,
.page-gif {
        display: block;
        height: auto;
        border: 3px solid #fff;
        border-radius: 10px;
        box-shadow:
                0 0 0 1px var(--line-strong),
                0 3px 8px rgb(8 70 120 / 0.22);
}
.thumbs img {
        width: 14rem;
        max-width: 100%;
}
.page-gif {
        width: 100%;
        margin-bottom: 1rem;
        border-radius: 12px;
}

.back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        font-weight: 700;
        text-decoration: none;
}
.back-orb {
        display: grid;
        place-items: center;
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 50%;
        border: 1px solid #0a5a99;
        background:
                radial-gradient(
                        circle at 50% 120%,
                        #8fe6ff,
                        rgb(143 230 255 / 0) 60%
                ),
                linear-gradient(
                        180deg,
                        #62c6f5,
                        #1480d0 50%,
                        #0b66b4 52%,
                        #1a8ad8
                );
        box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.7),
                0 1px 3px rgb(0 60 100 / 0.4);
}
.back-orb::before {
        content: "";
        width: 0.6rem;
        height: 0.7rem;
        margin-right: 0.1rem;
        background: #fff;
        clip-path: polygon(100% 0, 0 50%, 100% 100%);
        filter: drop-shadow(0 1px 1px rgb(0 40 90 / 0.6));
}
.back-link:hover .back-orb {
        box-shadow:
                inset 0 1px 0 rgb(255 255 255 / 0.7),
                0 0 0.75rem rgb(60 190 255 / 0.9);
}

/* Recommendation lists (games/music/movies) */
.rec-list {
        display: flex;
        flex-direction: column;
}
.rec-item {
        display: flex;
        gap: 0.875rem;
        align-items: flex-start;
        padding: 0.875rem 0;
        border-bottom: 1px solid transparent;
        border-image: linear-gradient(
                        90deg,
                        rgb(0 0 0 / 0),
                        #b4d9ee 15%,
                        #b4d9ee 85%,
                        rgb(0 0 0 / 0)
                )
                1;
}
.rec-item:first-child {
        padding-top: 0;
}
.rec-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
}
.rec-item img {
        flex: none;
        width: 5.625rem;
        height: 5.625rem;
        object-fit: cover;
        border: 3px solid #fff;
        border-radius: 8px;
        box-shadow:
                0 0 0 1px var(--line-strong),
                0 2px 6px rgb(8 70 120 / 0.25);
}
.rec-title {
        margin: 0;
        color: var(--heading);
        font-weight: 700;
}
.rec-desc {
        margin: 0.125rem 0 0;
        color: var(--ink-soft);
}

.player-info {
        flex: 1;
        min-width: 0;
}
.player-info audio {
        display: block;
        width: 100%;
        height: 2.75rem;
        margin: 0.375rem 0;
        border-radius: 999px;
}
.spotify-link {
        color: #1d7a35;
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
}
.spotify-link:hover {
        color: #14602a;
        text-decoration: underline;
}

/* Friends */
.friends-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.875rem;
        margin-top: 0.75rem;
}
.friend {
        width: 6.875rem;
        text-align: center;
        font-size: 0.9375rem;
}
.friend img {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border: 3px solid #fff;
        border-radius: 10px;
        box-shadow:
                0 0 0 1px var(--line-strong),
                0 3px 8px rgb(8 70 120 / 0.22);
}
.friend a,
.friend p {
        display: block;
        margin: 0.375rem 0 0;
        font-weight: 600;
        overflow-wrap: anywhere;
}

/* Comments (chat-bubble style) */
.comment-input-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid #cfe6f3;
}
.comment-input {
        width: 100%;
        resize: vertical;
        font-size: 0.9375rem;
}
#comment-send {
        align-self: flex-start;
}

.comment-list {
        display: flex;
        flex-direction: column;
        gap: 1.125rem;
}
.comment-item {
        display: flex;
        gap: 0.875rem;
        align-items: flex-start;
}
.comment-pfp {
        flex: none;
        width: 4.375rem;
        height: 4.375rem;
        object-fit: cover;
        border: 3px solid #fff;
        border-radius: 12px;
        box-shadow:
                0 0 0 1px var(--line-strong),
                0 3px 8px rgb(8 70 120 / 0.22);
}
.comment-body {
        position: relative;
        flex: 1;
        min-width: 0;
        padding: 0.625rem 0.875rem;
        border-radius: 12px;
        background: linear-gradient(180deg, #fff 0%, #eaf7ff 100%);
        box-shadow:
                0 0 0 1px var(--line),
                0 2px 6px rgb(8 70 120 / 0.12);
}
.comment-body::before {
        content: "";
        position: absolute;
        top: 1.25rem;
        left: -0.4375rem;
        width: 0.8125rem;
        height: 0.8125rem;
        background: #fbfeff;
        border-left: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        transform: rotate(45deg);
}
.comment-name-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.125rem 0.5rem;
}
.comment-youtube {
        display: flex;
}
a.comment-name,
.friend a {
        text-decoration: none;
}
a.comment-name:hover,
.friend a:hover {
        text-decoration: underline;
}
.comment-youtube img {
        width: 0.875rem;
        height: 0.875rem;
        object-fit: contain;
}
.comment-name {
        margin: 0;
        color: var(--heading);
        font-weight: 700;
}
.comment-hash {
        margin: 0;
        color: var(--ink-faint);
        font-size: 0.8125rem;
}
.comment-text {
        margin: 0.25rem 0;
        overflow-x: auto;
        white-space: pre-line;
        overflow-wrap: break-word;
}
.comment-footer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
}
.comment-date {
        margin: 0;
        color: var(--ink-faint);
        font-size: 0.8125rem;
}
.comment-footer button {
        padding: 0;
        border: 0;
        background: none;
        color: #b3261a;
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: underline;
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
        padding: 0.375rem 0.625rem;
        border: 1px solid #7aa6c0;
        border-radius: 7px;
        background: #fff;
        color: var(--ink);
        font-size: 0.9375rem;
        box-shadow: inset 0 1px 3px rgb(8 70 120 / 0.25);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
        outline: none;
        border-color: #2a95dc;
        box-shadow:
                inset 0 1px 3px rgb(8 70 120 / 0.25),
                0 0 0 3px rgb(60 180 250 / 0.4);
}
input::placeholder,
textarea::placeholder {
        color: #8aa5b6;
}
input[type="checkbox"] {
        accent-color: #2a95dc;
}

/* Footer */
.sh-footer {
        padding: 0.75rem;
        border-top: 1px solid var(--line);
        background: linear-gradient(180deg, #eaf7fe, #d5ecf9);
        color: var(--ink-soft);
        font-size: 0.8125rem;
        text-align: center;
}
.sh-footer a {
        color: var(--link);
        text-decoration: none;
}
.sh-footer a:hover {
        text-decoration: underline;
}

.about-section .box-body {
        padding-bottom: 1.5rem;
}
.about-gif {
        position: absolute;
        right: -1rem;
        bottom: -1.25rem;
        z-index: 2;
        width: 8.75rem;
        height: auto;
        filter: drop-shadow(0 4px 6px rgb(8 70 120 / 0.3));
}

/* ------------------------------------------------------------------ */
/* Taskbar                                                             */
/* ------------------------------------------------------------------ */
.taskbar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 0.625rem;
        height: var(--taskbar-h);
        padding-left: 0.5rem;
        color: #fff;
        background: linear-gradient(
                180deg,
                rgb(150 214 250 / 0.62) 0%,
                rgb(40 110 180 / 0.74) 46%,
                rgb(12 62 124 / 0.88) 52%,
                rgb(24 92 160 / 0.84) 100%
        );
        backdrop-filter: blur(14px) saturate(1.5);
        -webkit-backdrop-filter: blur(14px) saturate(1.5);
        border-top: 1px solid rgb(255 255 255 / 0.75);
        box-shadow:
                0 -1px 0 rgb(6 40 90 / 0.55),
                0 -6px 16px rgb(4 40 90 / 0.25);
}
.start-orb {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        margin-top: -0.25rem;
        border-radius: 50%;
        background:
                radial-gradient(
                        circle at 50% 125%,
                        #8fe8ff,
                        rgb(143 232 255 / 0) 60%
                ),
                radial-gradient(circle at 50% 30%, #3b9de0, #0b4a97 75%);
        box-shadow:
                0 0 0 1px rgb(255 255 255 / 0.85),
                0 0 0 2px rgb(6 40 90 / 0.7),
                0 2px 8px rgb(0 20 60 / 0.6),
                inset 0 1px 3px rgb(255 255 255 / 0.8);
}
.start-orb img {
        width: 1.625rem;
        height: 1.625rem;
}
.start-orb:hover {
        filter: brightness(1.18) drop-shadow(0 0 0.5rem #8fe1ff);
}

.task-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        max-width: 14rem;
        height: 2.125rem;
        padding: 0 0.875rem 0 0.5rem;
        border: 1px solid rgb(255 255 255 / 0.6);
        border-radius: 6px;
        color: #fff;
        font-size: 0.875rem;
        font-weight: 600;
        text-shadow: 0 1px 2px rgb(0 20 60 / 0.8);
        background: linear-gradient(
                180deg,
                rgb(255 255 255 / 0.55) 0%,
                rgb(255 255 255 / 0.16) 48%,
                rgb(255 255 255 / 0.04) 52%,
                rgb(255 255 255 / 0.26) 100%
        );
        box-shadow:
                inset 0 0 0 1px rgb(0 30 80 / 0.35),
                0 1px 2px rgb(0 20 60 / 0.4);
}
.task-btn:hover {
        box-shadow:
                inset 0 0 0 1px rgb(0 30 80 / 0.25),
                0 0 0.75rem rgb(150 225 255 / 0.9);
}
.task-btn[aria-pressed="false"] {
        border-color: rgb(255 255 255 / 0.25);
        background: linear-gradient(
                180deg,
                rgb(255 255 255 / 0.14),
                rgb(255 255 255 / 0.02)
        );
}
.task-btn img {
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
}
.task-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.tray {
        display: flex;
        align-items: center;
        align-self: stretch;
        gap: 0.625rem;
        margin-left: auto;
}
.clock {
        font-size: 0.75rem;
        line-height: 1.2;
        text-align: center;
        text-shadow: 0 1px 2px rgb(0 20 60 / 0.8);
}
.clock span {
        display: block;
}
.show-desktop {
        width: 0.875rem;
        align-self: stretch;
        padding: 0;
        border: 0;
        border-left: 1px solid rgb(255 255 255 / 0.65);
        background: linear-gradient(
                90deg,
                rgb(255 255 255 / 0.4),
                rgb(255 255 255 / 0.08)
        );
}
.show-desktop:hover {
        background: linear-gradient(
                90deg,
                rgb(255 255 255 / 0.7),
                rgb(160 225 255 / 0.4)
        );
}

/* ------------------------------------------------------------------ */
/* Small screens: let the page scroll normally                         */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
        body {
                height: auto;
                min-height: 100dvh;
                overflow: auto;
        }
        .desktop {
                position: fixed;
        }
        .window {
                max-height: none;
        }
        .window-content {
                overflow: visible;
        }
        .sh-nav {
                position: sticky;
                top: 0;
        }
        .sh-body {
                flex-direction: column;
                align-items: stretch;
        }
        .col-left {
                width: 100%;
        }
        .sh-right {
                align-items: flex-start;
                width: 100%;
        }
        .sh-account {
                justify-content: flex-start;
        }
}

@media (max-width: 700px) {
        body {
                padding: 0.5rem 0.5rem calc(var(--taskbar-h) + 0.5rem);
        }
        .gif-tl,
        .gif-tr,
        .gif-br,
        .nav-ghosts,
        .nav-sep {
                display: none;
        }
        .sh-search,
        .sh-search-container {
                width: 100%;
        }
        .sh-search-container input {
                flex: 1;
                width: auto;
        }
        .thumbs {
                justify-content: center;
        }
        .about-gif {
                right: -0.5rem;
                width: 6rem;
        }
        .task-btn {
                max-width: 9rem;
        }
}

@media (max-width: 420px) {
        .profile-top {
                flex-direction: column;
        }
        .profile-media {
                width: 100%;
                max-width: 16rem;
        }
        .rec-item img {
                width: 4.5rem;
                height: 4.5rem;
        }
        .comment-pfp {
                width: 3.25rem;
                height: 3.25rem;
        }
        .clock span:first-child {
                font-weight: 600;
        }
}

@media (prefers-reduced-motion: reduce) {
        .bubbles span {
                animation: none;
                bottom: var(--y);
        }
        .window[data-restored] {
                animation: none;
        }
}