Juego en línea de Roblox

34 Robloxx

Remix Abrir en el editor Publica tu código

Recomendado

14 May 2025

Un código de kaiser.zulassungsservice.gmbh

8 February 2025

Menú radial

20 March 2026

Ejemplo de formulario de inicio de sesión HTML con inicio de sesión social

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 };
})();