<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HiveWorm — saturday morning meadow</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="HiveWorm — a P2P life-sim worm running on the HiveRelay network." />
<meta name="theme-color" content="#7cba5f" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- Splash: shown until first state arrives -->
<div id="splash">
<div class="splash-bg">
<!-- decorative SVG sky in CSS-friendly absolute positions -->
<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
style="position:absolute; inset:0; width:100%; height:100%;">
<!-- sun with smile -->
<g transform="translate(1380 130)">
<circle r="62" fill="#ffd54f" stroke="#1f1d2b" stroke-width="6"/>
<!-- rays -->
<g stroke="#1f1d2b" stroke-width="6" stroke-linecap="round">
<line x1="-90" y1="0" x2="-72" y2="0"/>
<line x1="90" y1="0" x2="72" y2="0"/>
<line x1="0" y1="-90" x2="0" y2="-72"/>
<line x1="0" y1="90" x2="0" y2="72"/>
<line x1="-64" y1="-64" x2="-52" y2="-52"/>
<line x1="64" y1="-64" x2="52" y2="-52"/>
<line x1="-64" y1="64" x2="-52" y2="52"/>
<line x1="64" y1="64" x2="52" y2="52"/>
</g>
<!-- face -->
<circle cx="-22" cy="-8" r="6" fill="#1f1d2b"/>
<circle cx="22" cy="-8" r="6" fill="#1f1d2b"/>
<path d="M-22 18 Q0 36 22 18" fill="none" stroke="#1f1d2b" stroke-width="6" stroke-linecap="round"/>
</g>
<!-- cloud 1 -->
<g transform="translate(220 220)" fill="#ffffff" stroke="#1f1d2b" stroke-width="5">
<ellipse cx="0" cy="0" rx="42" ry="26"/>
<ellipse cx="38" cy="-8" rx="34" ry="22"/>
<ellipse cx="74" cy="4" rx="28" ry="20"/>
<ellipse cx="-30" cy="6" rx="26" ry="18"/>
</g>
<!-- cloud 2 -->
<g transform="translate(880 320)" fill="#ffffff" stroke="#1f1d2b" stroke-width="5">
<ellipse cx="0" cy="0" rx="36" ry="22"/>
<ellipse cx="34" cy="-6" rx="28" ry="20"/>
<ellipse cx="-26" cy="4" rx="22" ry="16"/>
</g>
<!-- distant hills -->
<path d="M0 720 Q200 640 400 700 Q600 760 820 680 Q1040 600 1240 700 Q1440 780 1600 720 L1600 900 L0 900 Z"
fill="#5fa64e" stroke="#1f1d2b" stroke-width="5"/>
<path d="M0 800 Q260 740 520 790 Q780 840 1080 770 Q1340 720 1600 810 L1600 900 L0 900 Z"
fill="#7cba5f" stroke="#1f1d2b" stroke-width="5"/>
</svg>
</div>
<div class="splash-card">
<!-- waving pixel worm -->
<svg class="splash-art" viewBox="0 0 200 200" aria-hidden="true">
<!-- shadow on grass -->
<ellipse cx="100" cy="172" rx="62" ry="9" fill="rgba(31,29,43,0.28)"/>
<!-- worm body — 6 chunky rounded squares, wave shape -->
<g stroke="#5a1a3d" stroke-width="3" stroke-linejoin="round">
<rect x="22" y="120" width="26" height="26" rx="6" fill="#ff5e9c"/>
<rect x="46" y="108" width="26" height="26" rx="6" fill="#ff5e9c"/>
<rect x="70" y="100" width="26" height="26" rx="6" fill="#ff5e9c"/>
<rect x="94" y="100" width="26" height="26" rx="6" fill="#ff5e9c"/>
<rect x="118" y="108" width="26" height="26" rx="6" fill="#ff5e9c"/>
<rect x="142" y="120" width="26" height="26" rx="6" fill="#ff5e9c"/>
</g>
<!-- top highlights -->
<g fill="rgba(255,255,255,0.45)">
<rect x="26" y="123" width="18" height="5" rx="2"/>
<rect x="50" y="111" width="18" height="5" rx="2"/>
<rect x="74" y="103" width="18" height="5" rx="2"/>
<rect x="98" y="103" width="18" height="5" rx="2"/>
<rect x="122" y="111" width="18" height="5" rx="2"/>
<rect x="146" y="123" width="18" height="5" rx="2"/>
</g>
<!-- head face on the rightmost segment -->
<g transform="translate(155 133)">
<circle cx="-3" cy="-6" r="5" fill="white" stroke="#1f1d2b" stroke-width="2"/>
<circle cx="9" cy="-6" r="5" fill="white" stroke="#1f1d2b" stroke-width="2"/>
<circle cx="-2" cy="-5" r="2.2" fill="#1f1d2b"/>
<circle cx="10" cy="-5" r="2.2" fill="#1f1d2b"/>
<!-- mouth — small smile -->
<path d="M-2 4 Q4 8 10 4" fill="none" stroke="#1f1d2b" stroke-width="2.2" stroke-linecap="round"/>
</g>
<!-- waving little arm coming off head -->
<g transform="translate(170 110)">
<path d="M0 12 Q-4 -4 14 -12" fill="none" stroke="#5a1a3d" stroke-width="4" stroke-linecap="round"/>
<circle cx="14" cy="-12" r="6" fill="#ff5e9c" stroke="#5a1a3d" stroke-width="3"/>
</g>
</svg>
<h1 class="splash-title">HiveWorm</h1>
<p class="splash-msg">loading meadow</p>
</div>
</div>
<!-- Game canvas -->
<canvas id="world"></canvas>
<!-- KO / death banner overlay -->
<div id="ko-banner" class="hidden">K.O.!</div>
<!-- HUD -->
<div id="hud" class="hidden">
<!-- Top-left: score -->
<div class="hud-corner hud-tl">
<div class="panel score-card">
<div class="score-label">length</div>
<div id="score" class="score-num">0</div>
</div>
</div>
<!-- Top-right: mini-map -->
<div class="hud-corner hud-tr">
<div class="panel mini-card">
<canvas id="mini-map" width="140" height="140"></canvas>
<div class="mini-stats">
<span id="worm-count">0</span> worms
</div>
</div>
</div>
<!-- Bottom-left: identity / status -->
<div class="hud-corner hud-bl">
<div class="panel ident-card">
<div class="ident-row">
<span class="ident-label">you:</span>
<span id="pubkey-label" class="ident-pubkey">—</span>
</div>
<div class="ident-row">
<span id="status" class="ident-status" data-kind="ok">connecting…</span>
</div>
<div class="ident-row">
<span class="ident-label">cooldown:</span>
<span id="cooldown">ready</span>
</div>
<div class="ident-row buttons-row">
<button id="backup-btn" class="mini-btn" title="Download a backup of your worm key">backup</button>
<button id="import-btn" class="mini-btn" title="Restore a worm from a backup file">import</button>
<input id="import-input" type="file" accept="application/json,.json" hidden />
</div>
</div>
</div>
<!-- Bottom-right: mute -->
<div class="hud-corner hud-br">
<button id="mute-btn" class="mute-btn" aria-label="Toggle audio">♪ ON</button>
</div>
<!-- Bottom-center: spawn / respawn / hint -->
<div class="hud-bottom">
<button id="spawn-btn" class="big-btn">SPAWN</button>
<button id="respawn-btn" class="big-btn hidden">RESPAWN</button>
<div id="move-hint" class="move-hint hidden">arrows or WASD to wiggle</div>
</div>
<!-- First-load tooltip -->
<div id="first-tooltip" class="hidden">
<div class="tooltip-arrow"></div>
arrows to move · eat dots · grow
</div>
<!-- Floating hints / toasts -->
<div id="hint" class="hint hidden"></div>
<div id="reason-toast" class="reason-toast hidden"></div>
<!-- Touch directional pad host (mobile only) -->
<div id="touch-pad-host" class="hidden"></div>
</div>
<!-- Game scripts (ES modules) -->
<script type="module" src="./game.js"></script>
</body>
</html>