<!doctype html>
<html lang="en" class="boot">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<title>Valley Blocks</title>
<meta name="description" content="A serene Tetris game inspired by Monument Valley — now with serverless room-link multiplayer" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Valley Blocks" />
<meta name="theme-color" content="#2b2640" />
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="./icons/icon-192.png" />
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="stylesheet" href="./style.css" />
<style>
/* Boot splash: shown only while <html> carries .boot (invite links keep
it up until the lobby/join gate is ready; plain boots drop it at once).
Self-contained styling with fallbacks — it renders before the app CSS
variables exist, mirroring the .overlay/.sheet look from styles.css. */
#splash {
display: none;
}
html.boot #splash {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(180deg, var(--sky-top, #ffe3c8), var(--sky-bottom, #f3a6a0));
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
sans-serif;
color: var(--text, #5b4358);
}
html.boot #app {
visibility: hidden;
}
/* social-kit's paste chip floats at z-index 9998 — keep it under wraps
while the splash owns the screen */
html.boot .soc-joinchip {
display: none !important;
}
#splash .splash-title {
font-size: 2.3rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.1;
}
#splash #splashmsg {
margin-top: 14px;
color: var(--text-dim, #a08698);
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.16em;
text-transform: uppercase;
min-height: 1.2em;
}
</style>
</head>
<body>
<div id="splash" aria-hidden="true">
<div>
<div class="splash-title">Valley Blocks</div>
<div id="splashmsg"></div>
</div>
</div>
<div id="app"></div>
<script defer src="./assets/main.js"></script>
</body>
</html>