:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #060a12;
  color: #f8f6ed;
  --ink: #130827;
  --mist: #d8cdea;
  --blue: #3a68ff;
  --aqua: #51f7ed;
  --pink: #ff4eb8;
  --orange: #ff8a3d;
  --road: #211041;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 82% 5%, #ff4eb844 0, transparent 28rem), radial-gradient(circle at 20% 18%, #4cf5ed3b 0, transparent 30rem), linear-gradient(155deg, #15072a, #09285a 48%, #ed4d9d 140%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }

main { overflow: clip; }
.hero { position: relative; min-height: 46rem; padding: 3.5rem clamp(1.4rem, 6vw, 6rem) 5rem; display: grid; align-content: center; isolation: isolate; }
.neon-water-district { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #18042b99 0 46%, transparent 72%), radial-gradient(circle at 68% 27%, #51f7ed44, transparent 23rem); }
.arcade-tower { position: absolute; bottom: 0; width: clamp(5rem, 13vw, 12rem); border: .3rem solid #251042; border-bottom: 0; border-radius: .8rem .8rem 0 0; background: repeating-linear-gradient(0deg, #51f7ed 0 .55rem, transparent .55rem 1.05rem), repeating-linear-gradient(90deg, #233073 0 .8rem, #561858 .8rem 1.15rem); box-shadow: inset 0 0 0 .25rem #ff4eb8, 0 0 2.5rem #ff4eb866; opacity: .7; }
.arcade-tower i { display: block; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 1.1rem, #fff4a3bb 1.1rem 1.35rem); mix-blend-mode: screen; }
.tower-a { left: -2rem; height: 48%; transform: perspective(22rem) rotateY(24deg); }
.tower-b { left: 19%; height: 66%; background: repeating-linear-gradient(0deg, #ff8a3d 0 .55rem, #3a68ff .55rem 1.05rem); }
.tower-c { right: 20%; height: 57%; background: repeating-linear-gradient(0deg, #a6ff5b 0 .55rem, #203b84 .55rem 1.05rem); }
.tower-d { right: -3rem; height: 76%; transform: perspective(22rem) rotateY(-21deg); }
.elevated-way { position: absolute; right: -8%; bottom: 19%; width: 76%; height: 2.6rem; transform: skewY(-8deg); border-top: .5rem solid #ff8a3d; border-bottom: .3rem solid #51f7ed; background: repeating-linear-gradient(90deg, #381563 0 2rem, #ff4eb8 2rem 2.35rem); box-shadow: 0 .7rem 1.5rem #05001999; }
.elevated-way i { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 2.6rem, #ffec79 2.6rem 3rem); opacity: .75; }
.water-beam { position: absolute; bottom: 19%; width: 28rem; height: 5rem; border-radius: 100%; border-top: .35rem solid #51f7ed; filter: drop-shadow(0 0 .7rem #51f7ed); opacity: .6; transform: rotate(-18deg); }
.beam-a { left: -7rem; }
.beam-b { right: -10rem; transform: rotate(13deg); border-color: #ff4eb8; filter: drop-shadow(0 0 .7rem #ff4eb8); }
.bottle-billboard { position: absolute; right: 36%; bottom: 47%; display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; border: .25rem solid #fff4a3; border-radius: .7rem; background: #ff4eb8; color: #fff4a3; font-size: 1.25rem; font-weight: 900; box-shadow: 0 0 2rem #ff4eb8; transform: rotate(-5deg); }
.hero-bottle-scene { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.creator-portrait { position: absolute; z-index: 2; top: clamp(1rem, 4vw, 3.1rem); right: clamp(1rem, 5vw, 5.5rem); width: clamp(8.5rem, 18vw, 13.5rem); margin: 0; padding: .36rem; border: 1px solid #f3c5ff; border-radius: 1.15rem; background: linear-gradient(145deg, #f1d7ffbb, #30105aaa); box-shadow: 0 0 0 .12rem #8b2cff, 0 0 1.35rem #b837ff, 0 0 3.6rem #6b1ee8cc, 0 1.2rem 2rem #02010bcc; backdrop-filter: blur(8px); transform: rotate(3deg); animation: portrait-aura 4.4s ease-in-out infinite; }
.creator-portrait img { display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: .84rem .84rem .38rem .38rem; object-fit: cover; object-position: center top; }
.creator-portrait figcaption { padding: .45rem .25rem .17rem; color: #fff; font-size: clamp(.62rem, 1.2vw, .78rem); font-weight: 900; letter-spacing: .02em; line-height: 1.1; text-align: center; text-shadow: 0 .08rem .35rem #1a0638; }
.creator-portrait figcaption span { display: block; margin-bottom: .13rem; color: #bffcff; font-size: .62em; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { margin: 0 0 .8rem; color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 9ch; margin-bottom: 1rem; font-size: clamp(4rem, 12vw, 8.5rem); line-height: .82; letter-spacing: -.08em; text-transform: uppercase; }
h1 em { color: var(--aqua); font-style: normal; text-shadow: 0 0 2rem #51f7edaa; }
.tagline { max-width: 34rem; margin-bottom: 2rem; color: var(--mist); font-size: clamp(1rem, 2.6vw, 1.3rem); line-height: 1.5; }

.float-bottle, .bottle-player-visual { position: relative; display: block; border: 2px solid #c7f5ffcc; border-radius: 30% 30% 25% 25% / 12% 12% 16% 16%; background: linear-gradient(115deg, #ffffffaa, #78dfff40 28%, #1376bb80 78%); box-shadow: inset 1rem 0 1.5rem #e8ffff44, 0 1.5rem 4rem #1ca5ff55; }
.float-bottle::before, .bottle-player-visual::before { content: ''; position: absolute; width: 46%; height: 12%; left: 27%; top: -13%; border-radius: .22rem .22rem 0 0; background: #e8ffff; box-shadow: 0 -.15rem 0 #2f94cf; }
.float-bottle { position: absolute; width: 5rem; aspect-ratio: .52; transform-style: preserve-3d; animation: bottle-drift 8s ease-in-out infinite; }
.bottle-one { right: 12%; top: 13%; transform: rotate(24deg) rotateY(35deg); }
.bottle-two { right: 33%; bottom: 10%; width: 3rem; opacity: .7; animation-delay: -2s; }
.bottle-three { left: 8%; top: 32%; width: 2.2rem; opacity: .55; animation-delay: -5s; }
.spray { position: absolute; width: 18rem; height: 7rem; border-top: 2px solid #9beaffaa; border-radius: 50%; filter: drop-shadow(0 0 .7rem #54cfff); animation: spray-pulse 4s ease-in-out infinite; }
.spray-one { right: 0; top: 23%; transform: rotate(18deg); }
.spray-two { left: -8rem; bottom: 12%; transform: rotate(50deg); animation-delay: -1.5s; }

.music-player { width: min(100%, 37rem); display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; border: 1px solid #b0edff55; border-radius: 1.2rem; background: #081320dd; box-shadow: 0 1rem 4rem #0008; backdrop-filter: blur(14px); transition: transform .35s ease, background .35s ease; }
.bottle-player-visual { flex: 0 0 3.1rem; width: 3.1rem; aspect-ratio: .55; overflow: hidden; }
.bottle-cap { position: absolute; left: 29%; top: -10%; width: 42%; height: 13%; background: #d7fbff; }
.bottle-label { position: absolute; inset: 39% 0 auto; text-align: center; font-weight: 900; color: #fff; letter-spacing: -.1em; text-shadow: 0 1px 4px #00223d; }
.bottle-water { position: absolute; inset: 61% 0 0; background: linear-gradient(#36c8ffdd, #1166d4ee); }
.music-player-content { min-width: 0; flex: 1; }
.music-credit { margin-bottom: .2rem; color: var(--aqua); font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
.music-track { margin-bottom: .1rem; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.music-status { min-height: 1.2em; margin-bottom: .55rem; color: var(--mist); font-size: .78rem; }
.music-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.music-controls button { min-height: 2.25rem; border: 1px solid #51f7ed77; border-radius: .55rem; background: #55236e; color: #fff; padding: .35rem .55rem; }
.music-controls button:hover { background: #ff4eb8; }
.volume-control { display: flex; gap: .35rem; align-items: center; color: var(--mist); font-size: .7rem; }
.volume-control input { width: 4.5rem; accent-color: var(--aqua); }
.music-dock { min-height: 0; padding: 0 clamp(1.4rem, 6vw, 6rem); background: #0a111d; }
.music-dock:has(#music-player.is-docked) { min-height: 6.2rem; padding-top: .9rem; padding-bottom: .9rem; }
#music-player.is-docked { width: min(100%, 31rem); transform: scale(.86); transform-origin: left center; background: #0a1c2ddd; }

.play-section, .game-details, .build-note { padding: 5rem clamp(1.4rem, 6vw, 6rem); }
.play-section { background: linear-gradient(180deg, #ff4eb8, #551687 10%, #082b69 66%, #0f123c); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
h2 { max-width: 18ch; margin-bottom: 1.6rem; font-size: clamp(2.2rem, 6vw, 4.7rem); line-height: .95; letter-spacing: -.055em; }
.game-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: .2rem solid #51f7ed; border-radius: 1.5rem; background: linear-gradient(135deg, #092e85, #32136b 42%, #ff4eb8), repeating-linear-gradient(90deg, #0e1d2d, #0e1d2d 4rem, #102337 4rem, #102337 8rem); box-shadow: inset 0 0 5rem #0009, 0 1.3rem 0 #ff8a3d, 0 2rem 4rem #11002099; }
.game-stage::before { content: ''; position: absolute; width: 140%; height: 4rem; transform: rotate(-8deg); background: repeating-linear-gradient(90deg, transparent 0 1.4rem, #fff3cd 1.4rem 2.9rem); opacity: .4; }
.game-stage iframe { width: 100%; height: 100%; border: 0; z-index: 1; }
.demo-launch-card { position: relative; z-index: 1; display: grid; justify-items: center; width: min(88%, 34rem); padding: clamp(1.4rem, 4vw, 3.2rem); border: 1px solid #b5fbff99; border-radius: 1.1rem; background: linear-gradient(155deg, #07142de8, #310d55de); box-shadow: 0 0 2.5rem #40f9ff55, inset 0 1px #fff8; text-align: center; }
.demo-launch-card .eyebrow { margin-bottom: .6rem; color: #fff1a5; }
.demo-launch-card h3 { margin: 0 0 .75rem; font-size: clamp(1.65rem, 5vw, 3rem); line-height: .95; letter-spacing: -.045em; }
.demo-launch-card > p:not(.eyebrow):not(.demo-status) { max-width: 36ch; margin: 0 0 1.25rem; color: var(--mist); line-height: 1.45; }
.demo-launch { width: min(100%, 24rem); padding: .95rem 1.25rem; border: .13rem solid #f9fcff; border-radius: 99rem; background: linear-gradient(90deg, #38e9ff, #266bff 53%, #ed4dca); box-shadow: 0 .35rem 1rem #0007, 0 0 1.7rem #69f7ff88; color: #fff; font: inherit; font-size: clamp(1.05rem, 3vw, 1.35rem); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.demo-launch:hover, .demo-launch:focus-visible { filter: brightness(1.14); transform: translateY(-.15rem) scale(1.02); }
.demo-launch:focus-visible { outline: .2rem solid #fff6ae; outline-offset: .25rem; }
.demo-status { position: relative; z-index: 1; margin: 1rem 0 0; color: var(--mist); font-size: .83rem; text-align: center; }
.play-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--mist); }
.play-actions p { margin: 0; font-size: .85rem; }
.game-details { background: linear-gradient(135deg, #0c1857, #711971 55%, #f25a56); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.detail-grid article { padding: 1.3rem; border-top: 1px solid #a9bccd55; }
.detail-grid h3 { margin-bottom: .5rem; color: var(--aqua); }
.detail-grid p { margin: 0; color: var(--mist); line-height: 1.5; }
.build-note { background: radial-gradient(circle at 85% 30%, #ffbe4a, #fb4aa9 35%, #152e7b 72%); }
.credits { padding: 3rem clamp(1.4rem, 6vw, 6rem); border-top: 1px solid #a9bccd33; background: #05080e; }
.creator-credit { margin-bottom: .55rem; font-weight: 800; }
.technology-acknowledgement { max-width: 48rem; margin-bottom: 0; color: #8394a5; font-size: .65rem; line-height: 1.5; }

.creator-mark { position: relative; z-index: 0; width: min(100%, 42rem); margin: .5rem 0 2.25rem; pointer-events: none; transform-style: preserve-3d; animation: depth-drift 6s ease-in-out infinite; }
.creator-mark__text { margin: 0; color: #edffff; font-size: clamp(1.25rem, 4vw, 2.8rem); font-weight: 900; line-height: .88; letter-spacing: -.06em; text-transform: uppercase; text-shadow: .07em .07em 0 #ff4eb8, .14em .14em 0 #3a68ff, .21em .21em 1.4rem #130827cc; }
.creator-mark__text strong { display: inline-block; margin-top: .15rem; background: linear-gradient(100deg, #fff7cb 0 12%, #51f7ed 30%, #fff 47%, #ff8a3d 63%, #ff4eb8 85%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: light-sweep 4s linear infinite; }

@keyframes bottle-drift { 50% { translate: 0 -1.2rem; rotate: 4deg; } }
@keyframes spray-pulse { 50% { opacity: .35; scale: 1.12; } }
@keyframes depth-drift { 50% { transform: translate3d(.25rem, -.45rem, 0) rotateX(4deg) rotateY(-3deg); } }
@keyframes light-sweep { to { background-position: 220% center; } }
@keyframes portrait-aura { 50% { box-shadow: 0 0 0 .12rem #a943ff, 0 0 2.2rem #cf5dff, 0 0 4.3rem #6b1ee8dd, 0 1.2rem 2rem #02010bcc; transform: translateY(-.32rem) rotate(2deg); } }
@media (max-width: 42rem) { .hero { min-height: 42rem; padding-top: 10rem; } .creator-portrait { top: .85rem; right: .85rem; width: clamp(7.2rem, 31vw, 9.2rem); } .play-actions, .detail-grid { display: grid; grid-template-columns: 1fr; } .float-bottle { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .creator-mark, .creator-mark__text strong, .creator-portrait { animation: none !important; } }