<!DOCTYPE html>
<html lang="en">
<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" />
<meta name="theme-color" content="#1b5ba8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Mykonos Island Voxels</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="loading-screen">
<div class="loading-card">
<div class="loading-logo"></div>
<div class="loading-title">Mykonos Island Voxels</div>
<div class="loading-sub">Generating asset pack…</div>
<div class="loading-bar"><div class="loading-fill" id="loading-fill"></div></div>
<div class="loading-status" id="loading-status">warming the kilns</div>
</div>
</div>
<div id="app" class="hidden">
<canvas id="game-canvas"></canvas>
<header id="title-card">
<div class="title-logo"></div>
<div class="title-text">
<h1>Mykonos Island Voxels</h1>
<p>Build beautiful Mediterranean voxel worlds</p>
</div>
</header>
<aside id="toolbar"></aside>
<section id="palette">
<nav id="palette-tabs"></nav>
<div id="palette-grid"></div>
</section>
<section id="hud">
<div class="hud-row">
<div class="hud-clock">
<span class="sun-icon"></span>
<span id="hud-time">10:42</span>
</div>
</div>
<div class="hud-toggles">
<label class="toggle"><span>Shadows</span><input type="checkbox" id="toggle-ao" checked /><span class="switch"></span></label>
<label class="toggle"><span>Grid</span><input type="checkbox" id="toggle-grid" /><span class="switch"></span></label>
<label class="toggle"><span>Borders</span><input type="checkbox" id="toggle-borders" checked /><span class="switch"></span></label>
</div>
<div class="hud-layers">Layers</div>
</section>
<details id="instructions" aria-label="Controls help">
<summary class="ins-summary">
<span class="ins-badge" aria-hidden="true">?</span>
<span class="ins-summary-label">Controls</span>
<span class="ins-summary-hint" aria-hidden="true">click to open</span>
</summary>
<div class="ins-grid ins-grid--mouse">
<span class="key">Click</span><span>Place selected asset</span>
<span class="key">Drag</span><span>Brush place across cells</span>
<span class="key">Right click</span><span>Erase</span>
<span class="key">Right drag</span><span>Brush erase</span>
<span class="key">Shift drag</span><span>Pan camera</span>
<span class="key">Wheel</span><span>Zoom</span>
<span class="key">H / V</span><span>Flip preview</span>
<span class="key">E</span><span>Toggle erase mode</span>
<span class="key">G</span><span>Toggle grid</span>
<span class="key">1-5</span><span>Switch categories</span>
<span class="key">S / R</span><span>Save / reset</span>
</div>
<div class="ins-grid ins-grid--touch">
<span class="key">Tap</span><span>Place selected asset</span>
<span class="key">Drag</span><span>Brush place across cells</span>
<span class="key">Long-press</span><span>Erase tile under finger</span>
<span class="key">Pinch</span><span>Zoom in / out</span>
<span class="key">Two-finger drag</span><span>Pan camera</span>
<span class="key">Tabs</span><span>Switch asset categories</span>
</div>
</details>
<div id="toast"></div>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>