<!doctype html>
<html lang="en" class="boot">
<head>
<meta charset="utf-8">
<title>LAMPION</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#191c38">
<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="LAMPION">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23191c38'/%3E%3Cellipse cx='16' cy='24' rx='11' ry='4' fill='%235d4a79'/%3E%3Cellipse cx='16' cy='20' rx='8' ry='3' fill='%23705a86'/%3E%3Cellipse cx='16' cy='16' rx='5' ry='2' fill='%238f74a0'/%3E%3Cellipse cx='16' cy='9' rx='3.4' ry='4.4' fill='%23ffb85c'/%3E%3Crect x='13.8' y='4' width='4.4' height='1.6' fill='%23c98736'/%3E%3C/svg%3E">
<link rel="manifest" href="./manifest.webmanifest">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="stage"><div id="arena"><canvas id="game"></canvas></div></div>

<div id="hud">
  <div id="logo">LAMPION</div>
  <div id="clock" class="hidden"></div>
  <div id="chips"></div>
  <button id="copybtn" title="Copy invite link" data-i18n="hud.invite" data-i18n-attr="title:hud.invite.title">⧉ invite</button>
  <div id="status"><span id="statdot"></span><span id="stattext" data-i18n="hud.waking">waking…</span></div>
</div>

<!-- boot splash: shown from first paint until main.ts decides gate vs auto-join -->
<div id="ovSplash" class="overlay">
  <div class="panel">
    <div class="title">LAMP<span class="p">ION</span></div>
    <p id="splashmsg" class="sub"></p>
  </div>
</div>

<!-- join screen -->
<div id="ovJoin" class="overlay">
  <div class="panel">
    <div class="title">LAMP<span class="p">ION</span></div>
    <div class="sub" data-i18n="join.sub">a night climb on the summer hills</div>
    <input id="nick" maxlength="32" placeholder="your name" autocomplete="off" autocapitalize="off" spellcheck="false" data-i18n-attr="placeholder:join.nick">
    <button id="playbtn" class="big" data-i18n="join.play">Step onto the hill</button>
    <div class="hint" id="joinhint"><span id="joinhow" data-i18n="join.hint.keys">← → walk the ring · ↑ climb a lit stair · Q / E crank the ring under everyone's feet</span><br>
      <span data-i18n="join.hint.turn">each level of the hill turns on its own — time your climb, or crank to force it</span><br>
      <span data-i18n="join.hint.win">first lantern on the summit stage takes the round · first to 3 rounds headlines</span></div>
  </div>
</div>

<!-- lobby -->
<div id="ovLobby" class="overlay hidden">
  <div class="panel">
    <div class="sub" data-i18n="lobby.sub">lanterns at the campground</div>
    <div id="roster"></div>
    <button id="startbtn" class="big hidden" data-i18n="lobby.start">Light the lanterns</button>
    <div id="waitmsg" class="hint" data-i18n="lobby.wait">waiting for the host to begin…</div>
    <div class="hint"><span id="lobbyhow" data-i18n="join.hint.keys">← → walk the ring · ↑ climb a lit stair · Q / E crank the ring under everyone's feet</span></div>
    <button id="sharebtn" class="big" data-i18n="lobby.share">📤 invite friends</button>
    <div class="hint" data-i18n="lobby.invite-hint">anyone with the link can join — the link is the key</div>
  </div>
</div>

<!-- round / match result -->
<div id="ovMsg" class="overlay hidden" style="background:#191c3866">
  <div style="display:flex;flex-direction:column;gap:14px;align-items:center">
    <div id="bigmsg"></div>
    <div id="submsg"></div>
  </div>
</div>

<div id="countnum" class="hidden"></div>
<div id="tapzones" class="hidden"><div data-i18n="tap.help">◀ ▶ walk · ▲ climb · ⟲ ⟳ turn your ring</div></div>

<!-- in-round controls -->
<div id="controls" class="hidden">
  <button id="btnRotL" class="ctl rot" title="turn ring left (Q)" data-i18n-attr="title:ctl.rot-left">⟲</button>
  <button id="btnL" class="ctl" title="walk left (←)" data-i18n-attr="title:ctl.left">◀</button>
  <button id="btnUp" class="ctl" title="climb (↑)" data-i18n-attr="title:ctl.up">▲</button>
  <button id="btnDown" class="ctl" title="descend (↓)" data-i18n-attr="title:ctl.down">▼</button>
  <button id="btnR" class="ctl" title="walk right (→)" data-i18n-attr="title:ctl.right">▶</button>
  <button id="btnRotR" class="ctl rot" title="turn ring right (E)" data-i18n-attr="title:ctl.rot-right">⟳</button>
</div>

<div id="toast"></div>

<script defer src="./assets/main.js"></script>
</body>
</html>