@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700;800&display=swap");

:root {
    --bg: #f7f9fc;
    --text: #0b1220;
    --muted: rgba(11, 18, 32, .55);
    --line: rgba(11, 18, 32, .14);

    --dc: #4a0f1a;
    --ops: #bfa14a;

    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --logo: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.6 var(--mono);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.canvas {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: max(18px, env(safe-area-inset-top));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
}

.edge {
    position: absolute;
    font-size: 12px;
    letter-spacing: .4px;
    display: flex;
    gap: 8px;
    user-select: none;
}

.edge-top { top: 20px; left: 24px; }
.edge-bottom { bottom: 20px; right: 24px; }

.edge-left {
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.edge-right {
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

.edge-top-right {
    top: 16px;
    right: 18px;
}

.muted { color: var(--muted); }
.credit { color: var(--text); }

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 10px 0;
}

.mark {
    position: relative;
    padding: 24px 30px;
}

.logo {
    font-family: var(--logo);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.name { display: inline-flex; }

.dc {
    color: var(--dc);
}

.ops {
    background: linear-gradient(
            180deg,
            #eddc9a 0%,
            #d4bb63 30%,
            #bfa14a 52%,
            #a48732 72%,
            #8a6f24 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    text-shadow:
            0 0 0.4px rgba(230, 200, 120, .55),
            0 1px 1px rgba(120, 95, 30, .25);
}

.corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: var(--line);
    border-style: solid;
    border-width: 0;
    border-radius: 6px;
}

.corner.tl {
    top: 0;
    left: 0;
    border-top-width: 2px;
    border-left-width: 2px;
}

.corner.br {
    bottom: 0;
    right: 0;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.gangdevLink {
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
}

.gangdevLink:hover {
    text-decoration: underline;
}

.sub {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .6px;
}

/* Button */
.accountBtn {
    position: relative;
    overflow: hidden;
    margin-top: 10px;

    padding: 11px 18px;
    border-radius: 14px;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .90),
            rgba(245, 246, 248, .92)
    );

    color: var(--text);
    text-decoration: none;

    font: 13px/1 var(--mono);
    letter-spacing: .6px;

    border: 1px solid rgba(74, 15, 26, .35);

    box-shadow:
            0 10px 28px rgba(11, 18, 32, .18),
            0 1px 0 rgba(255, 255, 255, .9) inset;

    transition:
            transform .08s ease,
            box-shadow .15s ease,
            background .15s ease;
}

/* Keep long names from wrecking the layout */
.accountBtn {
    max-width: min(420px, 92vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subtle gold underline + shimmer */
.accountBtn::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 6px;
    height: 1px;

    background: linear-gradient(
            90deg,
            transparent,
            var(--ops),
            transparent
    );

    opacity: .18;
    transform: scaleX(.75);
    transition:
            opacity .18s ease,
            transform .22s ease;
}

.accountBtn::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -30%;
    width: 60%;
    height: 180%;
    transform: rotate(18deg) translateX(-30%);
    background: linear-gradient(
            90deg,
            transparent,
            rgba(191, 161, 74, .22),
            transparent
    );
    opacity: 0;
    transition: opacity .18s ease, transform .45s ease;
    pointer-events: none;
}

.accountBtn:hover {
    transform: translateY(-1px);

    box-shadow:
            0 16px 40px rgba(11, 18, 32, .28),
            0 0 0 3px rgba(191, 161, 74, .12),
            0 1px 0 rgba(255, 255, 255, 1) inset;
}

.accountBtn:hover::after {
    opacity: .55;
    transform: scaleX(1);
}

.accountBtn:hover::before {
    opacity: 1;
    transform: rotate(18deg) translateX(155%);
}

.accountBtn:active {
    transform: translateY(0);
}

/* Mobile polish */
@media (max-width: 560px) {
    .logo {
        font-size: 40px;
        letter-spacing: 1px;
    }

    .mark {
        padding: 22px 24px;
    }

    .edge-top { top: 14px; left: 16px; }
    .edge-bottom { bottom: 14px; right: 16px; }
    .edge-left { left: 10px; }
    .edge-right { right: 10px; }
    .edge-top-right { top: 12px; right: 12px; }

    .accountBtn {
        width: min(340px, 92vw);
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .accountBtn,
    .accountBtn::after,
    .accountBtn::before {
        transition: none;
    }
}