Jeu en ligne Roblox

33 Robloxx

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

11 February 2026

Intégrer le jeu SnowRider3D Unity (CDN)

17 September 2026

Les jeux de Milo

26 July 2025

Éditeur HTML en ligne | CodeCanvas - Outil de développement web gratuit

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="theme-color" content="#11151c">
  <title>Roblox Game</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@600;700;800;900&display=swap">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="game"></div>

<div id="loading" class="screen">
    <div class="loader"><span></span><span></span><span></span></div>
    <p>Building the world…</p>
  </div>

<div id="boot-error" class="screen hidden">
    <div class="panel error-card">
      <h2>Couldn't start the game</h2>
      <p>This game needs WebGL and an internet connection the first time it loads (to fetch the 3D engine). Try a recent version of Chrome, Edge, Firefox or Safari.</p>
    </div>
  </div>

<div id="title" class="screen">
    <div class="title-card">
      <h1 class="logo" aria-label="Blockverse">
        <span style="--c:#ff5a4f;--r:-6deg">R</span><span style="--c:#ff9a3d;--r:4deg">O</span><span style="--c:#ffd23d;--r:-3deg">B</span><span style="--c:#4fdc84;--r:5deg">L</span><span style="--c:#3db8ff;--r:-4deg">O</span><span style="--c:#7b6bff;--r:3deg">X</span>
      </h1>
      <div class="logo-sub">OBBY</div>
      <p class="tagline">Ten stages of lava, spinners, conveyors and bounce pads. How fast can you reach the golden finish?</p>
      <button id="btn-play" class="btn btn-primary btn-xl">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
        <span>Play</span>
      </button>
      <div id="title-progress" class="title-progress"></div>
      <div class="title-row">
        <button id="btn-title-avatar" class="btn btn-ghost">Avatar</button>
        <button id="btn-title-settings" class="btn btn-ghost">Settings</button>
      </div>
      <div class="controls-mini">
        <span><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> Move</span>
        <span><kbd>Space</kbd> Jump</span>
        <span><kbd>Right-drag</kbd> Camera</span>
        <span><kbd>Scroll</kbd> Zoom</span>
        <span><kbd>Shift</kbd> Shift lock</span>
      </div>
    </div>
  </div>

<div id="hud" class="hidden">
    <div id="topbar">
      <button id="btn-menu" class="hud-btn" title="Menu (Esc)" aria-label="Menu">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16v2.2H4zm0 4.9h16v2.2H4zm0 4.9h16V18H4z"/></svg>
      </button>
      <button id="btn-chat" class="hud-btn" title="Toggle chat" aria-label="Chat">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/></svg>
      </button>
      <button id="btn-shiftlock" class="hud-btn" title="Shift lock (Shift)" aria-label="Shift lock">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1V7a5 5 0 0 1 5-5zm0 2.2A2.8 2.8 0 0 0 9.2 7v3h5.6V7A2.8 2.8 0 0 0 12 4.2zM12 13a2 2 0 0 0-1 3.7V19h2v-2.3a2 2 0 0 0-1-3.7z"/></svg>
      </button>
    </div>

<div id="side">
      <div id="leaderboard" class="panel">
        <div class="lb-head"><span>People</span><span>Stage</span><span>Coins</span></div>
        <div id="lb-rows"></div>
      </div>
      <div id="healthbar" title="Health">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2.1 0 3.6 1.1 5.4 3 1.8-1.9 3.3-3 5.4-3 3.6 0 5.7 3.7 4.2 7.2C19.5 16.4 12 21 12 21z"/></svg>
        <div class="hb-track"><div id="health-fill"></div></div>
        <span id="health-text">100</span>
      </div>
      <div id="coin-counter" class="pill">
        <span class="coin-icon"></span>
        <span id="coin-text">0/0</span>
      </div>
    </div>

<div id="hint">
      <kbd>WASD</kbd> move · <kbd>Space</kbd> jump · <kbd>Right-drag</kbd> look · <kbd>Scroll</kbd> zoom · <kbd>Shift</kbd> shift lock · <kbd>R</kbd> reset · <kbd>/</kbd> chat
    </div>

<div id="menu" class="screen hidden">
    <div class="menu-card panel" role="dialog" aria-label="Game menu">
      <div class="menu-tabs">
        <button class="tab active" data-tab="settings">Settings</button>
        <button class="tab" data-tab="avatar">Avatar</button>
        <button class="tab" data-tab="help">Help</button>
      </div>

<div class="menu-body">
        <section id="tab-settings" class="tab-pane">
          <label class="row">
            <span>Graphics quality</span>
            <select id="set-quality">
              <option value="low">Low (no shadows)</option>
              <option value="medium">Medium</option>
              <option value="high">High</option>
            </select>
          </label>
          <label class="row">
            <span>Camera sensitivity <em id="val-sens"></em></span>
            <input id="set-sens" type="range" min="0.2" max="3" step="0.1">
          </label>
          <label class="row">
            <span>Field of view <em id="val-fov"></em></span>
            <input id="set-fov" type="range" min="50" max="100" step="1">
          </label>
          <label class="row">
            <span>Volume <em id="val-vol"></em></span>
            <input id="set-vol" type="range" min="0" max="1" step="0.05">
          </label>
          <label class="row toggle">
            <span>Music</span>
            <input id="set-music" type="checkbox"><i></i>
          </label>
          <label class="row toggle">
            <span>Shift lock switch</span>
            <input id="set-shiftlock" type="checkbox"><i></i>
          </label>
        </section>

<section id="tab-avatar" class="tab-pane hidden">
          <label class="row">
            <span>Display name</span>
            <input id="name-input" type="text" maxlength="20" autocomplete="off" spellcheck="false">
          </label>
          <div class="avatar-group"><h4>Skin</h4><div class="swatches" data-key="skin"></div></div>
          <div class="avatar-group"><h4>Shirt</h4><div class="swatches" data-key="shirt"></div></div>
          <div class="avatar-group"><h4>Pants</h4><div class="swatches" data-key="pants"></div></div>
          <div class="avatar-group"><h4>Face</h4><div class="swatches" data-key="face"></div></div>
        </section>

<section id="tab-help" class="tab-pane hidden">
          <div class="help-grid">
            <div><kbd>W A S D</kbd> / arrows</div><div>Move (relative to camera)</div>
            <div><kbd>Space</kbd></div><div>Jump — hold to keep hopping</div>
            <div><kbd>Right mouse</kbd> drag</div><div>Rotate camera</div>
            <div><kbd>Scroll</kbd> · <kbd>I</kbd> / <kbd>O</kbd></div><div>Zoom — zoom all the way in for first person</div>
            <div><kbd>Shift</kbd></div><div>Toggle shift lock (mouse-look, over-the-shoulder)</div>
            <div><kbd>R</kbd></div><div>Reset character to last checkpoint</div>
            <div><kbd>/</kbd> · <kbd>Tab</kbd></div><div>Chat · toggle leaderboard</div>
            <div><kbd>Esc</kbd></div><div>Open / close this menu</div>
          </div>
          <p class="help-note">Touch the numbered pads to save your progress. Red neon is deadly, green pads launch you, trusses can be climbed by walking into them, and the purple-blue blocks vanish shortly after you land on them. Type <b>/e dance</b> or <b>/e wave</b> in chat to emote.</p>
        </section>
      </div>

<div class="menu-foot">
        <button id="btn-reset" class="btn btn-danger">Reset Character</button>
        <button id="btn-restart" class="btn btn-ghost">Restart Obby</button>
        <button id="btn-resume" class="btn btn-primary">Resume</button>
      </div>
    </div>
  </div>

<div id="win" class="screen hidden">
    <div class="win-card panel">
      <svg class="win-trophy" viewBox="0 0 64 64" aria-hidden="true">
        <path fill="#ffcf3d" d="M18 6h28v8h10v6c0 8-6 14-13 15-2 5-6 8-9 9v8h10v6H20v-6h10v-8c-3-1-7-4-9-9C14 34 8 28 8 20v-6h10zm-4 14c0 4 3 8 6 9-1-3-2-6-2-9zm36 0h-4c0 3-1 6-2 9 3-1 6-5 6-9z"/>
        <path fill="#fff3b0" d="M24 10h4v18c-2-3-4-8-4-12z" opacity=".6"/>
      </svg>
      <h2>Obby Complete!</h2>
      <p class="win-sub">You conquered all ten stages.</p>
      <div class="win-stats">
        <div><span>Time</span><b id="win-time"></b></div>
        <div><span>Best</span><b id="win-best"></b></div>
        <div><span>Deaths</span><b id="win-deaths"></b></div>
        <div><span>Coins</span><b id="win-coins"></b></div>
      </div>
      <div class="win-actions">
        <button id="btn-again" class="btn btn-primary">Play Again</button>
        <button id="btn-explore" class="btn btn-ghost">Keep Exploring</button>
      </div>
    </div>
  </div>

CSS

/* ==========================================================
   Blockverse Obby — UI styles
   ========================================================== */
:root {
  --panel: rgba(16, 20, 28, 0.62);
  --panel-strong: rgba(14, 17, 24, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --blue: #3d8bff;
  --green: #2fbf62;
  --green-dark: #1f8a45;
  --red: #ff4d4d;
  --gold: #ffcf3d;
  --radius: 12px;
  --ui-font: 'Nunito', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --display-font: 'Lilita One', 'Arial Black', Impact, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #11151c;
  color: var(--text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}

#game, #game canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

.hidden { display: none !important; }

button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 2px 7px;
  margin: 0 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-width: 3px;
  font: 800 0.78em/1.4 var(--ui-font);
  color: #fff;
  text-align: center;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.pill svg { width: 18px; height: 18px; fill: currentColor; opacity: 0.85; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
}
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn svg { width: 22px; height: 22px; fill: currentColor; }
.btn-primary {
  background: linear-gradient(180deg, #43d878, var(--green));
  box-shadow: 0 4px 0 var(--green-dark), 0 10px 24px rgba(47, 191, 98, 0.35);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
.btn-danger {
  background: linear-gradient(180deg, #ff6b6b, #e23b3b);
  box-shadow: 0 4px 0 #a82626;
}
.btn-xl { font-size: 24px; padding: 16px 54px; border-radius: 16px; }
.btn-xl svg { width: 28px; height: 28px; }

/* ---------- Screens ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

#loading {
  z-index: 60;
  flex-direction: column;
  gap: 18px;
  background: radial-gradient(circle at 50% 40%, #233149, #0d1016 70%);
  font-weight: 800;
  color: var(--muted);
}
.loader { display: flex; gap: 10px; }
.loader span {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--blue);
  animation: hop 0.9s ease-in-out infinite;
}
.loader span:nth-child(2) { background: var(--gold); animation-delay: 0.12s; }
.loader span:nth-child(3) { background: var(--red); animation-delay: 0.24s; }
@keyframes hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-18px) rotate(90deg); }
}

#boot-error { z-index: 70; background: #0d1016; }
.error-card { max-width: 440px; padding: 28px; text-align: center; line-height: 1.5; }
.error-card h2 { margin-top: 0; font-family: var(--display-font); font-weight: 400; letter-spacing: 0.02em; }

/* ---------- Title ---------- */
#title {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10, 14, 22, 0.15), rgba(10, 14, 22, 0.75) 75%),
    linear-gradient(180deg, rgba(10, 14, 22, 0.1), rgba(10, 14, 22, 0.55));
}
.title-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  max-width: 980px;
  animation: rise 0.7s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }

.logo {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(3px, 0.6vw, 7px);
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(26px, 6.6vw, 76px);
  line-height: 1;
}
.logo span {
  display: inline-grid;
  place-items: center;
  width: 1.08em;
  height: 1.12em;
  border-radius: 0.14em;
  background: var(--c);
  color: #fff;
  transform: rotate(var(--r));
  text-shadow: 0 0.05em 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 -0.12em 0 rgba(0, 0, 0, 0.25),
    inset 0 0.07em 0 rgba(255, 255, 255, 0.35),
    0 0.12em 0.25em rgba(0, 0, 0, 0.35);
  animation: wobble 3.2s ease-in-out infinite;
}
.logo span:nth-child(odd) { animation-delay: -1.6s; }
@keyframes wobble {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50% { transform: rotate(calc(var(--r) * -1)) translateY(-0.06em); }
}
.logo-sub {
  margin-top: 10px;
  font-family: var(--display-font);
  font-size: clamp(30px, 5.4vw, 60px);
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  background: linear-gradient(180deg, #fff6c9, #ffcf3d 55%, #ff9f1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
}
.tagline {
  max-width: 520px;
  margin: 14px 0 26px;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.title-progress {
  min-height: 22px;
  margin-top: 16px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.title-row { display: flex; gap: 10px; margin-top: 12px; }
.controls-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 26px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#hud button, #hud input, #leaderboard, #chat { pointer-events: auto; }

#topbar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  gap: 8px;
}
.hud-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background 0.15s ease, transform 0.08s ease;
}
.hud-btn:hover { background: rgba(40, 48, 62, 0.8); }
.hud-btn:active { transform: scale(0.94); }
.hud-btn svg { width: 22px; height: 22px; fill: currentColor; }
.hud-btn.active { background: var(--blue); border-color: rgba(255, 255, 255, 0.3); }

#timer {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
}

#side {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#leaderboard { width: 100%; padding: 6px; font-size: 14px; }
.lb-head, .lb-row {
  display: grid;
  grid-template-columns: 1fr 50px 50px;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
}
.lb-head span:not(:first-child), .lb-row span:not(:first-child) { text-align: center; }
.lb-head {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}
.lb-row { border-radius: 8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-row.me { background: rgba(61, 139, 255, 0.28); }
.lb-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#leaderboard.collapsed #lb-rows { display: none; }

#healthbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#healthbar svg { width: 16px; height: 16px; fill: #ff5a5a; }
.hb-track { width: 130px; height: 9px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
#health-fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #36d26a, #8cf06b);
  transition: width 0.25s ease;
}

#coin-counter { font-size: 16px; }
.coin-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf3d 45%, #d18f00);
  box-shadow: inset 0 0 0 2px rgba(150, 95, 0, 0.6);
}
#coin-counter.pop { animation: pop 0.35s ease; }
@keyframes pop { 40% { transform: scale(1.25); } }

#chat {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 56px);
  left: max(12px, env(safe-area-inset-left));
  width: min(380px, 46vw);
  padding: 8px;
  background: rgba(16, 20, 28, 0.18);
  border-color: transparent;
  box-shadow: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
#chat.lit, #chat:hover { background: var(--panel); border-color: var(--line); }
#chat.collapsed { display: none; }
#chat-log {
  max-height: 170px;
  overflow-y: auto;
  padding: 2px 4px 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  scrollbar-width: thin;
}
.chat-line { padding: 1px 0; overflow-wrap: anywhere; }
.chat-line.system { color: #ffe9a3; }
.chat-name { font-weight: 900; }
#chat-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 700 13px var(--ui-font);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
#chat-input::placeholder { color: rgba(255, 255, 255, 0.5); }
#chat.typing #chat-input { border-color: var(--blue); background: rgba(0, 0, 0, 0.6); }

#banner {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  white-space: nowrap;
}
#banner.show { animation: banner 3.4s ease both; }
#banner-title {
  font-family: var(--display-font);
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: 0.04em;
  color: #fff;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3), 0 0 30px rgba(61, 139, 255, 0.55);
}
#banner-sub {
  margin-top: 4px;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
@keyframes banner {
  0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.9); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  20% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
}

#hint {
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  transition: opacity 1.2s ease;
}
#hint.fade { opacity: 0; }

/* ---------- Mobile controls ---------- */
#mobile { position: absolute; inset: 0; }
#joy-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48vw;
  height: 55vh;
  pointer-events: auto;
  touch-action: none;
}
#joy-base {
  position: absolute;
  left: 110px;
  top: calc(100% - 120px);
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 50%;
  background: rgba(16, 20, 28, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.25);
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
#joy-base.active { opacity: 1; }
#joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
#btn-jump {
  position: absolute;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(40px, env(safe-area-inset-bottom));
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(16, 20, 28, 0.45);
  color: #fff;
  display: grid;
  place-items: center;
  touch-action: none;
}
#btn-jump svg { width: 40px; height: 40px; fill: currentColor; }
#btn-jump.active { background: rgba(61, 139, 255, 0.7); transform: scale(0.94); }

/* ---------- Menu ---------- */
#menu { z-index: 40; background: rgba(6, 8, 12, 0.5); }
.menu-card {
  width: min(620px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel-strong);
  animation: rise 0.25s ease both;
}
.menu-tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1;
  padding: 12px 8px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: #fff; }
.tab.active { color: #fff; border-bottom-color: var(--blue); background: rgba(61, 139, 255, 0.1); }
.menu-body { padding: 16px 20px; overflow-y: auto; }
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}
.row:last-child { border-bottom: 0; }
.row em { font-style: normal; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.row select, .row input[type='text'] {
  min-width: 200px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 800 14px var(--ui-font);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.row select option { background: #1b212c; }
.row input[type='range'] { width: 220px; accent-color: var(--blue); }
.toggle { cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease;
  flex: none;
}
.toggle i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.toggle input:checked + i { background: var(--green); }
.toggle input:checked + i::after { transform: translateX(22px); }

.avatar-group { padding: 10px 0; }
.avatar-group h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 9px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: transform 0.1s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.selected { border-color: #fff; box-shadow: 0 0 0 3px var(--blue); }
.face-swatch { width: 52px; height: 52px; }
.face-swatch canvas { width: 100%; height: 100%; display: block; }

.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: center; font-weight: 700; }
.help-grid > div:nth-child(odd) { white-space: nowrap; }
.help-note { margin: 18px 0 4px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); font-weight: 600; }

.menu-foot { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.menu-foot .btn { flex: 1; }

/* ---------- Win ---------- */
#win { z-index: 45; background: radial-gradient(circle, rgba(6, 8, 12, 0.25), rgba(6, 8, 12, 0.7)); }
.win-card {
  width: min(480px, 92vw);
  padding: 28px 26px 24px;
  text-align: center;
  background: var(--panel-strong);
  animation: rise 0.5s cubic-bezier(.2, .9, .3, 1.3) both;
}
.win-trophy { width: 92px; height: 92px; filter: drop-shadow(0 6px 16px rgba(255, 207, 61, 0.55)); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.win-card h2 { margin: 8px 0 2px; font-family: var(--display-font); font-weight: 400; font-size: 40px; letter-spacing: 0.03em; color: var(--gold); }
.win-sub { margin: 0 0 18px; color: var(--muted); font-weight: 700; }
.win-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 22px; }
.win-stats div { padding: 10px 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); }
.win-stats span { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.win-stats b { display: block; margin-top: 4px; font-size: 17px; font-variant-numeric: tabular-nums; }
.win-actions { display: flex; gap: 10px; }
.win-actions .btn { flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  #side { width: 190px; }
  #leaderboard { font-size: 12px; }
  .lb-head, .lb-row { grid-template-columns: 1fr 40px 40px; padding: 4px 6px; }
  .hb-track { width: 80px; }
  #chat { width: min(280px, 56vw); }
  #chat-log { max-height: 96px; font-size: 12px; }
  #timer { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); font-size: 15px; }
  #hint { display: none; }
  .row { flex-wrap: wrap; }
  .row select, .row input[type='text'], .row input[type='range'] { width: 100%; min-width: 0; }
  .win-stats { grid-template-columns: repeat(2, 1fr); }
  .controls-mini { display: none; }
}
@media (max-width: 560px) {
  .hud-btn { width: 40px; height: 40px; }
  #side { width: 168px; gap: 6px; }
  #leaderboard { font-size: 11px; padding: 4px; }
  .lb-head { font-size: 9px; }
  .lb-head, .lb-row { grid-template-columns: 1fr 34px 34px; padding: 3px 5px; }
  .hb-track { width: 64px; }
  #chat { top: calc(max(12px, env(safe-area-inset-top)) + 50px); width: calc(100vw - 168px - 34px); }
  #chat-log { max-height: 84px; font-size: 11px; }
  #chat-input { font-size: 12px; padding: 6px 8px; }
  #banner { top: 30%; }
}
@media (max-height: 500px) {
  #chat-log { max-height: 70px; }
  .title-card { padding: 8px; }
  .tagline { margin: 8px 0 14px; }
}
@media (pointer: coarse) {
  .controls-mini { display: none; }
}

/* =====================================================================
   BLOCKVERSE OBBY — an original blocky 3D obstacle-course game
   Rendering: Three.js (r128). Physics, controls, world: custom code.
   Units are "studs"; gravity, walk speed and jump power follow the
   classic blocky-platformer feel (196.2 / 16 / 50).
   ===================================================================== */
(() => {
'use strict';

if (typeof THREE === 'undefined') {
  document.getElementById('boot-error').classList.remove('hidden');
  return;
}

// ---------------------------------------------------------------------
// Constants & helpers
// ---------------------------------------------------------------------
const V3 = THREE.Vector3;
const GRAVITY = 196.2;
const WALK_SPEED = 16;
const JUMP_POWER = 50;
const CLIMB_SPEED = 11;
const STEP_HEIGHT = 1.1;
const FIXED_DT = 1 / 120;
const LAVA_Y = -24;
const VOID_Y = -90;
const SAVE_KEY = 'blockverse-obby-save-v1';
const EPS = 0.002;

// ---------------------------------------------------------------------
// Game state
// ---------------------------------------------------------------------
const state = {
  started: false,
  paused: false,
  menuOpen: false,
  chatFocused: false,
  time: 0,
  runTime: 0,
  timerRunning: false,
  stage: 0,
  coins: 0,
  deaths: 0,
  won: false,
  bestTime: null,
  collected: new Set(),
  playerName: 'Player' + randInt(1000, 9999),
  settings: { quality: 'high', sensitivity: 1, fov: 70, volume: 0.7, music: true, shiftLock: true },
  avatar: { skin: '#f2c49b', shirt: '#e2483d', pants: '#2c3e66', face: 'smile' },
};

// ---------------------------------------------------------------------
// Renderer / scene / camera
// ---------------------------------------------------------------------
let renderer;
try {
  renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
} catch (e) {
  $('boot-error').classList.remove('hidden');
  return;
}
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
$('game').appendChild(renderer.domElement);
const canvas = renderer.domElement;
const maxAniso = renderer.capabilities.getMaxAnisotropy();

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 2200);
camera.position.set(0, 12, 20);

// ---------------------------------------------------------------------
// Sky, fog, lights, environment
// ---------------------------------------------------------------------
const SKY = {
  top: col('#2a78db'),
  horizon: col('#c9e6ff'),
  bottom: col('#e6f2ff'),
  sunDir: new V3(0.42, 0.66, 0.38).normalize(),
};
scene.fog = new THREE.Fog(SKY.horizon.clone(), 160, 720);

// Image-based lighting from the sky gradient
(() => {
  const pmrem = new THREE.PMREMGenerator(renderer);
  const envScene = new THREE.Scene();
  envScene.add(new THREE.Mesh(new THREE.SphereGeometry(20, 32, 16), skyMat));
  const ground = new THREE.Mesh(
    new THREE.PlaneGeometry(200, 200),
    new THREE.MeshBasicMaterial({ color: col('#6f8a5c') })
  );
  ground.rotation.x = -Math.PI / 2;
  ground.position.y = -6;
  envScene.add(ground);
  scene.environment = pmrem.fromScene(envScene, 0.03).texture;
  pmrem.dispose();
})();

const hemi = new THREE.HemisphereLight(col('#d6ecff'), col('#8a6f52'), 0.45);
scene.add(hemi);
const sun = new THREE.DirectionalLight(col('#fff1d6'), 1.55);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
const SHADOW_EXTENT = 70;
Object.assign(sun.shadow.camera, { left: -SHADOW_EXTENT, right: SHADOW_EXTENT, top: SHADOW_EXTENT, bottom: -SHADOW_EXTENT, near: 1, far: 420 });
sun.shadow.bias = -0.0004;
sun.shadow.normalBias = 0.04;
scene.add(sun);
scene.add(sun.target);

// ---------------------------------------------------------------------
// Procedural textures
// ---------------------------------------------------------------------
function canvasTex(w, h, draw, opts = {}) {
  const c = document.createElement('canvas');
  c.width = w; c.height = h;
  const g = c.getContext('2d');
  draw(g, w, h);
  const t = new THREE.CanvasTexture(c);
  t.encoding = THREE.sRGBEncoding;
  t.anisotropy = Math.min(8, maxAniso);
  if (opts.repeat !== false) t.wrapS = t.wrapT = THREE.RepeatWrapping;
  return t;
}
function addNoise(g, w, h, amt) {
  const img = g.getImageData(0, 0, w, h);
  const d = img.data;
  for (let i = 0; i < d.length; i += 4) {
    const n = (Math.random() - 0.5) * amt;
    d[i] += n; d[i + 1] += n; d[i + 2] += n;
  }
  g.putImageData(img, 0, 0);
}
function roundRect(g, x, y, w, h, r) {
  g.beginPath();
  g.moveTo(x + r, y);
  g.arcTo(x + w, y, x + w, y + h, r);
  g.arcTo(x + w, y + h, x, y + h, r);
  g.arcTo(x, y + h, x, y, r);
  g.arcTo(x, y, x + w, y, r);
  g.closePath();
}

// UV scaling so textures tile once per stud (or per `div` studs)
function scaleBoxUVs(geo, sx, sy, sz, div = 1) {
  const uv = geo.attributes.uv;
  const dims = [[sz, sy], [sz, sy], [sx, sz], [sx, sz], [sx, sy], [sx, sy]];
  for (let f = 0; f < 6; f++) {
    for (let i = 0; i < 4; i++) {
      const idx = f * 4 + i;
      uv.setXY(idx, (uv.getX(idx) * dims[f][0]) / div, (uv.getY(idx) * dims[f][1]) / div);
    }
  }
  uv.needsUpdate = true;
}

// ---------------------------------------------------------------------
// Materials
// ---------------------------------------------------------------------
const matCache = new Map();
function getMat(hex, kind = 'plastic') {
  const key = hex + '|' + kind;
  if (matCache.has(key)) return matCache.get(key);
  const c = col(hex);
  let m;
  switch (kind) {
    case 'plastic': {
      const side = new THREE.MeshStandardMaterial({ color: c, map: TEX.plastic, roughness: 0.6, metalness: 0, envMapIntensity: 0.6 });
      const top = new THREE.MeshStandardMaterial({ color: c, map: TEX.studs, roughness: 0.55, metalness: 0, envMapIntensity: 0.6 });
      m = [side, side, top, side, side, side];
      break;
    }
    case 'smooth': m = new THREE.MeshStandardMaterial({ color: c, roughness: 0.45, metalness: 0.02, envMapIntensity: 0.7 }); break;
    case 'neon': m = new THREE.MeshStandardMaterial({ color: c, emissive: c, emissiveIntensity: 1.5, roughness: 0.4, envMapIntensity: 0.3 }); break;
    case 'metal': m = new THREE.MeshStandardMaterial({ color: c, roughness: 0.32, metalness: 0.85 }); break;
    case 'glass': m = new THREE.MeshStandardMaterial({ color: c, roughness: 0.05, metalness: 0.1, transparent: true, opacity: 0.45, depthWrite: false }); break;
    case 'wood': m = new THREE.MeshStandardMaterial({ color: c, map: TEX.wood, roughness: 0.8, envMapIntensity: 0.4 }); break;
    case 'gold': m = new THREE.MeshStandardMaterial({ color: c, roughness: 0.3, metalness: 0.55, emissive: col('#a86a00'), emissiveIntensity: 0.45, envMapIntensity: 1.2 }); break;
    case 'cloud': m = new THREE.MeshStandardMaterial({ color: c, roughness: 1, emissive: col('#dfe9f5'), emissiveIntensity: 0.35 }); break;
    default: m = new THREE.MeshStandardMaterial({ color: c });
  }
  matCache.set(key, m);
  return m;
}
const MAT = {
  kill: new THREE.MeshStandardMaterial({ color: col('#b80000'), emissive: col('#ff1414'), emissiveIntensity: 1, roughness: 0.4, envMapIntensity: 0.2 }),
  bounce: new THREE.MeshStandardMaterial({ color: col('#0f9a35'), emissive: col('#2bff5c'), emissiveIntensity: 0.9, roughness: 0.4, envMapIntensity: 0.2 }),
  coin: new THREE.MeshStandardMaterial({ color: col('#ffc928'), metalness: 0.55, roughness: 0.28, emissive: col('#b07400'), emissiveIntensity: 0.65, envMapIntensity: 1.2 }),
  truss: new THREE.MeshStandardMaterial({ map: TEX.truss, alphaTest: 0.5, side: THREE.DoubleSide, roughness: 0.4, metalness: 0.6 }),
};

// ---------------------------------------------------------------------
// Audio (all synthesized with WebAudio)
// ---------------------------------------------------------------------
const audio = { ctx: null, master: null, music: null, noiseBuf: null, musicTimer: null, nextNote: 0, step: 0 };
function initAudio() {
  if (audio.ctx) { if (audio.ctx.state === 'suspended') audio.ctx.resume(); return; }
  const AC = window.AudioContext || window.webkitAudioContext;
  if (!AC) return;
  audio.ctx = new AC();
  audio.master = audio.ctx.createGain();
  audio.master.gain.value = state.settings.volume;
  audio.master.connect(audio.ctx.destination);
  audio.music = audio.ctx.createGain();
  audio.music.gain.value = 0.32;
  audio.music.connect(audio.master);
  const len = audio.ctx.sampleRate;
  audio.noiseBuf = audio.ctx.createBuffer(1, len, audio.ctx.sampleRate);
  const d = audio.noiseBuf.getChannelData(0);
  for (let i = 0; i < len; i++) d[i] = Math.random() * 2 - 1;
  if (state.settings.music) startMusic();
}
function tone({ type = 'sine', f0 = 440, f1 = null, dur = 0.15, vol = 0.2, delay = 0, attack = 0.005, out = null }) {
  if (!audio.ctx) return;
  const t = audio.ctx.currentTime + delay;
  const o = audio.ctx.createOscillator();
  const g = audio.ctx.createGain();
  o.type = type;
  o.frequency.setValueAtTime(f0, t);
  if (f1) o.frequency.exponentialRampToValueAtTime(f1, t + dur);
  g.gain.setValueAtTime(0.0001, t);
  g.gain.exponentialRampToValueAtTime(vol, t + attack);
  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
  o.connect(g); g.connect(out || audio.master);
  o.start(t); o.stop(t + dur + 0.05);
}
function noiseBurst({ dur = 0.1, vol = 0.2, freq = 1000, q = 1, delay = 0 }) {
  if (!audio.ctx) return;
  const t = audio.ctx.currentTime + delay;
  const s = audio.ctx.createBufferSource();
  s.buffer = audio.noiseBuf;
  const f = audio.ctx.createBiquadFilter();
  f.type = 'bandpass'; f.frequency.value = freq; f.Q.value = q;
  const g = audio.ctx.createGain();
  g.gain.setValueAtTime(vol, t);
  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
  s.connect(f); f.connect(g); g.connect(audio.master);
  s.start(t, Math.random() * 0.5); s.stop(t + dur + 0.05);
}
const sfx = {
  jump() { tone({ type: 'square', f0: 280, f1: 560, dur: 0.11, vol: 0.06 }); },
  land(v) { noiseBurst({ dur: 0.09, vol: Math.min(0.3, v / 500), freq: 500 }); },
  step() { noiseBurst({ dur: 0.035, vol: 0.03, freq: 2200, q: 0.8 }); },
  coin() { tone({ type: 'square', f0: 988, dur: 0.07, vol: 0.07 }); tone({ type: 'square', f0: 1319, dur: 0.28, vol: 0.07, delay: 0.07 }); },
  checkpoint() { [523, 659, 784, 1047].forEach((f, i) => tone({ type: 'triangle', f0: f, dur: 0.22, vol: 0.16, delay: i * 0.075 })); },
  death() { noiseBurst({ dur: 0.4, vol: 0.4, freq: 700, q: 0.6 }); tone({ type: 'sawtooth', f0: 320, f1: 55, dur: 0.5, vol: 0.09 }); },
  bounce() { tone({ type: 'sine', f0: 160, f1: 760, dur: 0.32, vol: 0.28 }); },
  win() { [523, 659, 784, 1047, 784, 1047, 1319].forEach((f, i) => tone({ type: 'triangle', f0: f, dur: 0.3, vol: 0.16, delay: i * 0.11 })); },
  click() { tone({ type: 'sine', f0: 900, dur: 0.05, vol: 0.06 }); },
  chat() { tone({ type: 'sine', f0: 700, f1: 900, dur: 0.07, vol: 0.05 }); },
  spawn() { tone({ type: 'sine', f0: 400, f1: 900, dur: 0.25, vol: 0.08 }); },
};

// Light, looping chiptune-ish background music (scheduled ahead)
const MUSIC = {
  bpm: 112,
  chords: [[60, 64, 67, 72], [55, 59, 62, 67], [57, 60, 64, 69], [53, 57, 60, 65]],
  melody: [72, 74, 76, 79, 76, 74, 72, 67, 69, 72, 74, 72, 69, 67, 64, 67],
};
const midi = (n) => 440 * Math.pow(2, (n - 69) / 12);
function startMusic() {
  if (!audio.ctx || audio.musicTimer) return;
  audio.nextNote = audio.ctx.currentTime + 0.1;
  audio.musicTimer = setInterval(() => {
    const spb = 60 / MUSIC.bpm / 2;
    while (audio.nextNote < audio.ctx.currentTime + 0.3) {
      const step = audio.step;
      const chord = MUSIC.chords[Math.floor(step / 16) % 4];
      const delay = audio.nextNote - audio.ctx.currentTime;
      tone({ type: 'triangle', f0: midi(chord[step % 4] + 12), dur: spb * 0.9, vol: 0.05, delay, out: audio.music });
      if (step % 8 === 0) tone({ type: 'sine', f0: midi(chord[0] - 12), dur: spb * 7, vol: 0.12, delay, out: audio.music, attack: 0.02 });
      if (step % 2 === 0 && Math.floor(step / 32) % 2 === 1) {
        tone({ type: 'square', f0: midi(MUSIC.melody[(step / 2) % 16]), dur: spb * 1.6, vol: 0.025, delay, out: audio.music });
      }
      audio.nextNote += spb;
      audio.step = (step + 1) % 128;
    }
  }, 60);
}
function stopMusic() { clearInterval(audio.musicTimer); audio.musicTimer = null; }

// ---------------------------------------------------------------------
// World registry & part builders
// ---------------------------------------------------------------------
const world = {
  statics: [], movers: [], spinners: [], faders: [], coins: [], checkpoints: [],
  crates: [], balls: [], blockers: [], conveyors: [], flags: [], clouds: [], debris: [],
  finish: null,
};

function syncBounds(p) {
  const c = p.mesh.position;
  p.min.set(c.x - p.half.x, c.y - p.half.y, c.z - p.half.z);
  p.max.set(c.x + p.half.x, c.y + p.half.y, c.z + p.half.z);
}

/**
 * Create an anchored part. o = { size:[x,y,z], pos:[x,y,z] (center), color, kind,
 * material, type, data, collide, dynamic, uvDiv, uvScale, topUnit, castShadow, blockCamera }
 */
function part(o) {
  const [sx, sy, sz] = o.size;
  const geo = new THREE.BoxGeometry(sx, sy, sz);
  if (o.uvScale !== false) scaleBoxUVs(geo, sx, sy, sz, o.uvDiv || 1);
  if (o.topUnit) {
    const uv = geo.attributes.uv;
    for (let i = 8; i < 12; i++) uv.setXY(i, uv.getX(i) * (o.uvDiv || 1) / sx, uv.getY(i) * (o.uvDiv || 1) / sz);
  }
  const mesh = new THREE.Mesh(geo, o.material || getMat(o.color || '#a3a2a5', o.kind || 'plastic'));
  mesh.position.set(o.pos[0], o.pos[1], o.pos[2]);
  mesh.castShadow = o.castShadow !== false;
  mesh.receiveShadow = o.receiveShadow !== false;
  scene.add(mesh);
  const p = {
    mesh, half: new V3(sx / 2, sy / 2, sz / 2), min: new V3(), max: new V3(),
    type: o.type || 'solid', data: o.data || {}, enabled: true, collide: o.collide !== false, mover: null,
  };
  syncBounds(p);
  if (p.collide) world.statics.push(p);
  if (p.collide && o.blockCamera !== false) world.blockers.push(mesh);
  if (!o.dynamic) { mesh.matrixAutoUpdate = false; mesh.updateMatrix(); }
  return p;
}

// Platform positioned by its TOP surface height
function plat(x, top, z, sx, sz, color, o = {}) {
  const h = o.h || 2;
  return part({ ...o, size: [sx, h, sz], pos: [x, top - h / 2, z], color });
}

function kill(x, top, z, sx, sz, h = 1, o = {}) {
  return part({ ...o, size: [sx, h, sz], pos: [x, top - h / 2, z], material: MAT.kill, type: 'kill' });
}

function addMover(p, axis, amp, speed, phase = 0) {
  p.mesh.matrixAutoUpdate = true;
  const m = { p, base: p.mesh.position.clone(), axis: new V3(axis[0], axis[1], axis[2]), amp, speed, phase, delta: new V3() };
  p.mover = m;
  world.movers.push(m);
  return m;
}

const coinGeo = new THREE.CylinderGeometry(0.9, 0.9, 0.24, 28);
function coin(x, y, z) {
  const mesh = new THREE.Mesh(coinGeo, MAT.coin);
  mesh.rotation.order = 'YXZ';
  mesh.rotation.x = Math.PI / 2;
  mesh.position.set(x, y, z);
  mesh.castShadow = true;
  scene.add(mesh);
  const c = { id: world.coins.length, mesh, pos: mesh.position, baseY: y, collected: false, phase: Math.random() * 6 };
  world.coins.push(c);
  return c;
}

function truss(x, bottom, z, height) {
  return part({ size: [2, height, 2], pos: [x, bottom + height / 2, z], material: MAT.truss, type: 'truss', uvDiv: 2, blockCamera: false });
}

function bouncePad(x, top, z, s, power) {
  part({ size: [s + 1, 0.4, s + 1], pos: [x, top + 0.2, z], color: '#2c3138', castShadow: false });
  return part({ size: [s, 0.4, s], pos: [x, top + 0.6, z], material: MAT.bounce, type: 'bounce', data: { power } });
}

function spinner(cx, cy, cz, len, thick, speed, phase) {
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(len, thick, thick), MAT.kill);
  mesh.position.set(cx, cy, cz);
  mesh.rotation.y = phase;
  mesh.castShadow = true;
  scene.add(mesh);
  world.spinners.push({ mesh, center: new V3(cx, cy, cz), halfLen: len / 2, halfThick: thick / 2, angle: phase, speed });
}

// Text boards
function drawBoard(lines, { bg = '#2a3240', bg2 = '#1d232e', accent = '#ffcc33' } = {}) {
  return (g, w, h) => {
    const grd = g.createLinearGradient(0, 0, 0, h);
    grd.addColorStop(0, bg); grd.addColorStop(1, bg2);
    g.fillStyle = grd; g.fillRect(0, 0, w, h);
    g.strokeStyle = accent; g.lineWidth = 10; g.strokeRect(10, 10, w - 20, h - 20);
    g.textAlign = 'center'; g.textBaseline = 'middle';
    const total = lines.reduce((s, l) => s + l.size * 1.25, 0);
    let y = h / 2 - total / 2;
    for (const l of lines) {
      y += (l.size * 1.25) / 2;
      g.font = `900 ${l.size}px "Arial Black", Impact, sans-serif`;
      g.fillStyle = 'rgba(0,0,0,0.45)'; g.fillText(l.text, w / 2 + 3, y + 4);
      g.fillStyle = l.color || '#ffffff'; g.fillText(l.text, w / 2, y);
      y += (l.size * 1.25) / 2;
    }
  };
}
function sign(x, cy, z, w, h, draw, facing = 1, posts = 0) {
  const tex = canvasTex(512, Math.round((512 * h) / w), draw, { repeat: false });
  const front = new THREE.MeshStandardMaterial({ map: tex, roughness: 0.6, emissive: col('#ffffff'), emissiveMap: tex, emissiveIntensity: 0.18 });
  const side = getMat('#5e4128', 'smooth');
  const mats = facing > 0 ? [side, side, side, side, front, side] : [side, side, side, side, side, front];
  part({ size: [w, h, 0.4], pos: [x, cy, z], material: mats, uvScale: false });
  if (posts > 0) {
    const bottom = cy - h / 2;
    part({ size: [0.6, posts, 0.6], pos: [x - w / 2 + 1, bottom - posts / 2, z], color: '#5e4128', kind: 'smooth' });
    part({ size: [0.6, posts, 0.6], pos: [x + w / 2 - 1, bottom - posts / 2, z], color: '#5e4128', kind: 'smooth' });
  }
}

// Dynamic props
function crate(x, y, z, s = 3) {
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(s, s, s), getMat('#ffffff', 'wood'));
  mesh.position.set(x, y, z);
  mesh.castShadow = mesh.receiveShadow = true;
  scene.add(mesh);
  const c = {
    mesh, pos: mesh.position, half: new V3(s / 2, s / 2, s / 2), min: new V3(), max: new V3(),
    type: 'crate', data: {}, enabled: true, collide: true, dynamic: true, vel: new V3(), home: new V3(x, y, z), grounded: false,
  };
  syncBounds(c);
  world.crates.push(c);
  return c;
}
function ball(x, y, z, r, c1, c2) {
  const mat = new THREE.MeshStandardMaterial({ map: TEX.ball(c1, c2), roughness: 0.35, envMapIntensity: 0.8 });
  const mesh = new THREE.Mesh(new THREE.SphereGeometry(r, 32, 20), mat);
  mesh.position.set(x, y, z);
  mesh.castShadow = mesh.receiveShadow = true;
  scene.add(mesh);
  world.balls.push({ mesh, pos: mesh.position, vel: new V3(), r, home: new V3(x, y, z) });
}

// ---------------------------------------------------------------------
// Scenery: lava sea, clouds, rocks
// ---------------------------------------------------------------------
TEX.lava.repeat.set(70, 70);
const lavaMat = new THREE.MeshStandardMaterial({
  color: col('#ff5a1f'), map: TEX.lava, emissive: col('#ff4a10'), emissiveMap: TEX.lava, emissiveIntensity: 1.25, roughness: 0.85,
});
const lava = new THREE.Mesh(new THREE.PlaneGeometry(2600, 2600), lavaMat);
lava.rotation.x = -Math.PI / 2;
lava.position.y = LAVA_Y;
scene.add(lava);

// ---------------------------------------------------------------------
// Lobby / spawn island with physics playground
// ---------------------------------------------------------------------
function buildLobby() {
  plat(0, 0, 0, 64, 64, '#5aa04a', { h: 3 });
  part({ size: [62, 23, 62], pos: [0, -14.5, 0], color: '#857a6c', castShadow: false });
  checkpoint(0, 0, 0.6, 10, 'SPAWN');

// Guide lights toward the start gate
  for (let i = 0; i < 4; i++) part({ size: [5, 0.12, 0.6], pos: [0, 0.06, -6 - i * 5.5], kind: 'neon', color: '#38d9ff', collide: false, castShadow: false });

// Start gate
  part({ size: [2, 12, 2], pos: [-6, 6, -29], color: '#eef1f4' });
  part({ size: [2, 12, 2], pos: [6, 6, -29], color: '#eef1f4' });
  part({ size: [14, 2, 2], pos: [0, 13, -29], color: '#e2483d' });
  sign(0, 16, -29, 10, 3, drawBoard([{ text: 'START', size: 120, color: '#ffd84a' }]), 1);

// Welcome board
  sign(-15, 6, -4, 13, 6.5, drawBoard([
    { text: 'BLOCKVERSE OBBY', size: 42, color: '#ffd84a' },
    { text: '10 stages to the golden finish', size: 26 },
    { text: 'Grab coins • Dodge lava • Beat your time', size: 22, color: '#9fe0ff' },
  ]), 1, 2.75);

// Trees
  tree(-25, -22); tree(-26, 20); tree(25, -24); tree(-8, 27);

// Physics playground
  plat(20, 0.2, 7, 16, 26, '#e3c98f', { h: 0.6 });
  const wall = '#f2f4f7';
  part({ size: [16, 1, 0.6], pos: [20, 0.7, -5.7], color: wall });
  part({ size: [16, 1, 0.6], pos: [20, 0.7, 19.7], color: wall });
  part({ size: [0.6, 1, 26], pos: [27.7, 0.7, 7], color: wall });
  part({ size: [0.6, 1, 10], pos: [12.3, 0.7, -1], color: wall });
  part({ size: [0.6, 1, 10], pos: [12.3, 0.7, 15], color: wall });
  sign(20, 5.2, -6.4, 11, 3.2, drawBoard([{ text: 'PHYSICS PLAYGROUND', size: 44, color: '#7dffb0' }, { text: 'push crates • kick balls', size: 26 }], { accent: '#7dffb0' }), 1, 3.6);

const y0 = 0.2 + 1.5 + 0.02;
  [18.5, 21.6, 24.7].forEach((x) => crate(x, y0, 1));
  [20.05, 23.15].forEach((x) => crate(x, y0 + 3.05, 1));
  crate(21.6, y0 + 6.1, 1);
  crate(16, y0, 13); crate(24, y0, 15);
  ball(16, 3, 6, 1.4, '#ff4d4d', '#ffe14d');
  ball(20, 3, 9, 1.4, '#3d8bff', '#ffffff');
  ball(24.5, 3, 7, 1.4, '#3ddc84', '#ffffff');
  ball(18, 3, 16, 1.4, '#b06bff', '#ffd84a');
  ball(23, 4, 17.5, 1.8, '#ff8a3d', '#2b2b2b');

coin(21.6, 11.6, 1);
  coin(-15, 2.5, 4);
}

// ---------------------------------------------------------------------
// The obby course (runs toward -Z, climbing from the lobby to the sky)
// ---------------------------------------------------------------------
const SECTION_NAMES = [
  'Hop Along', 'Lava Lane', 'Slide Rides', 'Truss Tower', 'Spin Cycle',
  'Conveyor Chaos', 'Vanishing Act', 'Bounce House', 'Tightrope', 'Rising Pistons', 'Victory Stairs',
];
const LAST_CHECKPOINT = 10;

function stage1() { // Hop Along
  const a = '#3d8bff', b = '#6aa8ff';
  plat(0, 1, -38, 5, 5, a);
  plat(-4, 2, -46, 4, 4, b);
  plat(2, 3, -54, 4, 4, a);
  plat(6, 4, -62, 4, 4, b);
  plat(2, 5, -70, 3, 3, a);
  plat(-3, 6, -78, 3, 3, b);
  coin(2, 5.6, -54); coin(-3, 8.6, -78);
  checkpoint(1, 0, 6, -90);
}

function stage2() { // Lava Lane
  const c = '#e9edf2';
  plat(0, 6, -103.5, 8, 17, c);
  kill(0, 6, -114, 8, 4, 2);
  plat(0, 6, -122, 8, 12, c);
  kill(0, 6, -130.5, 8, 5, 2);
  plat(0, 6, -138, 8, 10, c);
  kill(0, 6.6, -101, 8, 1.2, 0.6);
  kill(0, 6.6, -106.5, 8, 1.2, 0.6);
  kill(-2, 6.6, -120.5, 4, 1.2, 0.6);
  kill(2, 6.6, -124.5, 4, 1.2, 0.6);
  kill(0, 6.6, -138, 8, 1.2, 0.6);
  coin(0, 9, -114); coin(2.5, 9, -130.5);
  checkpoint(2, 0, 6, -148);
}

function stage4() { // Truss Tower
  plat(0, 6, -209, 6, 6, '#3ddc84');
  truss(0, 6, -211, 20);
  part({ size: [8, 18, 1], pos: [0, 15, -212.5], color: '#2f9e6a' });
  plat(0, 26, -216, 6, 8, '#3ddc84');
  plat(-4, 27, -226, 3, 3, '#ffcf3d');
  plat(0, 28, -233, 3, 3, '#ffcf3d');
  plat(4, 29, -240, 3, 3, '#ffcf3d');
  coin(0, 17, -209); coin(4, 31.6, -240);
  checkpoint(4, 0, 29, -251);
}

function stage5() { // Spin Cycle
  plat(0, 29, -270, 22, 22, '#ff5c8a');
  part({ size: [3, 4, 3], pos: [0, 31, -270], color: '#2b2f36' });
  spinner(0, 29.8, -270, 21, 1, 1.5, 0);
  spinner(0, 29.8, -270, 21, 1, 1.5, Math.PI / 2);
  spinner(0, 36, -270, 21, 1, -1.05, Math.PI / 4);
  coin(6, 31.6, -264); coin(-6, 31.6, -276);
  checkpoint(5, 0, 29, -291);
}

function stage6() { // Conveyor Chaos
  conveyor(0, 29, -309, 8, 26, 0, 9);
  conveyor(0, 29, -332, 8, 20, 9, 0);
  coin(2.5, 31.6, -310); coin(-2.5, 31.6, -335);
  checkpoint(6, 0, 29, -347);
}

function stage7() { // Vanishing Act
  const pts = [[0, -357], [4, -362.5], [4, -368], [-1, -372.5], [-5, -377.5], [-5, -383], [0, -388], [4, -393]];
  pts.forEach(([x, z], i) => fader(x, 29, z, 4, 4, i % 2 ? '#38d9ff' : '#2aa9d6'));
  coin(4, 31.6, -368); coin(-5, 31.6, -383);
  checkpoint(7, 0, 29, -403);
}

function stage8() { // Bounce House
  const g = '#7dd94a';
  plat(0, 29, -414, 6, 6, g);
  bouncePad(0, 29, -414, 4, 78);
  plat(5, 41, -425, 6, 6, g);
  bouncePad(5, 41, -425, 4, 78);
  plat(-2, 53, -436, 6, 6, g);
  coin(0, 40, -418); coin(3, 52, -430);
  checkpoint(8, 0, 53, -449);
}

// Trophy on a pedestal
  part({ size: [3, 3, 3], pos: [-3, 93.5, -586], color: '#2b2f36' });
  const gm = getMat(gold, 'gold');
  const t = new THREE.Group();
  const add = (geo, y, rx = 0) => { const m = new THREE.Mesh(geo, gm); m.position.y = y; m.rotation.x = rx; m.castShadow = true; t.add(m); return m; };
  add(new THREE.CylinderGeometry(1.1, 1.3, 0.5, 24), 0.25);
  add(new THREE.CylinderGeometry(0.28, 0.4, 1.4, 16), 1.2);
  add(new THREE.CylinderGeometry(1.5, 0.55, 2.2, 28, 1), 3.0);
  const h1 = add(new THREE.TorusGeometry(0.75, 0.16, 10, 20, Math.PI), 3.2);
  h1.rotation.z = -Math.PI / 2; h1.position.x = 1.35;
  const h2 = add(new THREE.TorusGeometry(0.75, 0.16, 10, 20, Math.PI), 3.2);
  h2.rotation.z = Math.PI / 2; h2.position.x = -1.35;
  const star = add(new THREE.OctahedronGeometry(0.7), 5.0);
  star.scale.set(1, 1.3, 0.5);
  t.position.set(-3, 95, -586);
  scene.add(t);
  world.trophy = t;
  coin(-9, 94.6, -584); coin(3, 94.6, -584);
}

function buildWorld() {
  buildScenery();
  buildLobby();
  stage1(); stage2(); stage3(); stage4(); stage5();
  stage6(); stage7(); stage8(); stage9(); stage10();
  buildFinish();
}
buildWorld();

// ---------------------------------------------------------------------
// Blocky avatar (6-part rig) + animation
// ---------------------------------------------------------------------
const FACES = ['smile', 'grin', 'cool', 'surprised'];
const FACE_TEX = {};
FACES.forEach((f) => { FACE_TEX[f] = makeFaceTex(f); });

function setAvatarLook(av, colors) {
  av.mats.skin.color.copy(col(colors.skin));
  av.mats.shirt.color.copy(col(colors.shirt));
  av.mats.pants.color.copy(col(colors.pants));
  av.mats.face.map = FACE_TEX[colors.face] || FACE_TEX.smile;
  av.mats.face.needsUpdate = true;
}

function animateAvatar(ch, dt) {
  const av = ch.av, b = ch.body;
  const hs = Math.hypot(b.vel.x - (ch.groundVX || 0), b.vel.z - (ch.groundVZ || 0));
  const t = state.time;
  let aL = 0, aR = 0, lL = 0, lR = 0, aLz = 0.04, aRz = -0.04, bodyY = 0, bodyRot = 0, headX = 0;

if (ch.emote && hs < 1 && b.grounded) {
    if (ch.emote === 'dance') {
      const s = Math.sin(t * 9);
      aLz = 2.3 + s * 0.6; aRz = -(2.3 - s * 0.6);
      lL = s * 0.35; lR = -s * 0.35;
      bodyRot = Math.sin(t * 4.5) * 0.45;
      bodyY = Math.abs(s) * 0.25;
    } else if (ch.emote === 'wave') {
      aRz = -2.6 + Math.sin(t * 12) * 0.35;
      aL = Math.sin(t * 1.6) * 0.04;
    }
  } else if (ch.climbing) {
    if (Math.abs(b.vel.y) > 0.5) ch.animPhase += dt * 9;
    const s = Math.sin(ch.animPhase);
    aL = -2.7 + s * 0.45; aR = -2.7 - s * 0.45;
    lL = -0.55 - s * 0.45; lR = -0.55 + s * 0.45;
  } else if (!b.grounded) {
    aL = aR = -2.95;
    lL = lR = b.vel.y > 0 ? 0 : 0.12;
    headX = b.vel.y > 0 ? -0.12 : 0.1;
  } else if (hs > 0.6) {
    ch.animPhase += dt * hs * 0.62;
    const s = Math.sin(ch.animPhase);
    const amp = Math.min(1, hs / 16) * 0.95;
    lL = s * amp; lR = -s * amp;
    aL = -s * amp * 0.9; aR = s * amp * 0.9;
    bodyY = Math.abs(Math.cos(ch.animPhase)) * 0.12 * amp;
    const sign = s > 0;
    if (ch.isPlayer && sign !== ch.stepSign) sfx.step();
    ch.stepSign = sign;
  } else {
    aL = Math.sin(t * 1.7) * 0.05; aR = -aL;
    headX = Math.sin(t * 0.7) * 0.04;
  }

const k = 1 - Math.exp(-(b.grounded ? 20 : 12) * dt);
  av.armL.rotation.x += (aL - av.armL.rotation.x) * k;
  av.armR.rotation.x += (aR - av.armR.rotation.x) * k;
  av.armL.rotation.z += (aLz - av.armL.rotation.z) * k;
  av.armR.rotation.z += (aRz - av.armR.rotation.z) * k;
  av.legL.rotation.x += (lL - av.legL.rotation.x) * k;
  av.legR.rotation.x += (lR - av.legR.rotation.x) * k;
  av.headPivot.rotation.x += (headX - av.headPivot.rotation.x) * k;
  av.body.position.y += (bodyY - av.body.position.y) * k;
  av.body.rotation.y += (bodyRot - av.body.rotation.y) * k;

ch.visualY = damp(ch.visualY, 0, 14, dt);
  av.root.position.set(b.pos.x, b.pos.y - b.half.y + ch.visualY, b.pos.z);
  av.root.rotation.y = ch.facing;
}

// ---------------------------------------------------------------------
// Text sprites: name tags & chat bubbles
// ---------------------------------------------------------------------
function wrapText(g, text, maxW) {
  const words = String(text).split(/\s+/);
  const lines = [];
  let line = '';
  for (const w of words) {
    const test = line ? line + ' ' + w : w;
    if (g.measureText(test).width > maxW && line) { lines.push(line); line = w; } else line = test;
  }
  if (line) lines.push(line);
  return lines.slice(0, 4);
}
function textSprite(text, { size = 30, bubble = false, color = '#ffffff', maxWidth = 380, scale = 0.018 } = {}) {
  const c = document.createElement('canvas');
  const g = c.getContext('2d');
  const font = `800 ${size}px Nunito, "Segoe UI", Arial, sans-serif`;
  g.font = font;
  const lines = wrapText(g, text, maxWidth);
  const lh = size * 1.22, pad = bubble ? 18 : 8, tail = bubble ? 16 : 0;
  const w = Math.ceil(Math.max(...lines.map((l) => g.measureText(l).width)) + pad * 2);
  const h = Math.ceil(lines.length * lh + pad * 2 + tail);
  c.width = w; c.height = h;
  g.font = font;
  g.textAlign = 'center'; g.textBaseline = 'middle';
  if (bubble) {
    g.fillStyle = 'rgba(255,255,255,0.96)';
    roundRect(g, 1, 1, w - 2, h - tail - 2, 16); g.fill();
    g.beginPath(); g.moveTo(w / 2 - 12, h - tail - 2); g.lineTo(w / 2, h - 1); g.lineTo(w / 2 + 12, h - tail - 2); g.fill();
    g.fillStyle = '#1e2229';
    lines.forEach((l, i) => g.fillText(l, w / 2, pad + lh * (i + 0.5)));
  } else {
    g.lineWidth = 6; g.strokeStyle = 'rgba(0,0,0,0.65)'; g.lineJoin = 'round';
    lines.forEach((l, i) => { g.strokeText(l, w / 2, pad + lh * (i + 0.5)); });
    g.fillStyle = color;
    lines.forEach((l, i) => g.fillText(l, w / 2, pad + lh * (i + 0.5)));
  }
  const tex = new THREE.CanvasTexture(c);
  tex.encoding = THREE.sRGBEncoding;
  tex.minFilter = THREE.LinearFilter;
  tex.generateMipmaps = false;
  const mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthWrite: false });
  mat.toneMapped = false;
  mat.fog = false;
  const s = new THREE.Sprite(mat);
  s.scale.set(w * scale, h * scale, 1);
  s.center.set(0.5, 0);
  s.renderOrder = 20;
  return s;
}
function disposeSprite(s) {
  if (!s) return;
  s.parent && s.parent.remove(s);
  s.material.map.dispose();
  s.material.dispose();
}
function showBubble(ch, text) {
  if (ch.bubble) disposeSprite(ch.bubble.sprite);
  const sprite = textSprite(text, { size: 30, bubble: true, maxWidth: 340, scale: 0.016 });
  sprite.position.set(0, ch.nameTag ? 6.5 : 5.8, 0);
  ch.av.root.add(sprite);
  ch.bubble = { sprite, t: 7 };
}
function updateBubble(ch, dt) {
  if (!ch.bubble) return;
  ch.bubble.t -= dt;
  ch.bubble.sprite.material.opacity = clamp(ch.bubble.t, 0, 1);
  if (ch.bubble.t <= 0) { disposeSprite(ch.bubble.sprite); ch.bubble = null; }
}

// ---------------------------------------------------------------------
// Particles (single instanced mesh)
// ---------------------------------------------------------------------
const PARTICLE_MAX = 600;
const particleMesh = new THREE.InstancedMesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xffffff }), PARTICLE_MAX);
particleMesh.frustumCulled = false;
particleMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
{
  const white = new THREE.Color(1, 1, 1);
  for (let i = 0; i < PARTICLE_MAX; i++) particleMesh.setColorAt(i, white);
  particleMesh.count = 0;
}
scene.add(particleMesh);
const particles = [];
const _pm = new THREE.Matrix4(), _pq = new THREE.Quaternion(), _pe = new THREE.Euler(), _ps = new V3();

// ---------------------------------------------------------------------
// Physics: swept AABB character controller, crates, balls, debris
// ---------------------------------------------------------------------
const TRUSSES = world.statics.filter((c) => c.type === 'truss');
const KILLERS = world.statics.filter((c) => c.type === 'kill');
const _bmin = new V3(), _bmax = new V3(), _q = new V3(), _d = new V3(), _tmp = new V3();
const _cands = [], _crateCands = [], _crateCands2 = [], _sphereCands = [];

// Move a box body along one axis, resolving overlaps. Supports auto step-up and pushing dynamic crates.
function moveAxis(b, axis, d, cands, canStep, pushFn) {
  if (d === 0) return null;
  b.pos[axis] += d;
  let hit = null;
  for (let i = 0; i < cands.length; i++) {
    const c = cands[i];
    if (!c.enabled) continue;
    bodyBounds(b, _bmin, _bmax);
    if (!boxHit(_bmin, _bmax, c)) continue;
    if (canStep && axis !== 'y') {
      const rise = c.max.y - (b.pos.y - b.half.y);
      if (rise > 0 && rise <= STEP_HEIGHT) {
        const oy = b.pos.y;
        b.pos.y += rise + EPS;
        if (!overlapsAny(b, cands)) { b.stepUp = (b.stepUp || 0) + rise; continue; }
        b.pos.y = oy;
        bodyBounds(b, _bmin, _bmax);
      }
    }
    if (c.dynamic && pushFn && axis !== 'y') {
      pushFn(c, axis, d > 0 ? _bmax[axis] - c.min[axis] : _bmin[axis] - c.max[axis]);
      bodyBounds(b, _bmin, _bmax);
      if (!boxHit(_bmin, _bmax, c)) continue;
    }
    b.pos[axis] = d > 0 ? c.min[axis] - b.half[axis] - EPS : c.max[axis] + b.half[axis] + EPS;
    hit = c;
  }
  return hit;
}

function pushCrate(c, axis, need) {
  const amount = need * 0.62;
  const cands = gather(c, [world.statics, world.crates], _crateCands, Math.abs(amount) + 1, c);
  moveAxis(c, axis, amount, cands, false, null);
  syncBounds(c);
  c.vel[axis] = (amount / FIXED_DT) * 0.45;
}

// Push bodies out of moving parts (pistons, elevators)
function depenetrateMovers(b) {
  for (let i = 0; i < world.movers.length; i++) {
    const c = world.movers[i].p;
    if (!c.enabled) continue;
    bodyBounds(b, _bmin, _bmax);
    if (!boxHit(_bmin, _bmax, c)) continue;
    let best = Infinity, axis = 'y', val = 0;
    const tryAx = (ax, v) => { if (Math.abs(v) < best) { best = Math.abs(v); axis = ax; val = v; } };
    tryAx('x', c.max.x - _bmin.x); tryAx('x', c.min.x - _bmax.x);
    tryAx('z', c.max.z - _bmin.z); tryAx('z', c.min.z - _bmax.z);
    tryAx('y', (c.max.y - _bmin.y) * 0.8); tryAx('y', c.min.y - _bmax.y);
    if (axis === 'y' && val > 0) val /= 0.8;
    b.pos[axis] += val + Math.sign(val) * EPS;
    if (axis === 'y' && val > 0) { b.vel.y = Math.max(b.vel.y, 0); b.grounded = true; b.ground = c; }
  }
}

function findTruss(b) {
  bodyBounds(b, _bmin, _bmax, 0.3);
  for (let i = 0; i < TRUSSES.length; i++) if (boxHit(_bmin, _bmax, TRUSSES[i])) return TRUSSES[i];
  return null;
}

/** input: { mx, mz (world-space move, length<=1), jump (held) } */
function stepCharacter(ch, dt, input) {
  const b = ch.body;
  if (b.ground && b.ground.mover && b.ground.enabled) b.pos.add(b.ground.mover.delta);
  depenetrateMovers(b);

// Truss climbing
  let climbing = false, tdx = 0, tdz = 0, toward = 0;
  const tr = ch.climbCd > 0 ? null : findTruss(b);
  if (tr) {
    const qx = clamp(b.pos.x, tr.min.x, tr.max.x) - b.pos.x;
    const qz = clamp(b.pos.z, tr.min.z, tr.max.z) - b.pos.z;
    const l = Math.hypot(qx, qz) || 1;
    tdx = qx / l; tdz = qz / l;
    toward = input.mx * tdx + input.mz * tdz;
    if (toward > 0.3 || (ch.climbing && !b.grounded && toward > -0.3)) climbing = true;
  }
  ch.climbCd = Math.max(0, ch.climbCd - dt);
  ch.climbing = climbing;

const ground = b.grounded ? b.ground : null;
  const accel = b.grounded ? 30 : 14;
  const k = 1 - Math.exp(-accel * dt);
  b.vel.x += (input.mx * ch.walkSpeed - b.vel.x) * k;
  b.vel.z += (input.mz * ch.walkSpeed - b.vel.z) * k;

if (climbing) {
    b.vel.y = toward > 0.3 ? CLIMB_SPEED : 0;
    if (input.jump && ch.jumpReady) {
      b.vel.y = 32; b.vel.x = -tdx * 14; b.vel.z = -tdz * 14;
      ch.climbing = false; ch.climbCd = 0.35; ch.jumpReady = false;
      if (ch.onJump) ch.onJump();
    }
  } else {
    b.vel.y = Math.max(b.vel.y - GRAVITY * dt, -260);
    ch.coyote = b.grounded ? 0.09 : ch.coyote - dt;
    if (input.jump && ch.coyote > 0 && ch.jumpCd <= 0) {
      b.vel.y = JUMP_POWER;
      ch.coyote = 0; ch.jumpCd = 0.18; ch.jumpReady = false;
      b.grounded = false; b.ground = null;
      if (ch.onJump) ch.onJump();
    }
  }
  ch.jumpCd -= dt;
  if (!input.jump) ch.jumpReady = true;

let ex = 0, ez = 0;
  if (ground && ground.type === 'conveyor') { ex = ground.data.vx * dt; ez = ground.data.vz * dt; }

const margin = (Math.abs(b.vel.x) + Math.abs(b.vel.y) + Math.abs(b.vel.z)) * dt + STEP_HEIGHT + 1;
  const cands = gather(b, [world.statics, world.crates], _cands, margin, null);
  b.stepUp = 0;
  const canStep = b.grounded;
  const pusher = ch.canPush ? pushCrate : null;
  const hx = moveAxis(b, 'x', b.vel.x * dt + ex, cands, canStep, pusher);
  if (hx && !hx.dynamic) b.vel.x = 0;
  const hz = moveAxis(b, 'z', b.vel.z * dt + ez, cands, canStep, pusher);
  if (hz && !hz.dynamic) b.vel.z = 0;

const wasGrounded = b.grounded;
  const fallSpeed = -b.vel.y;
  b.grounded = false; b.ground = null;
  const hy = moveAxis(b, 'y', b.vel.y * dt, cands, false, null);
  if (hy) {
    if (b.vel.y <= 0) {
      b.grounded = true; b.ground = hy;
      if (!wasGrounded && ch.onLand) ch.onLand(fallSpeed, hy);
    }
    b.vel.y = 0;
  }
  if (b.stepUp) ch.visualY -= b.stepUp;

if (b.grounded) {
    const g = b.ground;
    if (g.type === 'bounce') {
      b.vel.y = g.data.power; b.grounded = false; b.ground = null;
      if (ch.onBounce) ch.onBounce();
    } else if (g.type === 'fade' && g.data.fader.state === 'solid') {
      g.data.fader.state = 'fading'; g.data.fader.t = 0.45;
    }
  }
}

// ---------------------------------------------------------------------
// Moving parts, spinners, fading blocks
// ---------------------------------------------------------------------
function updateMovers(t) {
  for (const m of world.movers) {
    const s = Math.sin(t * m.speed + m.phase) * m.amp;
    _tmp.copy(m.base).addScaledVector(m.axis, s);
    m.delta.subVectors(_tmp, m.p.mesh.position);
    m.p.mesh.position.copy(_tmp);
    syncBounds(m.p);
  }
}
function updateSpinners(dt) {
  for (const s of world.spinners) {
    s.angle += s.speed * dt;
    s.mesh.rotation.y = s.angle;
  }
}
function spinnerHits(b) {
  for (const s of world.spinners) {
    if (b.pos.y - b.half.y > s.center.y + s.halfThick || b.pos.y + b.half.y < s.center.y - s.halfThick) continue;
    const dx = b.pos.x - s.center.x, dz = b.pos.z - s.center.z;
    const ca = Math.cos(s.angle), sa = Math.sin(s.angle);
    const lx = dx * ca - dz * sa, lz = dx * sa + dz * ca;
    if (Math.abs(lx) < s.halfLen + 0.8 && Math.abs(lz) < s.halfThick + 0.8) return true;
  }
  return false;
}
function updateFaders(dt, playerBody) {
  for (const f of world.faders) {
    if (f.state === 'fading') {
      f.t -= dt;
      const o = clamp(f.t / 0.45, 0, 1);
      f.mats.forEach((m) => { m.opacity = 0.15 + 0.85 * o; });
      f.p.mesh.position.y = f.p.min.y + f.p.half.y + Math.sin(state.time * 60) * 0.05;
      if (f.t <= 0) { f.state = 'gone'; f.t = 2.6; f.p.enabled = false; f.p.mesh.visible = false; }
    } else if (f.state === 'gone') {
      f.t -= dt;
      if (f.t <= 0) {
        bodyBounds(playerBody, _bmin, _bmax);
        if (!boxHit(_bmin, _bmax, f.p)) {
          f.state = 'solid'; f.p.enabled = true; f.p.mesh.visible = true;
          f.mats.forEach((m) => { m.opacity = 1; });
          f.p.mesh.position.y = f.p.min.y + f.p.half.y;
        }
      }
    }
  }
}

// ---------------------------------------------------------------------
// Crates & balls
// ---------------------------------------------------------------------
function stepCrates(dt) {
  for (const c of world.crates) {
    c.vel.y = Math.max(c.vel.y - GRAVITY * dt, -200);
    const m = (Math.abs(c.vel.x) + Math.abs(c.vel.y) + Math.abs(c.vel.z)) * dt + 1;
    const cands = gather(c, [world.statics, world.crates], _crateCands2, m, c);
    c.grounded = false;
    const hy = moveAxis(c, 'y', c.vel.y * dt, cands, false, null);
    if (hy) { if (c.vel.y < 0) c.grounded = true; c.vel.y = 0; }
    const fr = Math.exp((c.grounded ? -7 : -0.4) * dt);
    c.vel.x *= fr; c.vel.z *= fr;
    if (Math.abs(c.vel.x) > 0.02 && moveAxis(c, 'x', c.vel.x * dt, cands, false, null)) c.vel.x = 0;
    if (Math.abs(c.vel.z) > 0.02 && moveAxis(c, 'z', c.vel.z * dt, cands, false, null)) c.vel.z = 0;
    syncBounds(c);
    if (c.pos.y < LAVA_Y) {
      c.pos.copy(c.home).y += 8; c.vel.set(0, 0, 0); syncBounds(c);
      emit(c.pos, 10, { colors: ['#ffffff', '#c9a26b'], speed: 6 });
    }
  }
}

// ---------------------------------------------------------------------
// Death debris ("falling apart" ragdoll)
// ---------------------------------------------------------------------
function spawnDebris(ch) {
  ch.av.root.updateMatrixWorld(true);
  for (const m of ch.av.meshes) {
    const piece = new THREE.Mesh(m.geometry, m.material);
    m.getWorldPosition(piece.position);
    m.getWorldQuaternion(piece.quaternion);
    piece.castShadow = true;
    if (m === ch.av.head) {
      const f = new THREE.Mesh(AV_GEO.face, ch.av.mats.face);
      piece.add(f);
    }
    scene.add(piece);
    const vel = new V3(rand(-12, 12), rand(6, 22), rand(-12, 12)).addScaledVector(ch.body.vel, 0.4);
    world.debris.push({
      mesh: piece, pos: piece.position, vel, half: new V3(0.5, 0.5, 0.5),
      ang: new V3(rand(-9, 9), rand(-9, 9), rand(-9, 9)), r: 0.5, life: 3.2,
    });
  }
}
function stepDebris(dt) {
  for (let i = world.debris.length - 1; i >= 0; i--) {
    const d = world.debris[i];
    d.life -= dt;
    if (d.life <= 0 || d.pos.y < LAVA_Y - 4) {
      scene.remove(d.mesh);
      world.debris.splice(i, 1);
      continue;
    }
    d.vel.y -= GRAVITY * dt;
    d.pos.addScaledVector(d.vel, dt);
    const cands = gather(d, [world.statics, world.crates], _sphereCands, d.vel.length() * dt + 1, null);
    if (sphereVsBoxes(d.pos, d.vel, d.r, cands, 0.3, 0.92)) d.ang.multiplyScalar(0.9);
    d.mesh.rotation.x += d.ang.x * dt;
    d.mesh.rotation.y += d.ang.y * dt;
    d.mesh.rotation.z += d.ang.z * dt;
    const s = clamp(d.life / 0.4, 0, 1);
    d.mesh.scale.setScalar(s);
  }
}

// ---------------------------------------------------------------------
// Characters: player + wandering lobby NPCs
// ---------------------------------------------------------------------
const characters = [];
function spawnPoint(i) {
  const cp = world.checkpoints[i] || world.checkpoints[0];
  return new V3(cp.spawn.x + rand(-0.5, 0.5), cp.spawn.y + 2.5 + 0.05, cp.spawn.z + rand(-0.5, 0.5));
}
function createCharacter({ name, colors, isPlayer, spawn }) {
  const ch = {
    name, isPlayer, colors, av: buildAvatar(colors),
    body: { pos: spawn.clone(), vel: new V3(), half: new V3(0.9, 2.5, 0.9), grounded: false, ground: null, stepUp: 0 },
    facing: Math.PI, walkSpeed: WALK_SPEED, climbing: false, climbCd: 0, coyote: 0, jumpCd: 0, jumpReady: true,
    dead: false, health: 100, respawnT: 0, animPhase: 0, stepSign: false, visualY: 0,
    emote: null, bubble: null, nameTag: null, canPush: true, moveX: 0, moveZ: 0,
  };
  characters.push(ch);
  return ch;
}

// Spawn "force field" shimmer
const ffMat = new THREE.MeshBasicMaterial({ color: col('#7fd6ff'), transparent: true, opacity: 0, depthWrite: false, blending: THREE.AdditiveBlending });
const ffMesh = new THREE.Mesh(new THREE.SphereGeometry(3.4, 24, 16), ffMat);
ffMesh.position.y = 2.6;
player.av.root.add(ffMesh);
let ffTime = 0;

function sayAs(ch, text) {
  showBubble(ch, text);
  addChatLine(ch.name, text, ch.isPlayer ? '#9fe0ff' : nameColor(ch.name));
}

function npcReply(text) {
  const t = text.toLowerCase();
  let reply = null;
  if (/\b(hi|hello|hey|yo|sup)\b/.test(t)) reply = pick(['hi!!', 'hey :)', 'hello!', 'yo!']);
  else if (/\b(gg|nice|wow|cool)\b/.test(t)) reply = pick(['ty!', 'gg :D', 'ikr']);
  else if (t.includes('?')) reply = pick(['idk lol', 'maybe?', 'good question', 'try the bounce pads']);
  if (!reply || Math.random() < 0.25) return;
  const n = pick(npcs);
  setTimeout(() => { if (!n.dead) sayAs(n, reply); }, rand(900, 2200));
}

// ---------------------------------------------------------------------
// Game rules: death, checkpoints, coins, win
// ---------------------------------------------------------------------
function killCharacter(ch) {
  if (ch.dead) return;
  ch.dead = true;
  ch.health = 0;
  ch.respawnT = ch.isPlayer ? 2.4 : 3;
  spawnDebris(ch);
  ch.av.root.visible = false;
  if (ch.isPlayer) {
    state.deaths++;
    sfx.death();
    ui.dirty = true;
    saveGame();
  }
}
function respawnCharacter(ch) {
  const b = ch.body;
  b.pos.copy(ch.isPlayer ? spawnPoint(state.stage) : new V3(rand(-20, 6), 3, rand(-20, 20)));
  b.vel.set(0, 0, 0);
  b.grounded = false; b.ground = null;
  ch.dead = false; ch.health = 100; ch.climbing = false; ch.visualY = 0; ch.emote = null;
  ch.facing = Math.PI;
  ch.av.root.visible = true;
  if (ch.isPlayer) {
    ffTime = 1.6;
    sfx.spawn();
    emit(_tmp.set(b.pos.x, b.pos.y, b.pos.z), 24, { colors: ['#7fd6ff', '#ffffff'], speed: 7, up: 8, size: 0.3 });
    ui.dirty = true;
  }
}
function reachCheckpoint(i) {
  if (i <= state.stage) return;
  state.stage = i;
  const cp = world.checkpoints[i];
  cp.flagMat.color.copy(col('#3fbf5f'));
  sfx.checkpoint();
  emit(_tmp.copy(cp.spawn).setY(cp.spawn.y + 1), 50, { colors: ['#3fbf5f', '#ffffff', '#ffd84a'], speed: 14, up: 16, size: 0.4, life: 1.2 });
  showBanner(`Stage ${i}`, `Next: ${SECTION_NAMES[i]}`);
  addSystemChat(`Checkpoint! You reached stage ${i}.`);
  ui.dirty = true;
  saveGame();
}
function collectCoin(c, silent) {
  if (c.collected) return;
  c.collected = true;
  c.mesh.visible = false;
  state.collected.add(c.id);
  state.coins = state.collected.size;
  if (!silent) {
    sfx.coin();
    emit(c.pos, 14, { colors: ['#ffd84a', '#fff3b0', '#ffb000'], speed: 6, up: 6, size: 0.28, life: 0.7 });
    popCoins();
    saveGame();
  }
  ui.dirty = true;
}
function checkCoins(b) {
  for (const c of world.coins) {
    if (c.collected) continue;
    _q.set(
      clamp(c.pos.x, b.pos.x - b.half.x, b.pos.x + b.half.x),
      clamp(c.pos.y, b.pos.y - b.half.y, b.pos.y + b.half.y),
      clamp(c.pos.z, b.pos.z - b.half.z, b.pos.z + b.half.z)
    );
    if (_q.distanceToSquared(c.pos) < 1.1 * 1.1) collectCoin(c);
  }
}
let confettiT = 0;
function winGame() {
  if (state.won) return;
  state.won = true;
  state.timerRunning = false;
  if (state.bestTime === null || state.runTime < state.bestTime) state.bestTime = state.runTime;
  sfx.win();
  confettiT = 3;
  addSystemChat(`${state.playerName} finished the obby in ${fmtTime(state.runTime)}!`);
  setTimeout(() => sayAs(pick(npcs), pick(['GG!!', 'congrats!', 'woah nice time', 'teach me your ways'])), 1500);
  showWin();
  saveGame();
}

// ---------------------------------------------------------------------
// Camera: orbit / shift-lock / first person, with collision
// ---------------------------------------------------------------------
const cam = { yaw: 0, pitch: 0.3, dist: 15, targetDist: 15, min: 0.5, max: 60, shiftLock: false, fp: false, focus: new V3(0, 3, 10), titleT: 0 };
const raycaster = new THREE.Raycaster();
const _camDir = new V3(), _camFocus = new V3();

function cameraForward() { return { x: -Math.sin(cam.yaw), z: -Math.cos(cam.yaw) }; }

function updateSun() {
  const f = state.started ? player.body.pos : cam.focus;
  const sx = Math.round(f.x / 2) * 2, sy = Math.round(f.y / 2) * 2, sz = Math.round(f.z / 2) * 2;
  sun.target.position.set(sx, sy, sz);
  sun.position.set(sx + SKY.sunDir.x * 200, sy + SKY.sunDir.y * 200, sz + SKY.sunDir.z * 200);
}

// ---------------------------------------------------------------------
// Input: keyboard, mouse, touch
// ---------------------------------------------------------------------
const keys = new Set();
const touch = { active: false, mx: 0, mz: 0, jump: false, joyId: null, joyCx: 0, joyCy: 0, cam: new Map(), pinch: 0 };
const isTouch = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
let rmbDown = false;
const _inp = { mx: 0, mz: 0, jump: false };
const IDLE_INPUT = { mx: 0, mz: 0, jump: false };

canvas.addEventListener('contextmenu', (e) => e.preventDefault());
canvas.addEventListener('mousedown', (e) => {
  if (!state.started || state.menuOpen) return;
  if (state.chatFocused) el.chatInput.blur();
  if (e.button === 2) rmbDown = true;
  if ((cam.shiftLock || cam.fp) && document.pointerLockElement !== canvas && canvas.requestPointerLock) canvas.requestPointerLock();
});
window.addEventListener('mouseup', (e) => { if (e.button === 2) rmbDown = false; });
window.addEventListener('mousemove', (e) => {
  if (!state.started || state.menuOpen) return;
  if (rmbDown || document.pointerLockElement === canvas) rotateCam(e.movementX || 0, e.movementY || 0);
});
canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  if (!state.started || state.menuOpen) return;
  zoomBy(e.deltaY > 0 ? 1.15 : 1 / 1.15);
}, { passive: false });

// Touch: virtual joystick (left), drag-to-look & pinch zoom (right), jump button
function setupTouch() {
  const zone = $('joy-zone'), base = $('joy-base'), knob = $('joy-knob'), jumpBtn = $('btn-jump');
  const R = 52;
  zone.addEventListener('pointerdown', (e) => {
    e.preventDefault();
    if (touch.joyId !== null) return;
    touch.joyId = e.pointerId;
    zone.setPointerCapture(e.pointerId);
    const r = zone.getBoundingClientRect();
    touch.joyCx = e.clientX; touch.joyCy = e.clientY;
    base.style.left = e.clientX - r.left + 'px';
    base.style.top = e.clientY - r.top + 'px';
    base.classList.add('active');
  });
  zone.addEventListener('pointermove', (e) => {
    if (e.pointerId !== touch.joyId) return;
    let dx = e.clientX - touch.joyCx, dy = e.clientY - touch.joyCy;
    const l = Math.hypot(dx, dy);
    if (l > R) { dx = (dx / l) * R; dy = (dy / l) * R; }
    knob.style.transform = `translate(${dx}px, ${dy}px)`;
    touch.mx = dx / R; touch.mz = -dy / R; touch.active = true;
  });
  const endJoy = (e) => {
    if (e.pointerId !== touch.joyId) return;
    touch.joyId = null; touch.active = false; touch.mx = touch.mz = 0;
    knob.style.transform = 'translate(0px, 0px)';
    base.classList.remove('active');
  };
  zone.addEventListener('pointerup', endJoy);
  zone.addEventListener('pointercancel', endJoy);
  jumpBtn.addEventListener('pointerdown', (e) => { e.preventDefault(); touch.jump = true; jumpBtn.classList.add('active'); });
  const endJump = () => { touch.jump = false; jumpBtn.classList.remove('active'); };
  jumpBtn.addEventListener('pointerup', endJump);
  jumpBtn.addEventListener('pointercancel', endJump);
  jumpBtn.addEventListener('pointerleave', endJump);

canvas.addEventListener('pointerdown', (e) => {
    if (e.pointerType === 'mouse') return;
    touch.cam.set(e.pointerId, { x: e.clientX, y: e.clientY });
    if (touch.cam.size === 2) touch.pinch = pinchDist();
  });
  canvas.addEventListener('pointermove', (e) => {
    if (e.pointerType === 'mouse' || !touch.cam.has(e.pointerId) || !state.started || state.menuOpen) return;
    const p = touch.cam.get(e.pointerId);
    if (touch.cam.size === 1) rotateCam((e.clientX - p.x) * 1.5, (e.clientY - p.y) * 1.5);
    p.x = e.clientX; p.y = e.clientY;
    if (touch.cam.size === 2) {
      const d = pinchDist();
      if (touch.pinch > 0 && d > 0) zoomBy(clamp(touch.pinch / d, 0.8, 1.25));
      touch.pinch = d;
    }
  });
  const endCam = (e) => { touch.cam.delete(e.pointerId); touch.pinch = 0; };
  canvas.addEventListener('pointerup', endCam);
  canvas.addEventListener('pointercancel', endCam);
  function pinchDist() {
    const [a, b] = [...touch.cam.values()];
    return a && b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
  }
}

// ---------------------------------------------------------------------
// HUD, chat, menus
// ---------------------------------------------------------------------
const el = {
  hud: $('hud'), title: $('title'), menu: $('menu'), win: $('win'),
  timer: $('timer-text'), coinText: $('coin-text'), coinBox: $('coin-counter'),
  healthFill: $('health-fill'), healthText: $('health-text'),
  leaderboard: $('leaderboard'), lbRows: $('lb-rows'),
  chatLog: $('chat-log'), chatInput: $('chat-input'), chat: $('chat'),
  banner: $('banner'), bannerTitle: $('banner-title'), bannerSub: $('banner-sub'),
  crosshair: $('crosshair'), shiftBtn: $('btn-shiftlock'), mobile: $('mobile'), hint: $('hint'),
};
const ui = { dirty: true, lbOpen: true, lastTimer: '' };

el.chatInput.addEventListener('focus', () => { state.chatFocused = true; keys.clear(); el.chat.classList.add('lit', 'typing'); });
el.chatInput.addEventListener('blur', () => { state.chatFocused = false; el.chat.classList.remove('typing'); });
el.chatInput.addEventListener('keydown', (e) => {
  e.stopPropagation();
  if (e.key === 'Enter') {
    sendChat(el.chatInput.value);
    el.chatInput.value = '';
    el.chatInput.blur();
  } else if (e.key === 'Escape') el.chatInput.blur();
});
function sendChat(raw) {
  const text = String(raw).trim().slice(0, 120);
  if (!text) return;
  if (text.startsWith('/')) {
    const cmd = text.toLowerCase();
    if (cmd === '/e dance' || cmd === '/e wave') { player.emote = cmd.slice(3); return; }
    if (cmd === '/reset') { killCharacter(player); return; }
    addSystemChat('Commands: /e dance, /e wave, /reset');
    return;
  }
  sayAs(player, text);
  npcReply(text);
}

// Menu
function openMenu(tab = 'settings') {
  state.menuOpen = true;
  state.paused = state.started;
  keys.clear();
  rmbDown = false;
  if (document.pointerLockElement) document.exitPointerLock();
  el.menu.classList.remove('hidden');
  selectTab(tab);
  $('btn-reset').disabled = !state.started;
  $('btn-restart').disabled = !state.started;
  $('btn-resume').textContent = state.started ? 'Resume' : 'Done';
}
function closeMenu() {
  state.menuOpen = false;
  state.paused = false;
  el.menu.classList.add('hidden');
  if (cam.shiftLock && state.started && !isTouch && canvas.requestPointerLock) canvas.requestPointerLock();
}
function toggleMenu() { if (state.menuOpen) closeMenu(); else openMenu(); }
function selectTab(tab) {
  document.querySelectorAll('.tab').forEach((b) => b.classList.toggle('active', b.dataset.tab === tab));
  document.querySelectorAll('.tab-pane').forEach((p) => p.classList.toggle('hidden', p.id !== 'tab-' + tab));
}
document.querySelectorAll('.tab').forEach((b) => b.addEventListener('click', () => { sfx.click(); selectTab(b.dataset.tab); }));

// Settings
const QUALITY = {
  low: { pr: 1, shadows: false, size: 1024 },
  medium: { pr: Math.min(window.devicePixelRatio || 1, 1.5), shadows: true, size: 1024 },
  high: { pr: Math.min(window.devicePixelRatio || 1, 2), shadows: true, size: 2048 },
};
function applySettings() {
  const s = state.settings;
  const q = QUALITY[s.quality] || QUALITY.high;
  renderer.setPixelRatio(q.pr);
  renderer.setSize(window.innerWidth, window.innerHeight);
  sun.castShadow = q.shadows;
  if (sun.shadow.mapSize.x !== q.size) {
    sun.shadow.mapSize.set(q.size, q.size);
    if (sun.shadow.map) { sun.shadow.map.dispose(); sun.shadow.map = null; }
  }
  camera.fov = s.fov;
  camera.updateProjectionMatrix();
  if (audio.master) audio.master.gain.value = s.volume;
  if (s.music) startMusic(); else stopMusic();
  if (!s.shiftLock && cam.shiftLock) setShiftLock(false);
  el.shiftBtn.classList.toggle('hidden', !s.shiftLock);
  $('set-quality').value = s.quality;
  $('set-sens').value = s.sensitivity;
  $('set-fov').value = s.fov;
  $('set-vol').value = s.volume;
  $('set-music').checked = s.music;
  $('set-shiftlock').checked = s.shiftLock;
  $('val-sens').textContent = Number(s.sensitivity).toFixed(1) + 'x';
  $('val-fov').textContent = s.fov + '°';
  $('val-vol').textContent = Math.round(s.volume * 100) + '%';
}
function bindSetting(id, key, parse) {
  $(id).addEventListener('input', (e) => {
    const t = e.target;
    state.settings[key] = parse(t.type === 'checkbox' ? t.checked : t.value);
    if (key === 'music' || key === 'volume') initAudio();
    applySettings();
    saveGame();
  });
}
bindSetting('set-quality', 'quality', String);
bindSetting('set-sens', 'sensitivity', Number);
bindSetting('set-fov', 'fov', Number);
bindSetting('set-vol', 'volume', Number);
bindSetting('set-music', 'music', Boolean);
bindSetting('set-shiftlock', 'shiftLock', Boolean);

// Avatar editor
const PALETTE = {
  skin: ['#ffdbac', '#f2c49b', '#e0ac69', '#c68642', '#8d5524', '#5c3a21'],
  shirt: ['#e2483d', '#ff8a3d', '#ffcf3d', '#3ddc84', '#2f9e6a', '#3d8bff', '#7b5cff', '#ff5c8a', '#f2f4f7', '#2b2f36'],
  pants: ['#2c3e66', '#1f2a44', '#3b3b46', '#5a3e2b', '#2f6f4f', '#6b6b75', '#111318', '#7a1f2b'],
};
function buildAvatarEditor() {
  document.querySelectorAll('.swatches').forEach((wrap) => {
    const key = wrap.dataset.key;
    wrap.innerHTML = '';
    if (key === 'face') {
      FACES.forEach((f) => {
        const b = document.createElement('button');
        b.className = 'swatch face-swatch';
        b.title = f;
        const c = document.createElement('canvas');
        c.width = c.height = 64;
        const g = c.getContext('2d');
        g.fillStyle = state.avatar.skin; g.fillRect(0, 0, 64, 64);
        g.drawImage(FACE_TEX[f].image, 0, 0, 64, 64);
        b.appendChild(c);
        b.classList.toggle('selected', state.avatar.face === f);
        b.addEventListener('click', () => { state.avatar.face = f; onAvatarChange(); });
        wrap.appendChild(b);
      });
      return;
    }
    PALETTE[key].forEach((hex) => {
      const b = document.createElement('button');
      b.className = 'swatch';
      b.style.background = hex;
      b.title = hex;
      b.classList.toggle('selected', state.avatar[key] === hex);
      b.addEventListener('click', () => { state.avatar[key] = hex; onAvatarChange(); });
      wrap.appendChild(b);
    });
  });
  $('name-input').value = state.playerName;
}
function onAvatarChange() {
  sfx.click();
  setAvatarLook(player.av, state.avatar);
  buildAvatarEditor();
  saveGame();
}
$('name-input').addEventListener('change', (e) => {
  const v = e.target.value.replace(/[^A-Za-z0-9_]/g, '').slice(0, 20);
  if (v.length >= 3) { state.playerName = v; player.name = v; ui.dirty = true; saveGame(); }
  e.target.value = state.playerName;
});
$('name-input').addEventListener('keydown', (e) => e.stopPropagation());

// ---------------------------------------------------------------------
// Save / load / progress
// ---------------------------------------------------------------------
function saveGame() {
  try {
    localStorage.setItem(SAVE_KEY, JSON.stringify({
      stage: state.stage, coins: [...state.collected], deaths: state.deaths, runTime: state.runTime,
      bestTime: state.bestTime, won: state.won, settings: state.settings, avatar: state.avatar, name: state.playerName,
    }));
  } catch (e) { /* storage unavailable */ }
}
function loadGame() {
  let s = null;
  try { s = JSON.parse(localStorage.getItem(SAVE_KEY) || 'null'); } catch (e) { s = null; }
  if (!s || typeof s !== 'object') return;
  if (Number.isInteger(s.stage)) state.stage = clamp(s.stage, 0, LAST_CHECKPOINT);
  if (Array.isArray(s.coins)) s.coins.forEach((id) => { const c = world.coins[id]; if (c) collectCoin(c, true); });
  if (Number.isFinite(s.deaths)) state.deaths = s.deaths;
  if (Number.isFinite(s.runTime)) state.runTime = s.runTime;
  if (Number.isFinite(s.bestTime)) state.bestTime = s.bestTime;
  state.won = !!s.won;
  if (s.settings && typeof s.settings === 'object') Object.assign(state.settings, s.settings);
  if (s.avatar && typeof s.avatar === 'object') Object.assign(state.avatar, s.avatar);
  if (typeof s.name === 'string' && /^[A-Za-z0-9_]{3,20}$/.test(s.name)) { state.playerName = s.name; player.name = s.name; }
}
function refreshFlags() {
  world.checkpoints.forEach((cp, i) => cp.flagMat.color.copy(col(i === 0 || i <= state.stage ? '#3fbf5f' : '#e23b3b')));
}
function resetProgress() {
  state.stage = 0; state.deaths = 0; state.runTime = 0; state.timerRunning = false; state.won = false;
  state.collected.clear(); state.coins = 0;
  world.coins.forEach((c) => { c.collected = false; c.mesh.visible = true; });
  refreshFlags();
  respawnCharacter(player);
  cam.yaw = 0; cam.pitch = 0.3;
  ui.dirty = true;
  saveGame();
  showBanner('New Run', 'Timer starts when you move');
}

// Win screen
function showWin() {
  $('win-time').textContent = fmtTime(state.runTime);
  $('win-best').textContent = state.bestTime !== null ? fmtTime(state.bestTime) : '—';
  $('win-deaths').textContent = state.deaths;
  $('win-coins').textContent = `${state.coins}/${world.coins.length}`;
  setTimeout(() => {
    el.win.classList.remove('hidden');
    if (document.pointerLockElement) document.exitPointerLock();
  }, 900);
}
$('btn-again').addEventListener('click', () => { sfx.click(); el.win.classList.add('hidden'); resetProgress(); });
$('btn-explore').addEventListener('click', () => { sfx.click(); el.win.classList.add('hidden'); });

// Buttons
$('btn-menu').addEventListener('click', () => { sfx.click(); toggleMenu(); });
$('btn-chat').addEventListener('click', () => { sfx.click(); el.chat.classList.toggle('collapsed'); });
el.shiftBtn.addEventListener('click', () => { sfx.click(); setShiftLock(!cam.shiftLock); });
$('btn-resume').addEventListener('click', () => { sfx.click(); closeMenu(); });
$('btn-reset').addEventListener('click', () => { sfx.click(); closeMenu(); killCharacter(player); });
$('btn-restart').addEventListener('click', () => {
  sfx.click();
  if (window.confirm('Restart the obby from stage 0? Your coins and timer will reset.')) { closeMenu(); resetProgress(); }
});
$('btn-title-settings').addEventListener('click', () => { initAudio(); sfx.click(); openMenu('settings'); });
$('btn-title-avatar').addEventListener('click', () => { initAudio(); sfx.click(); openMenu('avatar'); });
$('btn-play').addEventListener('click', startGame);

// ---------------------------------------------------------------------
// Main loop
// ---------------------------------------------------------------------
function fixedUpdate(dt) {
  state.time += dt;
  updateMovers(state.time);
  updateSpinners(dt);
  updateFaders(dt, player.body);
  if (state.started) updatePlayerFixed(dt);
  else stepCharacter(player, dt, IDLE_INPUT);
  updateNPCsFixed(dt);
  stepCrates(dt);
  stepBalls(dt, characters);
  stepDebris(dt);
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// ---------------------------------------------------------------------
// Boot
// ---------------------------------------------------------------------
loadGame();
setAvatarLook(player.av, state.avatar);
refreshFlags();
player.body.pos.copy(spawnPoint(state.stage));
npcs.forEach((n) => { n.coins = randInt(0, 2); });
applySettings();
buildAvatarEditor();
if (isTouch) setupTouch();
{
  const parts = [];
  if (state.stage > 0) parts.push(`Stage ${state.stage}`);
  parts.push(`Coins ${state.coins}/${world.coins.length}`);
  if (state.bestTime !== null) parts.push(`Best ${fmtTime(state.bestTime)}`);
  $('title-progress').textContent = parts.join('  ·  ');
  if (state.stage > 0 && !state.won) $('btn-play').textContent = 'Continue';
}
$('loading').classList.add('hidden');
requestAnimationFrame(frame);

// Debug/automation hook (read-only snapshot)
window.__obby = { state, player, world, cam };
})();