:root {
    --checker-light: #4cba6e;
    --checker-dark: #2e9a52;
    --card-bg: #8b7fff;
    --card-shadow: #5a4ecc;
    --card-glow: rgba(180, 160, 255, 0.6);
    --card-letter: #c4b8ff;
    --card-w: clamp(90px, 12vw, 150px);
    --card-h: clamp(120px, 16vw, 200px);
    --card-avatar: clamp(56px, 7vw, 96px);
    --card-emoji: clamp(32px, 4vw, 54px);
    --card-font: clamp(9px, 1.1vw, 12.5px);
    --card-gap: clamp(8px, 1.5vw, 20px);
    --card-corner-f: clamp(9px, 1vw, 13px);
    --card-radius: clamp(10px, 1.5vw, 18px);
    --card-pb: clamp(8px, 1.2vw, 16px);
    --font-corners: "Cambria";
    --font-card: "Broadway";
}

#home-body {
    /* keep the background pinned so the motion layers feel glued to the page */
    overflow-x: hidden;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 80% 60% at 15% 10%, rgba(60, 30, 120, .55) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 85% 80%, rgba(20, 10, 80, .6) 0%, transparent 65%),
        radial-gradient(ellipse 100% 80% at 50% 50%, rgba(8, 6, 28, 1) 0%, #06061A 100%);
    background-attachment: fixed
}

#home-body::before {
    /* a little glassy sweep across the whole scene */
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(115deg,
            transparent 30%,
            rgba(100, 80, 200, .04) 45%,
            rgba(160, 120, 255, .07) 50%,
            rgba(100, 80, 200, .04) 55%,
            transparent 70%)
}

#starfield-canvas {
    /* star dots live here */
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1
}

.shooter {
    /* one tiny dot that becomes a streak via animation */
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    z-index: 1;
    opacity: 0
}

.shooter::after {
    /* the tail */
    content: '';
    position: absolute;
    right: 2px;
    top: 0;
    width: 80px;
    height: 1px;
    background: linear-gradient(to left, rgba(255, 255, 255, .8), transparent);
    transform-origin: right center
}

@keyframes shoot {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(30deg)
    }

    5% {
        opacity: 1
    }

    60% {
        opacity: .6
    }

    100% {
        opacity: 0;
        transform: translate(340px, 200px) rotate(30deg)
    }
}

@keyframes twinkle4 {
    from {
        opacity: .25;
        transform: scale(.85) rotate(0deg)
    }

    to {
        opacity: 1;
        transform: scale(1.15) rotate(15deg)
    }
}

.panel-wrap {
    /* glowing frame */
    position: relative;
    box-shadow:
        0 0 0 1px #6A6ADF,
        0 0 40px rgba(106, 106, 223, .2),
        0 0 80px rgba(80, 60, 180, .1),
        inset 0 0 60px rgba(50, 30, 120, .12)
}

.panel-wrap::before,
.panel-wrap::after,
.brk-tr,
.brk-bl {
    /* little corner brackets */
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #8888ff;
    pointer-events: none
}

.panel-wrap::before {
    top: 8px;
    left: 8px;
    border-width: 2px 0 0 2px;
    border-radius: 10px 0 0 0
}

.panel-wrap::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 2px 2px 0;
    border-radius: 0 0 10px 0
}

.brk-tr {
    top: 8px;
    right: 8px;
    border-width: 2px 2px 0 0;
    border-radius: 0 10px 0 0
}

.brk-bl {
    bottom: 8px;
    left: 8px;
    border-width: 0 0 2px 2px;
    border-radius: 0 0 0 10px
}

.red-rect {
    /* decorative anchors */
    position: absolute;
    background: none;
    pointer-events: none;
    z-index: 20;
    width: clamp(48px, 14vw, 120px);
    height: clamp(28px, 8vw, 68px)
}

.red-rect-tl {
    top: 0;
    left: 20%;
    transform: translate(-50%, -50%);
    border-radius: 6px
}

.red-rect-br {
    bottom: 0;
    right: 20%;
    transform: translate(50%, 50%);
    border-radius: 6px
}

.starbtn {
    /* primary pill buttons */
    position: relative;
    display: block;
    width: 100%;
    overflow: visible;
    text-align: center;
    text-decoration: none;
    border: none;
    outline: none;
    border-radius: 999px;
    padding: .65rem 1.5rem;
    background: linear-gradient(180deg, #c4c0ff 0%, #9a96ff 40%, #7a76e8 100%);
    box-shadow:
        0 0 0 1.5px rgba(220, 218, 255, .5),
        0 0 12px rgba(154, 150, 255, .5),
        0 0 28px rgba(120, 100, 255, .25),
        inset 0 2px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 0 rgba(40, 20, 100, .3);
    color: #FFF8CA;
    font-weight: 700;
    letter-spacing: .18em;
    text-shadow: 0 1px 0 rgba(40, 20, 100, .5), 0 0 14px rgba(255, 240, 160, .6);
    transition: transform .15s, filter .15s;
    animation: btnPulse var(--bp-dur, 4s) var(--bp-del, 0s) ease-in-out infinite;
    cursor: pointer
}

.starbtn:hover,
.starbtn:focus {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.1);
    box-shadow:
        0 0 0 1.5px rgba(220, 218, 255, .7),
        0 0 18px rgba(154, 150, 255, .7),
        0 0 40px rgba(120, 100, 255, .4),
        inset 0 2px 0 rgba(255, 255, 255, .4),
        inset 0 -2px 0 rgba(40, 20, 100, .3)
}

.starbtn:active {
    transform: translateY(1px) scale(.985);
    filter: brightness(.94)
}

@keyframes btnPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 1.5px rgba(220, 218, 255, .5),
            0 0 12px rgba(154, 150, 255, .5),
            0 0 28px rgba(120, 100, 255, .25),
            inset 0 2px 0 rgba(255, 255, 255, .35),
            inset 0 -2px 0 rgba(40, 20, 100, .3);
        filter: brightness(1)
    }

    50% {
        box-shadow:
            0 0 0 1.5px rgba(220, 218, 255, .7),
            0 0 18px rgba(154, 150, 255, .65),
            0 0 40px rgba(120, 100, 255, .38),
            inset 0 2px 0 rgba(255, 255, 255, .35),
            inset 0 -2px 0 rgba(40, 20, 100, .3);
        filter: brightness(1.06)
    }
}

.btn-text {
    /* tiny pulse so the label feels alive */
    animation: btnTextPulse var(--bp-dur, 4s) var(--bp-del, 0s) ease-in-out infinite
}

@keyframes btnTextPulse {

    0%,
    100% {
        opacity: .82
    }

    50% {
        opacity: 1
    }
}

.sp {
    /* spark glyphs around buttons */
    position: absolute;
    pointer-events: none;
    font-size: .7rem;
    line-height: 1;
    color: #FFF8CA;
    opacity: 0;
    animation: sparkpop var(--sp-dur, 2.2s) var(--sp-del, 0s) ease-in-out infinite;
    text-shadow: 0 0 6px rgba(255, 240, 140, .9);
    user-select: none
}

@keyframes sparkpop {

    0%,
    100% {
        opacity: 0;
        transform: scale(.5) rotate(0deg)
    }

    40%,
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(20deg)
    }
}

.bio-glow {
    /* soft text bloom */
    text-shadow: 0 0 10px rgba(160, 150, 255, .45)
}

.avatar-glow {
    /* floaty avatar */
    box-shadow: 0 0 0 2px rgba(180, 170, 255, .3), 0 0 24px rgba(140, 100, 255, .5);
    animation: float 6s ease-in-out infinite
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

.soc-label {
    /* label shimmer */
    animation: socLabelPulse var(--lbl-dur, 3s) var(--lbl-del, 0s) ease-in-out infinite;
    transition: transform .2s ease
}

.soc-wrap:hover .soc-label,
.soc-wrap:focus .soc-label {
    transform: translateY(-3px)
}

@keyframes socLabelPulse {

    0%,
    100% {
        opacity: .5;
        text-shadow: none
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 8px rgba(184, 182, 234, .8)
    }
}

.soc {
    /* icon button base */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    background: rgba(110, 100, 220, .18);
    border: 1px solid rgba(184, 182, 234, .3);
    position: relative;
    transition: background .2s, transform .15s
}

@media (min-width:640px) {
    .soc {
        width: 2.5rem;
        height: 2.5rem
    }
}

.soc svg {
    width: 1rem;
    height: 1rem;
    fill: #B8B6EA;
    transition: opacity .2s
}

.soc:hover,
.soc:focus {
    background: rgba(120, 110, 200, .28);
    transform: translateY(-2px)
}

.soc:hover svg,
.soc:focus svg {
    opacity: .75
}

.soc .corner {
    /* corner accents are injected at runtime */
    position: absolute;
    width: 7px;
    height: 7px;
    border-style: solid;
    border-width: 0;
    border-color: rgba(184, 182, 234, 0);
    transition: border-color .2s, opacity .2s;
    pointer-events: none;
    opacity: 0
}

.soc:hover .corner,
.soc:focus .corner {
    border-color: rgba(200, 196, 255, .85);
    opacity: 1
}

.soc .corner.tl {
    top: -3px;
    left: -3px;
    border-width: 1.5px 0 0 1.5px;
    border-top-left-radius: 8px
}

.soc .corner.tr {
    top: -3px;
    right: -3px;
    border-width: 1.5px 1.5px 0 0;
    border-top-right-radius: 8px
}

.soc .corner.bl {
    bottom: -3px;
    left: -3px;
    border-width: 0 0 1.5px 1.5px;
    border-bottom-left-radius: 8px
}

.soc .corner.br {
    bottom: -3px;
    right: -3px;
    border-width: 0 1.5px 1.5px 0;
    border-bottom-right-radius: 8px
}

.bd1 {
    animation-delay: .08s
}

.bd2 {
    animation-delay: .16s
}

.bd3 {
    animation-delay: .24s
}

.bd4 {
    animation-delay: .32s
}

.bd5 {
    animation-delay: .4s
}

#stage-gate {
    /* full-screen modal shell */
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden
}

#stage-gate.open,
#stage-gate.closing {
    pointer-events: auto;
    visibility: visible
}

.modal-backdrop {
    /* dim + blur behind the modal */
    position: absolute;
    inset: 0;
    background: rgba(4, 2, 20, .55);
    backdrop-filter: blur(4px)
}

.modal-panel {
    /* centered and animated in */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(46px);
    transition: transform 520ms cubic-bezier(.2, 1, .3, 1);
    outline: none
}

#stage-gate.open .modal-panel {
    transform: translateY(0)
}

#stage-gate.closing .modal-panel {
    transform: translateY(46px)
}

.modal-panel {
    pointer-events: none;
}

.modal-panel>* {
    pointer-events: auto;
}

.modal-grid-wrap {
    /* grid of square actions */
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 0;
    background: transparent
}

.modal-sq-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px
}

.modal-sq {
    /* square action button */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    background: linear-gradient(145deg, #7c6fd4 0%, #5b4fb8 100%);
    border: 1px solid rgba(184, 182, 234, .4);
    box-shadow: 0 0 16px rgba(106, 106, 223, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
    position: relative;
    transition: background .2s, transform .15s;
    text-decoration: none;
    font-size: 1.75rem;
    cursor: pointer
}

.modal-sq:hover,
.modal-sq:focus {
    background: linear-gradient(145deg, #9080e0 0%, #6f5fcc 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(130, 110, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .2)
}

.modal-sq:active {
    transform: translateY(1px) scale(.97)
}

.modal-sq .corner {
    /* corner accents on hover */
    position: absolute;
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 0;
    border-color: rgba(184, 182, 234, 0);
    transition: border-color .2s, opacity .2s;
    pointer-events: none;
    opacity: 0
}

.modal-sq:hover .corner,
.modal-sq:focus .corner {
    border-color: rgba(200, 196, 255, .85);
    opacity: 1
}

.modal-sq .corner.tl {
    top: -3px;
    left: -3px;
    border-width: 1.5px 0 0 1.5px;
    border-top-left-radius: 10px
}

.modal-sq .corner.tr {
    top: -3px;
    right: -3px;
    border-width: 1.5px 1.5px 0 0;
    border-top-right-radius: 10px
}

.modal-sq .corner.bl {
    bottom: -3px;
    left: -3px;
    border-width: 0 0 1.5px 1.5px;
    border-bottom-left-radius: 10px
}

.modal-sq .corner.br {
    bottom: -3px;
    right: -3px;
    border-width: 0 1.5px 1.5px 0;
    border-bottom-right-radius: 10px
}

.modal-close {
    /* close control */
    top: .55rem;
    left: .55rem;
    width: 1.85rem;
    height: 1.85rem;
    z-index: 10;
    transform: rotate(45deg);
    transition: transform .25s ease;
    transform-origin: center;
    position: absolute;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer
}

.modal-close:hover,
.modal-close:focus {
    transform: rotate(136deg)
}

.modal-close:hover svg,
.modal-close:focus svg {
    filter: drop-shadow(0 0 4px rgba(184, 182, 234, .6))
}

.modal-close svg {
    width: 1.85rem;
    height: 1.85rem;
    display: block
}

/* @media (prefers-reduced-motion: reduce) {
    .modal-panel { transition: none }
} */

.starbtn {
    /* enable subtitle slide-in without affecting layout */
    position: relative;
    /* overflow: hidden; */
}

.starbtn .btn-text {
    display: inline-block;
    position: relative;
    z-index: 2;
    transition: transform .16s ease;
}

.starbtn .btn-sub {
    position: absolute;
    left: 50%;
    bottom: .38rem;
    transform: translateX(-50%) translateY(6px);
    z-index: 2;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: .62rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(40, 20, 100, .5), 0 0 14px rgba(255, 240, 160, .45);
}

.starbtn:hover .btn-sub,
.starbtn:focus-visible .btn-sub {
    opacity: .95;
    transform: translateX(-50%) translateY(0);
}

.starbtn:hover .btn-text,
.starbtn:focus-visible .btn-text {
    transform: translateY(-6px);
}

#garden-root {
    font-family: "IBM Plex Mono", "monospace";
    /* font-family: "Comic Sans MS"; */
}

.card-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300vmax;
    height: 300vmax;
    translate: -50% -50%;
    z-index: 0;
    pointer-events: none;
    background-image: url("https://berry.lillie.garden/imgs/grid.png");
    background-size: 160px 160px;
    animation: cardBgScroll 5s linear infinite;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-overflow-style: none;
    user-select: none;
    -webkit-user-select: none;
}

@keyframes cardBgScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 160px 160px;
    }
}

.card-track-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right,
            transparent 0%,
            transparent 5%,
            black 28%,
            black 72%,
            transparent 95%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            transparent 5%,
            black 28%,
            black 72%,
            transparent 95%,
            transparent 100%);
}

.card-track::-webkit-scrollbar {
    display: none;
}

.card {
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: center;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow:
        0 6px 0 var(--card-shadow),
        0 0 0 7px rgba(255, 255, 255, 0.15) inset,
        0 0 30px var(--card-glow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: var(--card-pb);
    cursor: pointer;
    user-select: none;
    transition:
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.22s ease;
    animation: cardFloatIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    font-family: var(--font-card), "Times New Roman", serif;
}

.card.bd1 {
    animation-delay: 0.05s
}

.card.bd2 {
    animation-delay: 0.15s
}

.card.bd3 {
    animation-delay: 0.25s
}

.card.bd4 {
    animation-delay: 0.35s
}

.card.bd5 {
    animation-delay: 0.45s
}

@keyframes cardFloatIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.85);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.card:hover {
    transform: translateY(-16px) scale(1.08);
    box-shadow:
        0 24px 0 var(--card-shadow),
        0 0 0 7px rgba(255, 255, 255, 0.28) inset,
        0 12px 48px rgba(139, 127, 255, 0.55),
        0 0 80px rgba(180, 160, 255, 0.25);
    z-index: 10;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 50%,
            rgba(255, 255, 255, 0.06) 100%);
    pointer-events: none;
}

.card-corner {
    position: absolute;
    font-size: var(--card-corner-f);
    font-weight: 900;
    font-family: var(--font-corners), "Times New Roman", serif;
    color: var(--card-letter);
    line-height: 1;
}

.card-corner.tl {
    top: clamp(6px, 1vw, 10px);
    left: clamp(8px, 1.2vw, 12px);
}

.card-corner.br {
    bottom: clamp(6px, 1vw, 10px);
    right: clamp(8px, 1.2vw, 12px);
    transform: rotate(180deg);
}

.card-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--card-gap);
    overflow-x: scroll;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: clamp(20px, 4vw, 48px) 50%;
    width: 100%;
    scrollbar-width: none;
}

.card-avatar {
    width: calc(var(--card-avatar) * 1.35);
    height: calc(var(--card-avatar) * 1.35);
    border-radius: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(4px, 0.8vw, 8px);
    overflow: visible;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0px 0px 0px rgba(34, 34, 34, 0));
    -webkit-filter: drop-shadow(0px 0px 0px rgba(34, 34, 34, 0));
    transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.card:hover .card-avatar img {
    filter: drop-shadow(0 10px 0px var(--card-shadow));
    -webkit-filter: drop-shadow(0 10px 0px var(--card-shadow));
}

.card:hover .card-avatar {
    transform: translateY(-4px) scale(1.1);
}

.card-name {
    font-size: var(--card-font);
    font-weight: 200;
    color: #fff;
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 0px rgb(60, 52, 127);
    padding: 0 4px;
    word-break: break-word;
}

.card-scrollbar-wrap {
    position: relative;
    width: clamp(200px, 60vw, 560px);
    height: 8px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
    cursor: pointer;
}

.card-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(40px, 8vw, 80px);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #9b8fff, #c0b4ff);
    cursor: grab;
    box-shadow: 0 0 8px rgba(180, 160, 255, 0.5);
    will-change: transform;
    transform: translateX(var(--thumb-x, 0px));
    transition: transform 0.06s linear;
}

.card-scrollbar-thumb:active {
    cursor: grabbing;
}

.card-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(4, 2, 20, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.card-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.card-modal-panel {
    position: relative;
    background: rgba(18, 14, 48, 0.92);
    border: 1px solid rgba(139, 127, 255, 0.35);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: min(480px, 88vw);
    width: 100%;
    box-shadow:
        0 0 0 1px rgba(139, 127, 255, 0.15),
        0 0 60px rgba(106, 106, 223, 0.2),
        0 24px 48px rgba(0, 0, 0, 0.6);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-modal-backdrop.open .card-modal-panel {
    transform: translateY(0) scale(1);
}

.card-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(139, 127, 255, 0.35);
    background: rgba(139, 127, 255, 0.12);
    color: rgba(196, 184, 255, 0.8);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.card-modal-close:hover {
    background: rgba(139, 127, 255, 0.28);
    color: #fff;
}

.card-modal-text {
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(12px, 1.4vw, 14px);
    line-height: 1.75;
    color: rgba(220, 215, 255, 0.82);
    margin: 0;
}