body {
    margin: 0;
    font-family: "Cairo", Arial, sans-serif;
}

html, body, #all, #app-container {
    width: 100%;
    height: 100%;
}

#all {
    position: relative;
    background: black;
}

#app-container {
    position: relative;
}

#menu-start {
    box-sizing: border-box;
    position: absolute;
    z-index: 4;
    inset: 0;
    overflow: hidden;
    color: white;
}
#menu-start:not(.faded-in) {
    pointer-events: none;
    visibility: hidden;
    transition: opacity .5s cubic-bezier(.55, .085, .68, .53), visibility 0s .5s;
}
.start-worlds,
.start-world,
.start-divider,
.start-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.start-worlds { pointer-events: none; }
.start-world {
    display: block;
    object-fit: cover;
    object-position: center;
}
.start-world-symbiotic {
    clip-path: polygon(69% 0, 100% 0, 100% 100%, 31% 100%);
}
.start-divider {
    overflow: visible;
    pointer-events: none;
}
.start-divider path { fill: none; }
.start-divider-halo {
    stroke: #a149ff;
    stroke-width: 36;
    opacity: .82;
}
.start-divider-wide {
    stroke: #cb64ff;
    stroke-width: 9;
    opacity: .7;
}
.start-divider-core {
    stroke: #f3b4ff;
    stroke-width: 2;
    filter: drop-shadow(0 0 5px #fa9fff);
}
.start-divider-sparks {
    stroke: #fff4ff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1 95 2 130;
    filter: drop-shadow(0 0 6px #fff);
    animation: start-sparks 8s linear infinite;
}
@keyframes start-sparks { to { stroke-dashoffset: -228; } }
.start-vignette {
    background: radial-gradient(ellipse 72% 68% at 50% 48%, transparent 28%, #03021366 58%, #01010bba 82%, #00000df0 100%);
}
.start-title {
    position: absolute;
    z-index: 1;
    top: 18%;
    left: 50%;
    width: min(95%, 1100px);
    margin: 0;
    transform: translateX(-50%);
    color: #f7efff;
    font-family: "Fascinate", "Trebuchet MS", sans-serif;
    font-size: clamp(2.9rem, 5.4vw, 5.8rem);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.05;
    text-align: center;
    text-shadow: 1px 1px 8px rgb(200, 0, 250), 0 4px 2px #0a0419, 0 10px 18px #100525e6, 0 0 3px #ffffffd9, 0 0 12px #dfb8ffcf, 0 0 30px #a45affbd, 0 0 52px #7734e299;
    animation: start-title-color-drift 5s ease-in-out infinite alternate;
}
@keyframes start-title-color-drift {
    to { color: #e4cfff; }
}
.start-title::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -.3em -.08em;
    background: radial-gradient(ellipse closest-side, #10071cba 0%, #180a34a1 55%, transparent 100%);
    filter: blur(18px);
    pointer-events: none;
    transform-origin: center;
    animation: start-title-breathe 6s ease-in-out infinite alternate;
}
@keyframes start-title-breathe {
    to { transform: scale(.70); }
}
.start-controls {
    position: absolute;
    z-index: 1;
    top: 44%;
    left: 50%;
    display: grid;
    gap: clamp(12px, 2.5vh, 24px);
    width: min(440px, calc(100vw - 40px));
    transform: translateX(-50%);
}
.start-select {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(52px, 7.2vh, 68px);
    padding: 0 24px;
    border: 1px solid #dfd2f2b8;
    border-radius: 11px;
    background: linear-gradient(105deg, #111529df, #180f35e8);
    box-shadow: inset 0 1px 0 #ffffff18, 0 5px 22px #0008;
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    cursor: pointer;
}
.start-select span { flex: 0 0 auto; }
.start-select select {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 56px 0 44%;
    border: 0;
    outline-offset: 3px;
    appearance: none;
    color: #e8daf7;
    background: transparent;
    font: inherit;
    text-align: right;
    cursor: pointer;
}
.start-select select option {
    color: #f7f3ff;
    background: #17152d;
}
.start-select::after {
    content: "";
    position: absolute;
    right: 22px;
    top: calc(50% - 5px);
    width: 9px;
    height: 9px;
    border-right: 2px solid #f3eaff;
    border-bottom: 2px solid #f3eaff;
    transform: rotate(45deg);
    pointer-events: none;
}
#bt-start {
    box-sizing: border-box;
    width: 100%;
    height: clamp(64px, 8.8vh, 82px);
    border: 1px solid #f2c8ff;
    border-radius: 14px;
    color: #361a7e;
    background: linear-gradient(115deg, #a39cff, #bb7dff 62%, #943ef2);
    background-size: 150% 100%;
    animation: start-button-gradient-drift 5s ease-in-out infinite alternate;
    box-shadow: inset 0 2px 2px #ffffff91, 0 0 0 2px #9b5cfb66, 0 0 25px #9b5cfbaa, 0 8px 24px #0b042499;
    font: 700 clamp(1.4rem, 2.1vw, 1.9rem) "Cairo", Arial, sans-serif;
    cursor: pointer;
    transition: filter 160ms ease-out, transform 160ms ease-out;
}
@keyframes start-button-gradient-drift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}
#bt-start:hover { filter: brightness(1.16); }
#bt-start:active { filter: brightness(1.3); }
#bt-start:focus-visible,
.start-select select:focus-visible { outline: 3px solid #ffdbff; }
@media (max-height: 600px) {
    .start-title { top: 11%; }
    .start-controls { top: 40%; }
}
@media (max-width: 640px) {
    .start-title { top: 17%; font-size: clamp(2.5rem, 9vw, 4.2rem); }
    .start-select select { padding-left: 36%; }
}
@media (prefers-reduced-motion: reduce) {
    .start-divider-sparks { animation: none; }
    .start-title { animation: none; }
    .start-title::before { animation: none; }
    #bt-start { animation: none; }
}

#ui-input-note {
    padding: 0 .6em;
    font-size: .85em;
    line-height: 1.5;
    opacity: .85;
}

#out-threejs {
    position: absolute;
}

#out-threejs {
    z-index: 2;
}

#out-ui {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}


.can-fade {
    opacity: 0;
    transition: opacity 8s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.can-fade.fast {
    transition: opacity 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

#out-ui.ending {
    transition: opacity 1s ease-in-out;
}

#out-threejs.ending {
    transition: opacity 2s ease-in-out;
}

#credits {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 1.5rem;
    color: #f3ecf7;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity 2s ease-in-out, visibility 0s 2s;
}

#credits.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 2s ease-in-out;
}

.credits-content {
    box-sizing: border-box;
    width: min(100%, 40rem);
    margin: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid #b398db66;
    border-radius: 22px;
    background: linear-gradient(155deg, #1d1429f2, #0b0914f7 70%);
    box-shadow: 0 18px 70px #000b, 0 0 55px #733bb022, inset 0 1px #ffffff1a;
}
.credits-content h2 {
    margin: 0;
    color: #f8f0ff;
    font-family: "Fascinate", "Trebuchet MS", sans-serif;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 400;
    line-height: 1.1;
    text-shadow: 0 0 24px #a45aff66;
}
.credits-content h2::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 2px;
    margin: 1.1rem auto 1rem;
    background: linear-gradient(90deg, transparent, #ca9af6, transparent);
}
.credits-content p { margin: 0; }
.credits-content > p:first-of-type {
    color: #e7def1;
    font-size: 1.15rem;
}
#bt-restart {
    min-width: 10rem;
    margin: 1.25rem 0 1.5rem;
    padding: .55rem 1.5rem;
    border: 1px solid #d8b7ff;
    border-radius: 999px;
    color: #240e39;
    background: linear-gradient(120deg, #d9bdff, #ad8df1);
    box-shadow: 0 5px 22px #874bcc55, inset 0 1px #ffffff9c;
    font: 700 1rem "Cairo", Arial, sans-serif;
    cursor: pointer;
    transition: filter 160ms ease-out, transform 160ms ease-out;
}
#bt-restart:hover { filter: brightness(1.14); }



.credits-content .info-moku {
    margin-top: 4rem;
    font-size: 1.5rem;
}
#credits a {
    color: #d0a9ff;
    text-decoration-color: #d0a9ff80;
    text-underline-offset: .22em;
}
#credits a:hover { color: #f0d7ff; }
.credits-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.credits-content li {
    padding: .35rem 0;
    color: #a99bb8;
    line-height: 1.5;
}
.credits-content li b {
    color: #f3ecf7;
    font-weight: bold;
}
.credits-content > .copyright {
    color: #8f839c;
    font-size: .9rem;
    letter-spacing: .08em;
}

.faded-in {
    opacity: 1;
}