:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #f8fafc;
    background: #0b1020;
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
    isolation: isolate;
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 30% 20%, #8b5cf615, transparent 55%),
                radial-gradient(ellipse at 85% 75%, #3b82f60c, transparent 50%);
}
.falling-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.background-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Fade both falling icons and their fragments before the ground. */
.falling-background, .burst-layer {
    --fade-start: 240px;
    --fade-end: 95px;
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-start)), transparent calc(100% - var(--fade-end)));
}
.falling-item {
    position: absolute;
    top: -96px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    color: #a78bfa;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    --visibility: .2;
    opacity: 0;
    animation: gentle-fall var(--duration) var(--delay) linear infinite;
}
.falling-icon { display: block; width: 100%; height: 100%; pointer-events: none; }
.falling-item:hover, .falling-item:focus-visible { animation-play-state: paused; }
.falling-item:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 4px; border-radius: 8px; opacity: .85 !important; }
.falling-item.is-splitting { opacity: 0 !important; pointer-events: none; }
.burst-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.icon-fragment { position: absolute; pointer-events: none; }
.falling-item:nth-of-type(3n) { color: #769eef; }
.falling-flag { --visibility: .28; }
.falling-cheese { --visibility: .28; }
.is-spinning { --turn: 110deg; }
.spin-reverse { --turn: -110deg; }
@keyframes gentle-fall {
    0% { transform: translate3d(0, -80px, 0) rotate(var(--angle)); opacity: 0; }
    10%, 85% { opacity: var(--visibility); }
    100% { transform: translate3d(var(--drift), calc(100vh + 192px), 0) rotate(calc(var(--angle) + var(--turn, 0deg))); opacity: 0; }
}
/* Decorative scenery stays behind the menu and never receives clicks. */
.landscape {
    position: fixed;
    inset: auto 0 0;
    height: 260px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.landscape-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.meadow { position: absolute; inset: auto 0 0; width: 100%; height: 90px; }
.windmill {
    position: absolute;
    left: clamp(8px, 2vw, 30px);
    bottom: 18px;
    width: clamp(130px, 15vw, 190px);
    height: auto;
    opacity: 1;
}
.windmill-sails {
    transform-box: view-box;
    transform-origin: 100px 104px;
    animation: windmill-turn 28s linear infinite;
}
@keyframes windmill-turn { to { transform: rotate(360deg); } }
.tulip-garden { position: absolute; inset: 0; }
.reservoir {
    position: absolute;
    left: 58%;
    right: 0;
    bottom: 0;
    width: 42%;
    height: clamp(200px, 28vh, 260px);
}
.reservoir-wave { animation: water-surface 12s linear infinite; }
.reservoir-ripples { animation: water-ripples 7s ease-in-out infinite alternate; }
.ripples-back { animation-duration: 9s; animation-direction: alternate-reverse; }
.river-current { animation: river-flow 4s linear infinite; }
.outlet-current { animation: outlet-flow 1.8s linear infinite; }
.outlet-foam { animation: outlet-splash 3s ease-in-out infinite alternate; transform-origin: 312px 237px; }
.fishing-float { animation: fishing-bob 4s ease-in-out infinite alternate; }
@keyframes fishing-bob { to { transform: translateY(1.5px); } }
@keyframes river-flow { to { stroke-dashoffset: -70; } }
@keyframes outlet-flow { to { stroke-dashoffset: -36; } }
@keyframes outlet-splash { to { opacity: .5; transform: scale(1.08, 1.04); } }
@keyframes water-surface { to { transform: translateX(-120px); } }
@keyframes water-ripples { to { transform: translate(15px, 2px); } }
.tulip {
    position: absolute;
    left: var(--x);
    bottom: 19px;
    width: 36px;
    height: var(--height);
    transform: translateX(-50%);
    opacity: 1;
}
.menu {
    position: relative;
    z-index: 1;
    pointer-events: none;
    width: min(850px, calc(100% - 40px));
    margin: auto;
    padding: 64px 0;
    text-align: center;
}
h1 {
    margin: 0 0 18px;
    font-size: clamp(40px, 7vw, 64px);
    line-height: 1.1;
    letter-spacing: -2px;
}
h1 span { color: #a78bfa; }
p { margin: 0; color: #94a3b8; font-size: 15px; line-height: 1.7; }
.buttons {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 38px;
}
.button-column { display: grid; gap: inherit; }
.website-button {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 18px 22px;
    border: 1px solid #b7a3ff33;
    border-radius: 12px;
    color: #f8fafc;
    background: linear-gradient(110deg, #7650cc, #4a66c8);
    box-shadow: 0 8px 24px #02061140;
    text-decoration: none;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    touch-action: manipulation;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.website-button svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}
.website-button:hover { transform: translateY(-3px); filter: brightness(1.12); box-shadow: 0 12px 28px #8b5cf620; }
.website-button:hover svg { transform: translateX(3px); }
.website-button:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 5px; }
footer { padding: 24px; text-align: center; color: #B8C2CD; font-size: 12px; text-shadow: 0 1px 5px #0B1020; }
@media (max-width: 650px) {
    .falling-background, .burst-layer { --fade-start: 200px; --fade-end: 75px; }
    .tulip-garden { left: 4%; width: 62%; right: auto; }
    .reservoir { left: 30%; width: 70%; height: clamp(125px, 24vh, 180px); }
    .windmill { width: 125px; bottom: 14px; }
    .meadow { height: 65px; }
    .tulip { width: 29px; height: calc(var(--height) * .8); bottom: 14px; }
    .tulip:nth-child(even) { display: none; }
    .tulip:nth-child(n + 10) { display: none; }
    .falling-item:nth-of-type(n + 9) { display: none; }
    .menu { max-width: 390px; }
    .buttons { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
    p { font-size: 13px; }
}
@media (max-height: 620px) {
    .falling-background, .burst-layer { --fade-start: 145px; --fade-end: 50px; }
    .reservoir { height: 120px; }
    .windmill { width: 90px; bottom: 8px; }
    .meadow { height: 45px; }
    .tulip { width: 23px; height: calc(var(--height) * .55); bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .fishing-float { animation: none; }
    .reservoir-wave, .reservoir-ripples, .river-current, .outlet-current, .outlet-foam { animation: none; }
    .windmill-sails { animation: none; }
    .falling-background { display: none; }
    .falling-item { animation: none; }
    *, *::before, *::after { transition: none !important; }
    .website-button:hover, .website-button:hover svg { transform: none; }
}