:root {
    --background: #03070b;
    --panel: #081017;
    --panel-light: #101a23;

    --text: #f5f5ef;
    --muted: #9ba8b4;

    --gold: #ffc72c;
    --orange: #ef7622;
    --orange-dark: #bd3f0e;

    --cyan: #29d3ff;
    --violet: #bc70ff;

    --border:
        rgba(255, 255, 255, 0.16);

    /* Sync with CONNECTION_DRAW_DURATION in treeManager.js */
    --tree-draw-ms: 1800ms;
}


* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    color: var(--text);
    background: var(--background);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


button,
input {
    font: inherit;
}


button {
    color: inherit;
}


.screen {
    position: fixed;

    inset: 0;

    display: none;

    overflow: hidden;
}


.screen.active {
    display: block;
}


.hidden {
    display: none !important;
}


/* =========================================================
   BOOT SCREEN — Arcade teaser (passt zum Title-Slam)
   ========================================================= */

#boot-screen {
    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(255, 199, 44, 0.16),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(239, 118, 34, 0.32),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #1a0a28 0%,
            #0a1628 38%,
            #061018 70%,
            #1a0e08 100%
        );
}


.boot-background {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.12) 3px,
            rgba(0, 0, 0, 0.12) 4px
        ),
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 80, 60, 0.1),
            transparent 26%
        );
}


.boot-content {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    z-index: 1;
}


.boot-brand {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    margin-bottom: 12px;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: clamp(42px, 7vw, 72px);
    letter-spacing: -0.04em;
    line-height: 0.85;
}


.boot-brand-nine,
.boot-brand-innings {
    display: inline-block;
}


.boot-brand-nine {
    color: #ff3b2f;
    -webkit-text-stroke: 4px #1a1510;
    paint-order: stroke fill;
    text-shadow:
        0 4px 0 #8b1208,
        3px 5px 0 #1a1510;
    transform: rotate(-5deg);
}


.boot-brand-innings {
    color: #ffc72c;
    -webkit-text-stroke: 4px #1a1510;
    paint-order: stroke fill;
    text-shadow:
        0 4px 0 #9a6a00,
        3px 5px 0 #1a1510;
    transform: rotate(2deg);
}


.boot-kicker {
    margin: 0 0 36px;

    color: #ffe35b;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 14px;
    letter-spacing: 5px;
    text-shadow: 2px 2px 0 #1a1510;
}


.boot-kicker span {
    color: #ff5a3c;
}


.start-game-button {
    min-width: 300px;
    padding: 20px 44px;

    color: #101010;
    background: #ffc72c;

    border: 4px solid #fff8d6;
    border-radius: 4px;

    box-shadow:
        0 0 0 4px #1a1510,
        0 8px 0 #9a6a00,
        0 18px 42px rgba(0, 0, 0, 0.55);

    cursor: pointer;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 28px;
    letter-spacing: 3px;

    animation: bootButtonPulse 1.35s ease-in-out infinite;

    transition:
        transform 120ms ease,
        filter 120ms ease;
}


.start-game-button:hover {
    filter: brightness(1.12);
    transform: translateY(-3px);
    animation: none;
}


.start-game-button:active {
    transform: translateY(5px);
    box-shadow:
        0 0 0 4px #1a1510,
        0 3px 0 #9a6a00,
        0 10px 28px rgba(0, 0, 0, 0.55);
    animation: none;
}


.start-game-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
    animation: none;
    filter: grayscale(0.15);
}


.boot-loading {
    width: min(320px, 78vw);
    margin-top: 22px;
    text-align: center;
}


.boot-loading.hidden {
    display: none;
}


.boot-loading-label {
    margin-bottom: 10px;

    color: #ffc72c;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 15px;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #1a1510;
}


.boot-loading-bar {
    height: 14px;
    padding: 2px;

    border: 3px solid #1a1510;
    border-radius: 4px;
    background:
        linear-gradient(
            180deg,
            #1a1510 0%,
            #2a2230 100%
        );
    box-shadow:
        0 0 0 2px rgba(255, 199, 44, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.35);
}


.boot-loading-fill {
    width: 0%;
    height: 100%;

    border-radius: 2px;
    background:
        linear-gradient(
            90deg,
            #ef7622 0%,
            #ffc72c 55%,
            #ffe566 100%
        );
    box-shadow:
        0 0 12px rgba(255, 199, 44, 0.55);

    transition: width 120ms linear;
}


.boot-loading-status {
    margin-top: 10px;

    color: #f5f5ef;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #1a1510;

    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.boot-server-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    width: min(280px, 86vw);
    margin: 18px auto 0;
    padding: 10px 12px;

    color: #ff6b4a;
    border: 3px dashed rgba(255, 90, 60, 0.85);
    border-radius: 4px;
    background: rgba(40, 12, 10, 0.35);

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    text-align: center;
    text-transform: uppercase;

    transform: rotate(-2.5deg);
    box-shadow:
        inset 0 0 0 1px rgba(255, 120, 80, 0.25);
}


.boot-server-stamp-title {
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 1.1;
    text-shadow: 1px 1px 0 #1a1510;
}


.boot-server-stamp-body {
    color: rgba(255, 190, 170, 0.92);
    font-size: 11px;
    letter-spacing: 0.6px;
    line-height: 1.35;
    text-shadow: 1px 1px 0 #1a1510;
}


.boot-audio-note {
    margin: 22px 0 0;

    color: #9ba8b4;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #1a1510;
}


@keyframes bootButtonPulse {
    0%,
    100% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.1);
        transform: scale(1.04);
    }
}


/* =========================================================
   TITLE SCREEN — 90s Arcade / Bubsy-Slam
   ========================================================= */

#title-screen {
    cursor: pointer;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(255, 199, 44, 0.18),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(239, 118, 34, 0.35),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #1a0a28 0%,
            #0a1628 38%,
            #061018 70%,
            #1a0e08 100%
        );
}


.title-background {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0, 0, 0, 0.12) 3px,
            rgba(0, 0, 0, 0.12) 4px
        ),
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 80, 60, 0.12),
            transparent 28%
        );
}


.title-content {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px;
    text-align: center;
}


.title-kicker {
    color: #ffe35b;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 6px;
    text-shadow:
        2px 2px 0 #1a1510,
        -1px 0 0 #1a1510,
        0 -1px 0 #1a1510;

    opacity: 0;
}

.title-kicker span {
    color: #ff5a3c;
}


.game-logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.02em;

    margin: 18px 0 0;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: clamp(72px, 11vw, 148px);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 0.85;

    transform-origin: 50% 80%;
}


.logo-nine,
.logo-innings {
    display: inline-block;
    transform-origin: 50% 100%;
}


.logo-nine {
    color: #ff3b2f;
    -webkit-text-stroke: 5px #1a1510;
    paint-order: stroke fill;
    text-shadow:
        0 6px 0 #8b1208,
        4px 8px 0 #1a1510,
        0 16px 28px rgba(0, 0, 0, 0.55);
    --logo-tilt: -6deg;
}


.logo-innings {
    color: #ffc72c;
    -webkit-text-stroke: 5px #1a1510;
    paint-order: stroke fill;
    text-shadow:
        0 6px 0 #9a6a00,
        4px 8px 0 #1a1510,
        0 16px 28px rgba(0, 0, 0, 0.55);
    --logo-tilt: 2deg;
}


.title-diamond {
    position: relative;

    width: 36px;
    height: 36px;
    margin-top: 42px;

    opacity: 0;
    transform-origin: 50% 50%;
}


.title-diamond-core {
    position: absolute;
    inset: 0;

    background: #ffc72c;
    border: 4px solid #fff8d6;
    box-shadow:
        0 0 0 3px #1a1510,
        0 8px 0 #9a6a00,
        0 0 24px rgba(255, 199, 44, 0.9);

    transform: rotate(45deg);
}


.title-diamond-flash {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.85),
        transparent 65%
    );
    opacity: 0;
    pointer-events: none;
}


.title-information {
    width: min(660px, calc(100vw - 40px));
    margin-top: 44px;
    opacity: 0;
}


.title-version {
    margin: 0;
    color: #ffc72c;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-shadow: 2px 2px 0 #1a1510;
}


.title-author {
    margin: 14px 0 0;
    color: #9ba8b4;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}


.title-description {
    margin: 28px auto 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1.7;
}


.enter-game-button {
    min-width: 280px;
    margin-top: 28px;
    padding: 16px 32px;

    color: #101010;
    background: #ffc72c;
    border: 3px solid #fff8d6;
    border-radius: 4px;
    box-shadow:
        0 0 0 3px #1a1510,
        0 6px 0 #9a6a00;

    cursor: pointer;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0;
}


.enter-game-button:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}


.press-enter {
    margin-top: 40px;
    color: #ffe35b;
    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    text-shadow: 2px 2px 0 #1a1510;
    opacity: 0;

    animation: none;
}


/* --- Enter animations --- */

.title-animated .title-kicker {
    animation: titleKickerSlam 550ms 80ms ease-out both;
}


.title-animated .logo-nine {
    animation: titleLogoSlam 900ms 180ms cubic-bezier(0.15, 1.5, 0.25, 1) both;
}


.title-animated .logo-innings {
    animation: titleLogoSlam 900ms 280ms cubic-bezier(0.15, 1.5, 0.25, 1) both;
}


.title-animated .title-diamond {
    animation: titleDiamondSlam 780ms 720ms cubic-bezier(0.12, 1.6, 0.3, 1) both;
}


.title-animated .title-diamond-flash {
    animation: titleDiamondFlash 520ms 880ms ease-out both;
}


.title-animated .title-information,
.title-animated .enter-game-button {
    animation: titleDetailsEnter 600ms 1100ms ease-out both;
}


.title-animated .press-enter {
    animation:
        titleDetailsEnter 600ms 1100ms ease-out both,
        pressEnterPulse 1.2s 1700ms ease-in-out infinite;
}


@keyframes titleKickerSlam {
    0% {
        opacity: 0;
        transform: translateY(-40px) scale(1.4);
    }

    60% {
        opacity: 1;
        transform: translateY(4px) scale(0.92, 1.12);
    }

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


@keyframes titleLogoSlam {
    0% {
        opacity: 0;
        transform:
            translateY(-55vh)
            scale(2.8, 2.8)
            rotate(var(--logo-tilt, 0deg));
        filter: brightness(2);
    }

    48% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1.35, 0.45)
            rotate(var(--logo-tilt, 0deg));
        filter: brightness(1.2);
    }

    62% {
        transform:
            translateY(-18px)
            scale(0.78, 1.35)
            rotate(var(--logo-tilt, 0deg));
        filter: brightness(1);
    }

    78% {
        transform:
            translateY(4px)
            scale(1.12, 0.88)
            rotate(var(--logo-tilt, 0deg));
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(var(--logo-tilt, 0deg));
        filter: brightness(1);
    }
}


@keyframes titleDiamondSlam {
    0% {
        opacity: 0;
        transform: scale(0.05) rotate(-160deg);
    }

    55% {
        opacity: 1;
        transform: scale(1.6, 0.5) rotate(12deg);
    }

    72% {
        transform: scale(0.7, 1.45) rotate(-4deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}


@keyframes titleDiamondFlash {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }

    35% {
        opacity: 0.95;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


@keyframes titleDetailsEnter {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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


@keyframes pressEnterPulse {
    0%,
    100% {
        filter: brightness(0.65);
    }

    50% {
        filter: brightness(1.25);
    }
}


/* =========================================================
   TOP BAR
   ========================================================= */

.top-bar {
    position: absolute;

    z-index: 100;

    top: 0;
    left: 0;
    right: 0;

    height: 88px;

    display: flex;
    align-items: center;

    gap: 28px;

    padding: 0 20px;

    background:
        rgba(2, 7, 11, 0.95);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.13);

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.34);
}


.brand-small {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.brand-small strong {
    color: var(--gold);

    font-size: 21px;
    font-weight: 1000;
    letter-spacing: -1px;
}


.brand-small span {
    color: #b1c0cd;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 4px;
}


.resource-bar {
    display: flex;
    align-items: center;

    gap: 10px;
}


.resource-item {
    min-width: 185px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    background:
        rgba(3, 8, 12, 0.82);

    border:
        1px solid var(--border);

    border-radius: 6px;
}


.resource-item > div {
    display: flex;
    flex-direction: column;
}


.resource-label {
    color: #aab8c5;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 2px;
}


.resource-item strong {
    color: white;

    font-size: 21px;
}


.resource-ball {
    width: 25px;
    height: 25px;

    display: inline-block;

    flex: 0 0 auto;

    border-radius: 50%;
}


.tree-stats {
    margin-left: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.tree-stats span {
    color: #aab8c5;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 2px;
}


.tree-stats strong {
    font-size: 22px;
}


/* =========================================================
   TREE VIEWPORT UND HINTERGRUND
   ========================================================= */

#tree-screen {
    background: #03080e;
}


.tree-viewport {
    position: absolute;

    z-index: 1;

    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;

    isolation: isolate;

    overflow: hidden;

    cursor: grab;

    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(18, 42, 78, 0.55) 0%,
            rgba(6, 12, 28, 0.35) 38%,
            transparent 68%
        ),

        radial-gradient(
            ellipse at 20% 80%,
            rgba(48, 20, 72, 0.35),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #02040c 0%,
            #050814 42%,
            #020309 100%
        );
}


.tree-viewport.dragging {
    cursor: grabbing;
}


.tree-background-layer {
    position: absolute;

    inset: -28%;

    pointer-events: none;

    will-change: transform;

    transform-origin: center;

    transform-style: preserve-3d;
}


.tree-background-deep {
    z-index: 1;

    opacity: 1;

    background:
        radial-gradient(
            ellipse at 22% 30%,
            rgba(40, 110, 180, 0.28),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 78% 68%,
            rgba(120, 48, 170, 0.26),
            transparent 44%
        ),

        radial-gradient(
            ellipse at 58% 18%,
            rgba(255, 160, 60, 0.1),
            transparent 36%
        ),

        radial-gradient(
            ellipse at 48% 55%,
            rgba(20, 60, 110, 0.22),
            transparent 55%
        );

    filter: blur(1.5px);

    animation:
        deepNebulaBreathing
        16s ease-in-out
        infinite alternate;
}


.tree-background-deep::before {
    position: absolute;

    inset: 8% 12%;

    content: "";

    background:
        conic-gradient(
            from 200deg at 50% 48%,
            transparent 0deg,
            rgba(60, 160, 255, 0.1) 50deg,
            transparent 110deg,
            transparent 190deg,
            rgba(255, 180, 70, 0.07) 250deg,
            transparent 320deg
        );

    filter: blur(48px);

    animation:
        deepLightRotation
        56s linear infinite;
}


.tree-background-deep::after {
    position: absolute;

    inset: 0;

    content: "";

    background:
        radial-gradient(
            circle at 30% 40%,
            rgba(80, 180, 255, 0.08),
            transparent 18%
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(180, 90, 255, 0.07),
            transparent 16%
        );

    filter: blur(30px);

    animation:
        nebulaDrift
        32s ease-in-out
        infinite alternate;
}


@keyframes deepNebulaBreathing {
    from {
        opacity: 0.78;
        filter:
            blur(2.5px)
            brightness(0.88);
    }

    to {
        opacity: 1;
        filter:
            blur(1px)
            brightness(1.15);
    }
}


@keyframes deepLightRotation {
    to {
        transform: rotate(360deg);
    }
}


@keyframes nebulaDrift {
    from {
        transform: translate(-3%, -2%) scale(1);
        opacity: 0.7;
    }

    to {
        transform: translate(4%, 3%) scale(1.08);
        opacity: 1;
    }
}


.tree-background-middle {
    z-index: 2;

    opacity: 0.95;

    background:
        radial-gradient(
            ellipse at 40% 50%,
            rgba(30, 90, 150, 0.12),
            transparent 50%
        ),
        radial-gradient(
            ellipse at 65% 35%,
            rgba(100, 40, 140, 0.1),
            transparent 40%
        );
}


.tree-background-middle::before {
    position: absolute;

    width: 900px;
    height: 900px;

    left: 48%;
    top: 46%;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(50, 140, 220, 0.07),
            transparent 62%
        );

    transform: translate(-50%, -50%);

    filter: blur(24px);

    animation:
        backgroundDiamondFloat
        18s ease-in-out
        infinite alternate;
}


.tree-background-middle::after {
    display: none;
}


@keyframes backgroundDiamondFloat {
    from {
        transform:
            translate(-50%, -50%)
            scale(0.92);
        opacity: 0.55;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.12);
        opacity: 0.95;
    }
}


.tree-background-front {
    z-index: 3;

    opacity: 1;

    background:
        radial-gradient(
            ellipse at 25% 70%,
            rgba(255, 200, 80, 0.05),
            transparent 30%
        );
}


.tree-background-front::before {
    position: absolute;

    width: 520px;
    height: 520px;

    left: 16%;
    top: 20%;

    content: "";

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(90, 200, 255, 0.1),
            transparent 68%
        );

    filter: blur(22px);

    animation:
        wanderingTreeLight
        22s ease-in-out
        infinite alternate;
}


@keyframes wanderingTreeLight {
    0% {
        transform:
            translate(-100px, -40px)
            scale(0.8);
        opacity: 0.45;
    }

    45% {
        transform:
            translate(420px, 180px)
            scale(1.25);
        opacity: 0.9;
    }

    100% {
        transform:
            translate(820px, 40px)
            scale(0.95);
        opacity: 0.55;
    }
}


.tree-starfield {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 2px;

    margin: -1px 0 0 -1px;

    border-radius: 50%;

    background: transparent;

    pointer-events: none;
}


.tree-starfield.is-twinkling {
    animation:
        starTwinkle
        4.5s ease-in-out
        infinite alternate;
}


@keyframes starTwinkle {
    from {
        opacity: 0.55;
        filter: brightness(0.85);
    }

    to {
        opacity: 1;
        filter: brightness(1.35);
    }
}


.tree-shooting-stars {
    z-index: 4;

    overflow: hidden;
}


.tree-shooting-star {
    position: absolute;

    width: 110px;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(200, 240, 255, 0.95) 55%,
            #ffffff 100%
        );

    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.85),
        0 0 18px rgba(120, 200, 255, 0.55);

    transform-origin: right center;

    animation:
        shootingStarFly
        var(--shoot-duration, 900ms)
        cubic-bezier(0.15, 0.75, 0.25, 1)
        forwards;

    pointer-events: none;
}


.tree-shooting-star::after {
    position: absolute;

    right: -2px;
    top: 50%;

    width: 6px;
    height: 6px;

    margin-top: -3px;

    content: "";

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 10px #fff,
        0 0 18px rgba(140, 210, 255, 0.9);
}


@keyframes shootingStarFly {
    0% {
        opacity: 0;
        transform:
            translate(0, 0)
            rotate(var(--shoot-angle, -28deg))
            scaleX(0.2);
    }

    12% {
        opacity: 1;
        transform:
            translate(
                calc(var(--shoot-x) * 0.12),
                calc(var(--shoot-y) * 0.12)
            )
            rotate(var(--shoot-angle, -28deg))
            scaleX(1);
    }

    100% {
        opacity: 0;
        transform:
            translate(var(--shoot-x), var(--shoot-y))
            rotate(var(--shoot-angle, -28deg))
            scaleX(0.35);
    }
}


.tree-viewport::before {
    position: absolute;

    z-index: 5;

    inset: 0;

    content: "";

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 30% 20%,
            rgba(80, 160, 255, 0.04),
            transparent 40%
        ),
        radial-gradient(
            ellipse at 70% 75%,
            rgba(160, 80, 220, 0.035),
            transparent 42%
        );

    mix-blend-mode: screen;

    animation:
        stadiumLightsPulse
        10s ease-in-out
        infinite alternate;
}


.tree-viewport::after {
    position: absolute;

    z-index: 30;

    inset: 0;

    content: "";

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 34%,
            rgba(0, 0, 0, 0.16) 60%,
            rgba(0, 0, 0, 0.52) 88%,
            rgba(0, 0, 0, 0.76) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.11),
            transparent 18%,
            transparent 78%,
            rgba(0, 0, 0, 0.35)
        );
}


@keyframes stadiumLightsPulse {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 0.88;
    }
}


/* =========================================================
   TREE WORLD
   ========================================================= */

.tree-world {
    position: absolute;

    z-index: 10;

    left: 0;
    top: 0;

    width: 2400px;
    height: 3300px;

    transform-origin: 0 0;

    will-change: transform;
}


.tree-connections {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 2400px;
    height: 3300px;

    overflow: visible;

    pointer-events: none;
}


.tree-nodes {
    position: absolute;

    z-index: 2;

    inset: 0;

    width: 2400px;
    height: 3300px;
}


.tree-fx-layer {
    position: absolute;

    z-index: 4;

    inset: 0;

    width: 2400px;
    height: 3300px;

    pointer-events: none;

    overflow: visible;
}


.tree-sparkle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        0 0 10px currentColor,
        0 0 2px #fff;

    animation-name: treeSparklePop;
    animation-timing-function: cubic-bezier(0.12, 0.82, 0.22, 1);
    animation-fill-mode: forwards;
}


@keyframes treeSparklePop {
    0% {
        opacity: 1;
        transform:
            translate(0, 0)
            scale(0.35);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform:
            translate(var(--sx), var(--sy))
            scale(0);
    }
}


.skill-node.node-upgrade-pop {
    animation:
        nodeUpgradePop
        420ms
        cubic-bezier(0.15, 1.4, 0.28, 1)
        both;
}


@keyframes nodeUpgradePop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    35% {
        transform: scale(1.18);
        filter: brightness(2.2);
    }

    70% {
        transform: scale(0.96);
        filter: brightness(1.35);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}


.skill-node.node-reveal-flash {
    animation:
        nodeRevealFlash
        480ms
        ease-out
        both;
}


@keyframes nodeRevealFlash {
    0% {
        filter:
            brightness(2.6)
            drop-shadow(0 0 12px rgba(255, 214, 100, 0.85));
    }

    100% {
        filter: brightness(1);
    }
}


.tree-viewport.tree-viewport-pulse {
    animation:
        treeViewportPulse
        240ms
        ease-out
        both;
}


@keyframes treeViewportPulse {
    0% {
        filter: brightness(1);
    }

    40% {
        filter: brightness(1.18);
    }

    100% {
        filter: brightness(1);
    }
}


/* =========================================================
   TREE LINES
   ========================================================= */

.tree-connection-group {
    opacity: 1;

    transition:
        opacity 220ms ease;
}


.tree-connection-group.connection-hidden {
    opacity: 0;

    visibility: hidden;
}


.tree-line-glow,
.tree-line-main,
.tree-line-energy {
    vector-effect:
        non-scaling-stroke;
}


.tree-line-glow {
    stroke:
        rgba(35, 199, 255, 0);

    stroke-width: 11;

    filter: blur(5px);

    transition:
        stroke 350ms ease;
}


.tree-line-main {
    stroke:
        rgba(116, 130, 144, 0.38);

    stroke-width: 3;

    transition:
        stroke 350ms ease,
        stroke-width 350ms ease,
        opacity 350ms ease;
}


.tree-line-energy {
    stroke: transparent;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray:
        8 17;
}


.connection-mystery
.tree-line-main {
    stroke:
        rgba(125, 139, 153, 0.4);

    stroke-dasharray:
        7 9;
}


.connection-active
.tree-line-main {
    stroke:
        rgba(255, 207, 45, 0.9);

    stroke-width: 4;
}


.connection-active
.tree-line-glow {
    stroke:
        rgba(255, 199, 35, 0.35);
}


.connection-active
.tree-line-energy {
    stroke:
        rgba(255, 245, 190, 0.94);

    animation:
        treeEnergyFlow
        1.8s linear infinite;
}


@keyframes treeEnergyFlow {
    to {
        stroke-dashoffset: -50;
    }
}


/*
 * Langsame erstmalige Linienzeichnung.
 */

.connection-drawing
.tree-line-main,
.connection-drawing
.tree-line-glow {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;

    /* Keep in sync with CONNECTION_DRAW_DURATION in treeManager.js */
    animation:
        drawTreeConnection
        var(--tree-draw-ms, 1800ms)
        cubic-bezier(
            0.18,
            0.72,
            0.22,
            1
        )
        forwards;
}


@keyframes drawTreeConnection {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}


.connection-reveal-pulse
.tree-line-energy {
    stroke: white;

    stroke-width: 6;

    stroke-dasharray:
        24 180;

    animation:
        revealEnergyPulse
        1150ms
        ease-out forwards;
}


@keyframes revealEnergyPulse {
    from {
        stroke-dashoffset: 210;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    to {
        stroke-dashoffset: -210;
        opacity: 0;
    }
}


/* =========================================================
   SKILL NODES
   ========================================================= */

.skill-node {
    position: absolute;

    width: 112px;
    min-height: 112px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;

    padding: 9px;

    color: white;

    border:
        2px solid
        rgba(255, 166, 40, 0.78);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 29, 40, 0.98),
            rgba(5, 10, 16, 0.98)
        );

    box-shadow:
        0 9px 25px
        rgba(0, 0, 0, 0.55);

    cursor: pointer;

    transform-origin: center;

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        filter 170ms ease,
        box-shadow 170ms ease,
        opacity 220ms ease;
}


.skill-node:hover:not(:disabled) {
    z-index: 20;

    transform:
        translateY(-3px)
        scale(1.07);
}


.skill-node.tree-node-hidden {
    display: none !important;
}


/*
 * Wird vom JavaScript vor einer neuen
 * Linienzeichnung gesetzt. Kein kurzes
 * vorheriges Aufblitzen.
 */

.skill-node.node-reveal-pending {
    opacity: 0 !important;

    visibility: hidden;

    pointer-events: none;

    transform:
        scale(0.2);
}


.skill-node.tree-node-mystery {
    opacity: 0.72;

    color:
        rgba(207, 217, 226, 0.7);

    border:
        2px dashed
        rgba(130, 145, 159, 0.55);

    background:
        radial-gradient(
            circle at center,
            rgba(100, 118, 132, 0.12),
            transparent 65%
        ),
        rgba(8, 14, 20, 0.9);

    box-shadow:
        inset 0 0 22px
        rgba(129, 154, 173, 0.07);

    cursor: default;

    filter: grayscale(1);
}


.skill-node.tree-node-mystery
.node-icon {
    color:
        rgba(183, 199, 211, 0.74);

    font-size: 34px;

    animation:
        mysteryNodePulse
        2.3s ease-in-out infinite;
}


.skill-node.tree-node-mystery
.node-name {
    color:
        rgba(185, 199, 210, 0.68);

    letter-spacing: 3px;
}


@keyframes mysteryNodePulse {
    0%,
    100% {
        opacity: 0.42;

        transform:
            scale(0.92);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.06);
    }
}


.skill-node.locked {
    opacity: 0.55;

    border-color: #65717d;

    filter:
        grayscale(0.65);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.5);
}


.skill-node.available {
    border-color: #ff9428;

    box-shadow:
        0 0 0 1px
        rgba(255, 148, 40, 0.12),

        0 9px 24px
        rgba(0, 0, 0, 0.54);
}


.skill-node.affordable {
    border-color: var(--cyan);

    box-shadow:
        0 0 15px
        rgba(41, 211, 255, 0.52),

        0 0 35px
        rgba(41, 211, 255, 0.18),

        0 9px 24px
        rgba(0, 0, 0, 0.55);

    animation:
        affordableNodePulse
        1.55s ease-in-out infinite;
}


@keyframes affordableNodePulse {
    0%,
    100% {
        filter:
            brightness(1);
    }

    50% {
        filter:
            brightness(1.28);
    }
}


.skill-node.owned {
    background:
        linear-gradient(
            145deg,
            rgba(55, 46, 15, 0.98),
            rgba(13, 16, 18, 0.98)
        );
}


.skill-node.maxed {
    border-color: var(--violet);

    box-shadow:
        0 0 18px
        rgba(188, 112, 255, 0.5),

        0 0 40px
        rgba(188, 112, 255, 0.16);
}


.skill-node.selected {
    outline:
        3px solid white;

    outline-offset: 5px;
}


.node-inner {
    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    text-align: center;
}


.node-icon {
    color: var(--gold);

    font-size: 23px;
    font-weight: 1000;
}


.node-name {
    color: white;

    font-size: 11px;
    font-weight: 1000;
    line-height: 1.15;
}


.node-level {
    color: #aebac5;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}


.node-glow {
    position: absolute;

    inset: -12px;

    opacity: 0;

    border-radius: 18px;

    background:
        radial-gradient(
            circle,
            rgba(49, 210, 255, 0.26),
            transparent 68%
        );

    pointer-events: none;

    transition:
        opacity 200ms ease;
}


.skill-node.affordable
.node-glow {
    opacity: 1;
}


.node-status-icon {
    position: absolute;

    top: -15px;
    right: -15px;

    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    color: #071018;
    background: var(--cyan);

    border:
        2px solid #e9fbff;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 1000;

    box-shadow:
        0 0 10px
        rgba(41, 211, 255, 0.55);
}


.skill-node.maxed
.node-status-icon {
    color: white;
    background: #9d4be8;
    border-color: #e1bfff;
}


.node-orbit {
    position: absolute;

    inset: -8px;

    opacity: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 17px;

    pointer-events: none;
}


.skill-node.affordable
.node-orbit {
    opacity: 1;

    animation:
        nodeOrbitRotation
        4s linear infinite;
}


.node-orbit-dot {
    position: absolute;

    top: -4px;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 8px
        var(--cyan);
}


@keyframes nodeOrbitRotation {
    to {
        transform:
            rotate(360deg);
    }
}


/*
 * Kein Delay im CSS.
 * Das JavaScript startet die Animation
 * erst im richtigen Moment.
 */

.node-teaser-appear {
    visibility: visible;

    animation:
        mysteryMaterialize
        850ms
        cubic-bezier(
            0.2,
            1.35,
            0.28,
            1
        )
        both;
}


@keyframes mysteryMaterialize {
    0% {
        opacity: 0;

        transform:
            scale(0.15)
            rotate(-12deg);

        filter:
            brightness(3)
            blur(7px);
    }

    65% {
        opacity: 0.9;

        transform:
            scale(1.13)
            rotate(2deg);

        filter:
            brightness(1.6)
            blur(0);
    }

    100% {
        opacity: 0.72;

        transform:
            scale(1)
            rotate(0);

        filter:
            grayscale(1);
    }
}


/*
 * Für Mystery → Reveal beginnt die
 * Animation beim bestehenden Node.
 * Kein vorgelagertes opacity: 0.
 */

.node-identity-reveal {
    visibility: visible;

    animation:
        nodeIdentityReveal
        1050ms
        cubic-bezier(
            0.17,
            1.35,
            0.3,
            1
        )
        both;
}


@keyframes nodeIdentityReveal {
    0% {
        transform:
            scale(0.9)
            rotate(-3deg);

        filter:
            brightness(2.8)
            blur(2px);
    }

    30% {
        transform:
            scale(1.25)
            rotate(3deg);

        filter:
            brightness(3.8)
            blur(0);
    }

    64% {
        transform:
            scale(0.95)
            rotate(-1deg);

        filter:
            brightness(1.6);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);

        filter:
            brightness(1);
    }
}


/* =========================================================
   NODE DETAILS
   ========================================================= */

.node-details {
    position: absolute;

    z-index: 120;

    top: 110px;
    right: 25px;

    width: 340px;

    padding: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 25, 35, 0.98),
            rgba(4, 8, 13, 0.98)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 12px;

    box-shadow:
        0 24px 60px
        rgba(0, 0, 0, 0.65);
}


.close-details {
    position: absolute;

    top: 10px;
    right: 12px;

    color: #c8d2da;
    background: transparent;

    border: 0;

    cursor: pointer;

    font-size: 26px;
}


.detail-category {
    color: var(--gold);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 3px;
}


.node-details h2 {
    margin: 10px 0 12px;

    font-size: 26px;
}


.node-details p {
    margin: 0;

    color: #b3bec8;

    font-size: 13px;
    line-height: 1.55;
}


.detail-effect {

    margin-top: 16px;

    padding: 0;

    color: inherit;

    background: transparent;

    border-left: none;

    font-size: inherit;

    font-weight: inherit;

}


.detail-level-row {
    display: flex;
    justify-content: space-between;

    margin-top: 18px;

    color: #aeb9c3;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}


.detail-costs {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 15px;
}


.detail-cost-row {
    display: flex;
    justify-content: space-between;

    gap: 16px;

    padding: 10px 12px;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    font-size: 12px;
}


.detail-cost-row.enough {
    color: #65ddff;
}


.detail-cost-row.missing {
    color: #ff9a4a;
}


.detail-requirement-secret {
    padding: 12px;

    color: #aab6c0;

    background:
        rgba(255, 255, 255, 0.055);

    border-left:
        3px solid #778796;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}


.buy-node-button {
    width: 100%;

    margin-top: 20px;

    padding: 14px;

    color: #031017;
    background: var(--cyan);

    border:
        2px solid #d7f9ff;

    border-radius: 6px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 1000;
    letter-spacing: 1.5px;
}


.buy-node-button:disabled {
    color: #81909b;
    background: #222c34;

    border-color: #49545d;

    cursor: not-allowed;
}


/* =========================================================
   TREE CONTROLS
   ========================================================= */

.play-ball-button {
    position: absolute;

    z-index: 100;

    left: 50%;
    bottom: 20px;

    min-width: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    padding: 17px 32px;

    color: white;

    background:
        linear-gradient(
            180deg,
            #f1842b,
            #c34412
        );

    border:
        3px solid #ffb25a;

    border-radius: 8px;

    box-shadow:
        0 8px 0 #70230e,

        0 16px 35px
        rgba(0, 0, 0, 0.48);

    cursor: pointer;

    transform:
        translateX(-50%);

    font-size: 22px;
    font-weight: 1000;
}


.play-ball-button:hover {
    filter:
        brightness(1.12);
}


.play-ball-button small {
    font-size: 9px;
    letter-spacing: 2px;
}


.tree-help {
    position: absolute;

    z-index: 100;

    right: 20px;
    bottom: 15px;

    color: #7f8d98;

    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   GAME SCREEN
   ========================================================= */

#game-screen {
    background: #020706;
}


#game-canvas {
    position: absolute;

    inset: 0;

    display: block;

    cursor: none;
}


.game-overlay {
    position: absolute;

    z-index: 20;

    inset: 0;

    pointer-events: none;
}


.round-resources {
    position: absolute;

    top: 15px;
    left: 15px;

    min-width: 230px;

    padding: 15px;

    background:
        rgba(2, 8, 11, 0.88);

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 6px;
}


.round-resource-title {
    margin-bottom: 12px;

    color: #aeb9c4;

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 2px;
}


.round-resource-row {
    display: grid;

    grid-template-columns:
        28px 1fr auto;

    align-items: center;

    gap: 10px;

    font-size: 13px;
}


.game-timer {
    position: absolute;

    top: 15px;
    right: 15px;

    min-width: 165px;

    padding: 12px 16px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    background:
        rgba(2, 8, 11, 0.88);

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 6px;
}


.game-timer span {
    color: #aeb9c4;

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 2px;
}


.abort-round-button {
    position: absolute;

    right: 15px;
    bottom: 15px;

    z-index: 25;

    padding: 10px 16px;

    color: #e8eef2;
    background: rgba(2, 8, 11, 0.9);

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius: 6px;

    cursor: pointer;

    font-size: 11px;
    font-weight: 1000;
    letter-spacing: 2px;

    pointer-events: auto;
}

.abort-round-button:hover {
    color: #ffffff;
    background: rgba(28, 12, 12, 0.95);

    border-color: #ff7d25;
}


.game-timer strong {
    color: #ff7d25;

    font-size: 25px;

    font-variant-numeric:
        tabular-nums;
}


.round-start-message {
    position: absolute;

    z-index: 40;

    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: min(920px, calc(100vw - 32px));

    pointer-events: none;

    transform: translate(-50%, -50%);
}


.play-ball-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    animation:
        playBallCallExit
        480ms 1420ms ease-in forwards;
}


.play-ball-kicker {
    color: #ffe35b;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: clamp(14px, 2.4vw, 22px);
    letter-spacing: 0.35em;

    text-shadow:
        2px 2px 0 #1a1510,
        0 0 18px rgba(255, 90, 60, 0.45);

    opacity: 0;

    animation:
        playBallKickerSlam
        520ms 40ms ease-out both;
}


.play-ball-words {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.08em;

    line-height: 0.85;
}


.play-ball-play,
.play-ball-ball {
    display: inline-block;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Black",
        sans-serif;
    font-size: clamp(64px, 12vw, 132px);
    font-weight: 400;
    letter-spacing: -0.03em;

    -webkit-text-stroke: 5px #1a1510;
    paint-order: stroke fill;

    transform-origin: 50% 100%;
    opacity: 0;
}


.play-ball-play {
    color: #ff3b2f;

    text-shadow:
        0 6px 0 #8b1208,
        4px 8px 0 #1a1510,
        0 18px 32px rgba(0, 0, 0, 0.55);

    --play-tilt: -5deg;

    animation:
        playBallWordSlam
        920ms 120ms cubic-bezier(0.15, 1.5, 0.25, 1) both;
}


.play-ball-ball {
    color: #ffc72c;

    text-shadow:
        0 6px 0 #9a6a00,
        4px 8px 0 #1a1510,
        0 18px 32px rgba(0, 0, 0, 0.55);

    --play-tilt: 3deg;

    animation:
        playBallWordSlam
        920ms 240ms cubic-bezier(0.15, 1.5, 0.25, 1) both;
}


.play-ball-diamond {
    position: relative;

    width: 28px;
    height: 28px;
    margin-top: 8px;

    opacity: 0;
    transform-origin: 50% 50%;

    animation:
        playBallDiamondSlam
        720ms 620ms cubic-bezier(0.12, 1.6, 0.3, 1) both;
}


.play-ball-diamond-core {
    position: absolute;
    inset: 0;

    background: #ffc72c;
    border: 3px solid #fff8d6;
    box-shadow:
        0 0 0 3px #1a1510,
        0 6px 0 #9a6a00,
        0 0 22px rgba(255, 199, 44, 0.85);

    transform: rotate(45deg);
}


.play-ball-diamond-flash {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.9),
        transparent 65%
    );
    opacity: 0;
    pointer-events: none;

    animation:
        playBallDiamondFlash
        480ms 780ms ease-out both;
}


@keyframes playBallKickerSlam {
    0% {
        opacity: 0;
        transform: translateY(-28px) scale(1.35);
        letter-spacing: 0.55em;
    }

    55% {
        opacity: 1;
        transform: translateY(3px) scale(0.94, 1.1);
        letter-spacing: 0.32em;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        letter-spacing: 0.35em;
    }
}


@keyframes playBallWordSlam {
    0% {
        opacity: 0;
        transform:
            translateY(-48vh)
            scale(2.6, 2.6)
            rotate(var(--play-tilt, 0deg));
        filter: brightness(2.1);
    }

    46% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1.4, 0.42)
            rotate(var(--play-tilt, 0deg));
        filter: brightness(1.25);
    }

    60% {
        transform:
            translateY(-14px)
            scale(0.76, 1.32)
            rotate(var(--play-tilt, 0deg));
        filter: brightness(1);
    }

    76% {
        transform:
            translateY(3px)
            scale(1.1, 0.9)
            rotate(var(--play-tilt, 0deg));
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1)
            rotate(var(--play-tilt, 0deg));
        filter: brightness(1);
    }
}


@keyframes playBallDiamondSlam {
    0% {
        opacity: 0;
        transform: scale(0.05) rotate(-170deg);
    }

    55% {
        opacity: 1;
        transform: scale(1.55, 0.48) rotate(14deg);
    }

    72% {
        transform: scale(0.72, 1.4) rotate(-5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}


@keyframes playBallDiamondFlash {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    35% {
        opacity: 0.95;
        transform: scale(1.15);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


@keyframes playBallCallExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-28px) scale(0.92);
        filter: brightness(1.4);
    }
}

/*
 * JS: PLAY_BALL_INTRO_MS in gameManager.js
 * muss zum Exit-Ende (~1900ms) passen.
 */


/* =========================================================
   RESULTS
   ========================================================= */

.result-screen {
    background:
        radial-gradient(
            circle at center,
            rgba(36, 111, 145, 0.18),
            transparent 45%
        ),
        #03080d;
}


.result-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width:
        min(
            520px,
            calc(100vw - 34px)
        );

    padding: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 27, 37, 0.98),
            rgba(4, 9, 14, 0.98)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 14px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.7);

    transform:
        translate(-50%, -50%);
}


.result-kicker {
    color: var(--gold);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 3px;
}


.result-card h2 {
    margin: 10px 0 22px;

    font-size: 34px;
}


.result-list,
.result-summary {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.result-row {
    display: grid;

    grid-template-columns:
        28px 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.result-summary {
    margin-top: 15px;
}


.result-summary
.result-row {
    grid-template-columns:
        1fr auto;
}


.total-row {
    color: var(--gold);
}


.result-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-top: 24px;
}


.play-again-button,
.return-button {
    padding: 14px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 13px;
    font-weight: 1000;
    letter-spacing: 1px;
}


.play-again-button {
    color: #131313;
    background: var(--gold);

    border:
        2px solid #fff0a0;
}


.return-button {
    color: white;
    background: #19242e;

    border:
        2px solid #53616d;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 850px
) {
    .top-bar {
        gap: 12px;

        padding:
            0 10px;
    }


    .brand-small span {
        display: none;
    }


    .resource-item {
        min-width: 145px;
    }


    .node-details {
        top: 100px;
        right: 12px;

        width:
            min(
                320px,
                calc(100vw - 24px)
            );
    }


    .tree-help {
        display: none;
    }


    .game-logo {
        letter-spacing: -5px;
    }
}


@media (
    max-height: 700px
) {
    .title-information {
        margin-top: 25px;
    }


    .press-enter {
        margin-top: 20px;
    }


    .node-details {
        top: 95px;

        max-height:
            calc(100vh - 115px);

        overflow-y: auto;
    }
}

/* =========================================================
   TREE UX 0.2B — HOVER INFO AND DIRECT PURCHASE
   ========================================================= */

.skill-node[aria-disabled="true"] {
    pointer-events: auto;
}

.skill-node.tree-node-mystery {
    cursor: help;
}

.node-purchase-denied {
    animation:
        nodePurchaseDenied
        460ms ease both !important;
}

@keyframes nodePurchaseDenied {
    0%,
    100% {
        transform:
            translateX(0)
            scale(1);
    }

    18% {
        transform:
            translateX(-7px)
            scale(0.98);

        border-color: #ff8b4a;

        filter:
            brightness(1.5);
    }

    38% {
        transform:
            translateX(7px)
            scale(1.02);
    }

    58% {
        transform:
            translateX(-5px)
            scale(1);
    }

    78% {
        transform:
            translateX(3px)
            scale(1);
    }
}


/* =========================================================
   TOOLTIP AT THE MOUSE
   ========================================================= */

.tree-tooltip {
    position: fixed;

    z-index: 1000;

    width: 292px;
    max-width:
        calc(100vw - 24px);

    padding: 15px;

    pointer-events: none;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(15, 27, 37, 0.985),
            rgba(3, 8, 13, 0.985)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    border-radius: 9px;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.72),

        inset 0 0 28px
        rgba(41, 211, 255, 0.035);

    backdrop-filter:
        blur(8px);

    animation:
        tooltipAppear
        120ms ease-out both;
}

.tree-tooltip.hidden {
    display: none !important;
}

@keyframes tooltipAppear {
    from {
        opacity: 0;

        transform:
            translateY(5px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

.tree-tooltip-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.tree-tooltip-header strong {
    color: white;

    font-size: 14px;
    font-weight: 1000;
    line-height: 1.15;
    letter-spacing: 0.6px;
}

.tree-tooltip-header span {
    flex: 0 0 auto;

    color: var(--gold);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 1px;
}

.tree-tooltip p {
    margin:
        10px 0 0;

    color: #b8c4ce;

    font-size: 11px;
    line-height: 1.45;
}

.tree-tooltip-effect {
    margin-top: 11px;
    padding: 9px 10px;

    color: #dff8ff;

    background:
        rgba(41, 211, 255, 0.075);

    border-left:
        3px solid var(--cyan);

    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
}

.tree-tooltip-costs {
    display: flex;
    flex-direction: column;

    gap: 4px;

    margin-top: 10px;
}

.tooltip-cost {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.tooltip-cost.enough {
    color: #65ddff;
}

.tooltip-cost.missing {
    color: #ff9a4a;
}

.tooltip-cost.locked {
    color: #9ba8b4;
}

.tree-tooltip-action {
    margin-top: 12px;
    padding-top: 10px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.11);

    color: var(--gold);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 1.5px;
    text-align: center;
}

.tree-tooltip[data-status="affordable"] {
    border-color:
        rgba(41, 211, 255, 0.72);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.72),

        0 0 22px
        rgba(41, 211, 255, 0.2);
}

.tree-tooltip[data-status="available"]
.tree-tooltip-action {
    color: #ff9a4a;
}

.tree-tooltip[data-status="locked"],
.tree-tooltip[data-status="mystery"] {
    border-color:
        rgba(143, 157, 170, 0.42);
}

.tree-tooltip[data-status="locked"]
.tree-tooltip-action,
.tree-tooltip[data-status="mystery"]
.tree-tooltip-action {
    color: #9ba8b4;
}

.tree-tooltip[data-status="maxed"] {
    border-color:
        rgba(188, 112, 255, 0.75);
}

.tree-tooltip[data-status="maxed"]
.tree-tooltip-action {
    color: var(--violet);
}


/* =========================================================
   DETAILED NODE PANEL
   ========================================================= */

.node-details {
    width: 390px;

    max-height:
        calc(100vh - 145px);

    overflow-y: auto;
}

.detail-section-label {
    margin-top: 18px;
    margin-bottom: 7px;

    color: var(--gold);

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 2.5px;
}

.detail-story {
    color:
        #e1d6b5 !important;

    font-style: italic;

    line-height:
        1.6 !important;
}

.detail-action-status {
    width: 100%;

    margin-top: 20px;
    padding: 13px;

    color: #9ba8b4;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.11);

    border-radius: 6px;

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 1.4px;
    text-align: center;
}

.detail-action-status[data-status="affordable"] {
    color: #071018;
    background: var(--cyan);
    border-color: #d7f9ff;
}

.detail-action-status[data-status="available"] {
    color: #ff9a4a;
}

.detail-action-status[data-status="maxed"] {
    color: var(--violet);

    border-color:
        rgba(188, 112, 255, 0.42);
}

.buy-node-button {
    display: none !important;
}


/* =========================================================
   RESPONSIVE TREE UX
   ========================================================= */

@media (
    max-width: 850px
) {
    .tree-tooltip {
        width: 255px;
    }

    .node-details {
        width:
            min(
                350px,
                calc(100vw - 24px)
            );
    }
}

/* =========================================================
   REQUIREMENT HIGHLIGHTS
   ========================================================= */

.skill-node.requirement-target-highlight {
    z-index: 24;
    outline: 3px solid rgba(255, 255, 255, 0.92);
    outline-offset: 7px;
    filter: brightness(1.2);
}

.skill-node.requirement-highlight {
    z-index: 25;
    pointer-events: none;
}

.skill-node.requirement-highlight-met {
    border-color: var(--cyan) !important;
    box-shadow:
        0 0 0 2px rgba(41, 211, 255, 0.34),
        0 0 24px rgba(41, 211, 255, 0.8),
        0 0 58px rgba(41, 211, 255, 0.34),
        0 10px 28px rgba(0, 0, 0, 0.62) !important;
    animation: requirementMetPulse 1.15s ease-in-out infinite !important;
}

.skill-node.requirement-highlight-missing {
    border-color: #ff9428 !important;
    outline: 3px dashed rgba(255, 148, 40, 0.9);
    outline-offset: 6px;
    box-shadow:
        0 0 22px rgba(255, 148, 40, 0.8),
        0 0 52px rgba(255, 148, 40, 0.3),
        0 10px 28px rgba(0, 0, 0, 0.62) !important;
    animation: requirementMissingPulse 0.72s ease-in-out infinite !important;
}

.skill-node.requirement-highlight::after {
    position: absolute;
    z-index: 40;
    left: 50%;
    bottom: -34px;
    min-width: 86px;
    padding: 6px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 1px;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.skill-node.requirement-highlight-met::after {
    content: "✓ LEVEL " attr(data-required-level);
    color: #061017;
    background: var(--cyan);
    border: 1px solid #dffaff;
}

.skill-node.requirement-highlight-missing::after {
    content: "! NEED LEVEL " attr(data-required-level);
    color: #160900;
    background: #ff9428;
    border: 1px solid #ffd0a4;
}

@keyframes requirementMetPulse {
    0%, 100% {
        transform: translateY(-2px) scale(1.04);
        filter: brightness(1.12);
    }
    50% {
        transform: translateY(-5px) scale(1.1);
        filter: brightness(1.55);
    }
}

@keyframes requirementMissingPulse {
    0%, 100% {
        transform: translateX(0) scale(1.03);
        filter: brightness(1.08);
    }
    35% {
        transform: translateX(-3px) scale(1.08);
        filter: brightness(1.45);
    }
    70% {
        transform: translateX(3px) scale(1.08);
        filter: brightness(1.45);
    }
}

.connection-requirement-highlight .tree-line-main {
    stroke-width: 6;
}

.connection-requirement-highlight .tree-line-glow {
    stroke-width: 18;
    filter: blur(7px);
}

.connection-requirement-met .tree-line-main,
.connection-requirement-met .tree-line-energy {
    stroke: rgba(41, 211, 255, 0.98) !important;
}

.connection-requirement-met .tree-line-glow {
    stroke: rgba(41, 211, 255, 0.55) !important;
}

.connection-requirement-missing .tree-line-main,
.connection-requirement-missing .tree-line-energy {
    stroke: rgba(255, 148, 40, 0.98) !important;
    stroke-dasharray: 8 9;
}

.connection-requirement-missing .tree-line-glow {
    stroke: rgba(255, 148, 40, 0.55) !important;
}

/* =========================================================
   DETAIL PANEL POLISH
   ========================================================= */

.node-details {
    width: 390px;
    padding: 25px;
}

.node-details h2 {
    margin: 9px 30px 14px 0;
}

.detail-story {
    margin: 0 !important;
    color: #e2d7b7 !important;
    font-size: 13px !important;
    font-style: italic;
    line-height: 1.58 !important;
}

.detail-description {
    margin-top: 14px !important;
    padding-top: 14px;
    color: #b8c4ce !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.58 !important;
}

.detail-effect {
    margin-top: 16px;
}

.detail-level-row {
    margin-top: 17px;
}

.detail-costs:empty {
    display: none;
}

.detail-action-status {
    margin-top: 15px;
}

.detail-action-status[data-status="maxed"] {
    color: #e5c8ff;
    background: rgba(188, 112, 255, 0.09);
    border-color: rgba(188, 112, 255, 0.45);
}

/* Tooltip must always remain above the Tree and details panel. */
.tree-tooltip {
    position: fixed;
    z-index: 99999;
    display: block;
}

.tree-tooltip.hidden {
    display: none !important;
}


/* =========================================================
   SKILL DISPLAY CARDS 0.3c
   ========================================================= */


.skill-display-card {

    margin-top: 12px;

    padding: 14px;


    background:
        rgba(41,211,255,0.055);

    border-left:
        3px solid var(--cyan);

    border-radius:
        4px;

    transition:
        background 180ms ease,
        border-color 180ms ease;
}



.skill-display-title {

    color:
        var(--cyan);

    font-size:
        10px;

    font-weight:
        1000;

    letter-spacing:
        1.8px;

    margin-bottom:
        10px;

}



.skill-display-values {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

}



.skill-display-column {

    flex:1;

    display:flex;

    flex-direction:column;

}



.skill-display-caption {

    color:
        #8996a3;

    font-size:
        8px;

    font-weight:
        1000;

    letter-spacing:
        1.5px;

}



.skill-display-column strong {

    margin-top:
        5px;

    color:
        white;

    font-size:
        16px;

    font-weight:
        1000;

}



.skill-display-arrow {

    color:
        var(--gold);

    font-size:
        18px;

    font-weight:
        1000;

}



.skill-display-change {

    margin-top:10px;

    padding-top:8px;

    border-top:
        1px solid rgba(255,255,255,0.08);

    text-align:center;

    font-size:10px;

    letter-spacing:1.5px;

}



/*
   Stat Richtung:
   kleinere Werte besser
*/

.skill-display-card[data-direction="lowerIsBetter"]
.skill-display-change {

    color:
        #65ddff;

}



/*
   Stat Richtung:
   höhere Werte besser
*/

.skill-display-card[data-direction="higherIsBetter"]
.skill-display-change {

    color:
        #65ddff;

}



/*
   Kein Upgrade verfügbar
*/

.skill-display-card[data-maxed="true"] {

    background:
        rgba(188,112,255,0.045);

    border-left-color:
        var(--violet);

}



.skill-display-card[data-maxed="true"]
.skill-display-title {

    color:
        var(--violet);

}


/* =========================================================
   STRUCTURED CURSOR TOOLTIP — WITHOUT NESTED CARD
   ========================================================= */

.tree-tooltip-effect {
    margin-top: 11px;
    padding: 0;

    color: inherit;
    background: transparent;
    border-left: none;
}

/*
 * Im Maus-Tooltip bleibt das vollständige
 * Current/Next-Layout erhalten, aber ohne
 * zusätzliche Karte innerhalb des Tooltips.
 */
.tree-tooltip
.skill-display-card {
    margin-top: 10px;
    padding: 10px 0 0;

    background: transparent;

    border: none;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 0;
}

/*
 * Kein violetter Innenkasten bei MAX.
 */
.tree-tooltip
.skill-display-card[data-maxed="true"] {
    background: transparent;
    border-left: none;
}

/*
 * Titel bleibt farblich erhalten.
 */
.tree-tooltip
.skill-display-title {
    margin-bottom: 9px;
}

/*
 * Etwas kompakter als im großen Detailfenster.
 */
.tree-tooltip
.skill-display-values {
    gap: 10px;
}

.tree-tooltip
.skill-display-column strong {
    font-size: 15px;
}

.tree-tooltip
.skill-display-arrow {
    font-size: 16px;
}

.tree-tooltip
.skill-display-change {
    margin-top: 8px;
    padding-top: 7px;

    font-size: 9px;
}


/* =========================================================
   CURRENT STATS PANEL 0.3d
   ========================================================= */

.current-stats-panel {
    position: absolute;

    z-index: 110;

    top: 104px;
    left: 18px;

    width: 250px;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(14, 25, 35, 0.97),
            rgba(4, 8, 13, 0.97)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 9px;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.55);

    overflow: hidden;
}


.current-stats-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px 14px;

    color: white;
    background: transparent;

    border: 0;

    cursor: pointer;

    text-align: left;
}


.current-stats-toggle:hover {
    background:
        rgba(41, 211, 255, 0.07);
}


.current-stats-toggle-label {
    color: var(--gold);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 2px;
}


.current-stats-toggle-icon {
    color: var(--cyan);

    font-size: 15px;
    font-weight: 1000;

    transition:
        transform 180ms ease;
}


.current-stats-toggle[
    aria-expanded="true"
]
.current-stats-toggle-icon {
    transform:
        rotate(90deg);
}


/* =========================================================
   PANEL CONTENT
   ========================================================= */

.current-stats-content {
    max-height:
        calc(100vh - 190px);

    padding:
        0 14px 14px;

    overflow-y: auto;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);
}


.current-stats-content[hidden] {
    display: none;
}


.current-stats-group {
    padding-top: 14px;
}


.current-stats-group +
.current-stats-group {
    margin-top: 12px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.current-stats-group-title {
    margin-bottom: 8px;

    color: var(--cyan);

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 1.8px;
}


.current-stats-rows {
    display: flex;
    flex-direction: column;

    gap: 6px;
}


.current-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 27px;

    padding:
        5px 7px;

    background:
        rgba(255, 255, 255, 0.025);

    border-radius: 4px;
}


.current-stat-label {
    color: #aebac5;

    font-size: 10px;
    font-weight: 700;
}


.current-stat-value {
    flex: 0 0 auto;

    color: white;

    font-size: 11px;
    font-weight: 1000;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   PANEL SCROLLBAR
   ========================================================= */

.current-stats-content::-webkit-scrollbar {
    width: 6px;
}


.current-stats-content::-webkit-scrollbar-track {
    background: transparent;
}


.current-stats-content::-webkit-scrollbar-thumb {
    background:
        rgba(41, 211, 255, 0.28);

    border-radius: 999px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 850px
) {
    .current-stats-panel {
        top: 100px;
        left: 12px;

        width:
            min(
                245px,
                calc(100vw - 24px)
            );
    }
}