<!doctype html>
<html lang="en" class="boot">
<head>
<meta charset="utf-8">
<title>SÉANCE</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="#0d0a14">
<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="SÉANCE">
<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='6' fill='%230d0a14'/%3E%3Crect x='13' y='15' width='6' height='11' rx='1.5' fill='%23e8dbc5'/%3E%3Cellipse cx='16' cy='10' rx='3' ry='4.5' fill='%23ffb347'/%3E%3C/svg%3E">
<link rel="manifest" href="./manifest.webmanifest">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="fog"></div>

<div id="hud">
  <div id="logo">SÉANCE</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.offline">offline</span></div>
</div>

<main id="stage">
  <!-- walk phase: pick the room you've walked to -->
  <section id="scWalk" class="scene hidden">
    <div id="bellhead">
      <div id="belltitle">BELL I</div>
      <div id="ring"><span id="ringnum"></span></div>
    </div>
    <div id="mediumme" class="notice hidden"></div>
    <div id="mediuminfo" class="notice dim hidden"></div>
    <div id="roomcards"></div>
    <div id="walkstatus" class="hint"></div>
  </section>

  <!-- reveal: where the ghost went -->
  <section id="scReveal" class="scene hidden">
    <div id="hauntline"></div>
    <div id="revealcards"></div>
    <div id="revealsub" class="hint"></div>
  </section>
</main>

<!-- 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">SÉANCE</div>
    <p id="splashmsg" class="sub"></p>
  </div>
</div>

<!-- join screen -->
<div id="ovJoin" class="overlay">
  <div class="panel">
    <div class="title">SÉANCE</div>
    <div class="sub" data-i18n="join.sub">a haunted parlour game for one house</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">Take a seat</button>
    <div class="hint"><span data-i18n="join.hint.gather">gather everyone in a home with three rooms</span><br>
      <span data-i18n="join.hint.bell">each bell: walk to a room, tap it on your phone</span><br>
      <span data-i18n="join.hint.ghost">the ghost sweeps one room — it favours crowds</span><br>
      <span data-i18n="join.hint.win">lose all 3 candles and you fade · last light wins</span></div>
  </div>
</div>

<!-- lobby -->
<div id="ovLobby" class="overlay hidden">
  <div class="panel">
    <div class="sub" data-i18n="lobby.sub">guests at the table</div>
    <div id="roster"></div>
    <div class="legend">
      <span>📚 <span data-i18n="room.study">The Study</span></span><span>🛋️ <span data-i18n="room.parlour">The Parlour</span></span><span>🍷 <span data-i18n="room.cellar">The Cellar</span></span>
    </div>
    <div class="hint"><span data-i18n="join.hint.bell">each bell: walk to a room, tap it on your phone</span><br>
      <span data-i18n="join.hint.ghost">the ghost sweeps one room — it favours crowds</span><br>
      <span data-i18n="join.hint.win">lose all 3 candles and you fade · last light wins</span></div>
    <div class="hint"><span data-i18n="lobby.agree.1">agree out loud which real room of the house is which —</span><br>
      <span data-i18n="lobby.agree.2">then honour your feet: tap only the room you truly stand in</span></div>
    <button id="startbtn" class="big hidden" data-i18n="lobby.start">Begin the séance</button>
    <div id="waitmsg" class="hint" data-i18n="lobby.wait">waiting for the conductor to ring the bell…</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 may sit</div>
  </div>
</div>

<!-- séance start / end messages -->
<div id="ovMsg" class="overlay soft hidden">
  <div style="display:flex;flex-direction:column;gap:14px;align-items:center">
    <div id="bigmsg"></div>
    <div id="submsg"></div>
  </div>
</div>

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

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