<?php
/**
 * index.php — PHP-rendered game entry point
 *
 * Login screen is always served (no auth required).
 * Game DOM + modules only rendered for authenticated users.
 * Admin-only panels conditionally included.
 *
 * Issue #282 — PHP-gated game architecture
 */
declare(strict_types=1);

require_once '/var/game/os/api/config.php';

// Check auth status without requiring it (login screen must be visible)
$authenticated = false;
$isAdminUser = false;
$username = '';

if (!empty($_SESSION['user_id'])) {
    $authenticated = true;
    $username = $_SESSION['username'] ?? '';
    $isAdminUser = isAdmin();
}

// ?login_error=<code> is set by api/auth.php when the Discord callback fails
$loginErrors = [
    'denied'  => 'Discord login was cancelled. Click Login with Discord to try again.',
    'state'   => 'Your login request expired or was opened in another tab. Please try again.',
    'discord' => 'Discord returned an error during login. Please try again.',
    'token'   => 'Couldn\'t verify your Discord account. Please try again in a moment.',
    'server'  => 'The server hit an error while signing you in. Please try again shortly.',
];
$loginError = '';
if (isset($_GET['login_error']) && is_string($_GET['login_error'])) {
    $loginError = $loginErrors[$_GET['login_error']] ?? 'Login failed. Please try again.';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OriginStory</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <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=Press+Start+2P&family=Pixelify+Sans:wght@400;600;700&display=swap">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/home.css">
</head>
<body data-authenticated="<?= $authenticated ? 'true' : 'false' ?>"<?php if ($isAdminUser): ?> data-admin="true"<?php endif; ?>>

    <!-- Scanline CRT effect -->
    <div class="scanlines"></div>

    <!-- Starfield -->
    <canvas id="stars"></canvas>

    <!-- Floating rune symbols -->
    <div class="rune" style="left:5%;  animation-delay:0s;   animation-duration:9s">✦</div>
    <div class="rune" style="left:12%; animation-delay:2s;   animation-duration:11s">᛫</div>
    <div class="rune" style="left:82%; animation-delay:1s;   animation-duration:8s">✧</div>
    <div class="rune" style="left:90%; animation-delay:3.5s; animation-duration:12s">⋆</div>
    <div class="rune" style="left:70%; animation-delay:5s;   animation-duration:10s">᛭</div>
    <div class="rune" style="left:25%; animation-delay:4s;   animation-duration:13s">✦</div>
    <div class="rune" style="left:55%; animation-delay:6s;   animation-duration:9s">᛫</div>
    <div class="rune" style="left:40%; animation-delay:7s;   animation-duration:11s">✧</div>

    <!-- Login Screen (always visible) -->
    <div id="login-screen">
        <div class="title-wrap">
          <h1>OriginStory</h1>
          <p class="sub">A Realm Unbound</p>
        </div>
        <div class="title-divider"><span class="title-gem"></span></div>
         <div class="panel" id="login-panel">
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <div id="login-error" class="login-error" role="alert"<?php if (!$loginError): ?> hidden<?php endif; ?>><?= htmlspecialchars($loginError) ?></div>
            <a href="/api/auth.php?action=login" class="btn btn-discord" id="btn-login">
              <svg class="btn-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2" y="3"  width="12" height="9"  rx="2" fill="#fff" opacity=".9"/>
                <circle cx="5.5" cy="7.5" r="1.5" fill="#5865f2"/>
                <circle cx="10.5" cy="7.5" r="1.5" fill="#5865f2"/>
                <path d="M4 11 Q8 13 12 11" stroke="#5865f2" stroke-width="1.2" fill="none"/>
                <path d="M2 3 L5 1 M14 3 L11 1" stroke="#fff" stroke-width="1" opacity=".6"/>
              </svg>
              LOGIN WITH DISCORD
            </a>
            <a href="/wiki/" class="btn btn-db">
              <svg class="btn-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="8" cy="4"  rx="5" ry="2"  fill="#fff" opacity=".9"/>
                <rect    x="3"  y="4"   width="10" height="3"  fill="#1e96c8"/>
                <ellipse cx="8" cy="7"  rx="5" ry="2"  fill="#fff" opacity=".7"/>
                <rect    x="3"  y="7"   width="10" height="3"  fill="#1e96c8"/>
                <ellipse cx="8" cy="10" rx="5" ry="2"  fill="#fff" opacity=".5"/>
                <rect    x="3"  y="10"  width="10" height="2"  fill="#1e96c8"/>
                <ellipse cx="8" cy="12" rx="5" ry="2"  fill="#50c8f0" opacity=".8"/>
              </svg>
              VIEW WIKI
            </a>
          </div>
          <div class="panel hidden" id="session-ended-panel">
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <p class="session-ended-text">Your session was opened elsewhere.<br>You can close this tab now.</p>
          </div>
          <div class="footer">
            A 3D Adventure &nbsp;·&nbsp; Built with
            <a href="https://claude.ai" target="_blank" rel="noopener">Claude.ai</a>
          </div>
    </div>

<?php if ($authenticated): ?>
    <!-- === GAME DOM (authenticated users only) === -->

    <!-- Loading Screen -->
    <div id="loading-screen">
        <div class="db-loading-inner">
            <div class="db-loading-dots">
                <span></span><span></span><span></span>
            </div>
            <div class="db-loading-text">Loading world</div>
        </div>
    </div>

    <!-- Game Canvas -->
    <canvas id="game-canvas"></canvas>

    <!-- HUD -->
    <div id="hud">
        <div class="xp-bar">
            <div id="xp-fill" style="width: 0%"></div>
            <div id="xp-text">Lv. 1</div>
        </div>
        <div id="cast-bar" style="display:none">
            <div id="cast-bar-label">Realm Cast</div>
            <div id="cast-bar-track">
                <div id="cast-bar-fill"></div>
            </div>
            <div id="cast-bar-timer"></div>
        </div>
        <!-- Downed (mechanics/deathSystem.js setDownedUi): bleed-out bar + hold-E give up; body.player-downed adds the screen vignette -->
        <div id="downed-vignette" aria-hidden="true"></div>
        <div id="downed-bar" style="display:none">
            <div class="downed-head">
                <span class="downed-label">Downed</span>
                <span id="downed-time" class="downed-time">10s</span>
            </div>
            <div class="downed-track"><div id="downed-fill"></div></div>
            <div class="downed-hint">An ally can revive you before you bleed out</div>
            <div id="giveup-bar" style="display:none">
                <div class="giveup-label"><span class="giveup-key">E</span> Hold to give up</div>
                <div class="giveup-track"><div id="giveup-fill"></div></div>
            </div>
        </div>
        <div id="zone-timer" style="display:none">
            <div class="zt-label">LEAVING IN</div>
            <div id="zt-value" class="zt-value">5:00</div>
            <div class="zt-track"><div id="zt-fill" class="zt-fill"></div></div>
        </div>
        <div id="top-right-hud">
            <!-- clock sits atop the top-right stack (#385) -->
            <div id="world-clock" class="world-clock" style="display:none">
                <span id="world-clock-period" class="world-clock-period">—</span>
                <span id="world-clock-value" class="world-clock-value">--:--</span>
            </div>
            <div id="decay-indicator" style="display:none">
                <div class="decay-ind-label">Decay 0% — Stable</div>
                <div class="decay-ind-track"><div class="decay-ind-fill"></div></div>
            </div>
            <div id="quest-tracker" style="display:none"></div>
        </div>
        <div id="zone-banner" style="display:none">
            <div class="zb-sub">Entering</div>
            <div id="zb-name" class="zb-name">—</div>
            <div id="zb-tier" class="zb-tier" style="display:none"></div>
        </div>
        <div id="bottom-left-frames">
            <div id="party-frames" style="display:none"></div>
            <div id="player-frame">
                <div class="pf-level-badge">Lv.<span id="pf-level">1</span></div>
                <div class="pf-info">
                    <div id="pf-name" class="pf-name">—</div>
                    <div class="pf-hp-row">
                        <div class="pf-hp-track"><div id="pf-hp-fill"></div></div>
                        <span id="pf-hp-text" class="pf-hp-text">—</span>
                    </div>
                </div>
            </div>
            <!-- Void clock (ui/realmTimer.js): in a realm, the dial's ring is eaten by the void as it
                 decays (decay % in the middle), the time to collapse beside it -->
            <div id="realm-timer-hud" style="display:none">
                <div class="void-dial">
                    <div class="void-ring"></div>
                    <div class="void-core"><div class="void-swirl"></div></div>
                    <span id="realm-decay-pct" class="void-pct">0%</span>
                </div>
                <div class="void-info">
                    <span id="realm-timer-label" class="void-label">Realm Stable</span>
                    <span id="realm-timer-text" class="void-time">0:00</span>
                    <span class="void-sub">until collapse</span>
                </div>
            </div>
        </div>
        <!-- Character screen (#385) — opens with the inventory (Tab), Diablo IV-style:
             left = Character | Party tabs, right = Skills | Talents | Quests tabs (#396, ui/panelTabs.js,
             wired in ui/sidePanelTabs.js). Visibility comes from #hud.hud--inv-open (set by ui/inventory.js). -->
        <aside id="char-panel" class="os-panel os-side-panel">
            <header class="os-panel-header os-panel-header--tabs">
                <nav class="os-tabs">
                    <button type="button" class="os-tab" data-tab="character"><span class="os-tab-label">Character</span><span class="os-tab-badge"></span></button>
                    <button type="button" class="os-tab" data-tab="party"><span class="os-tab-label">Party</span><span class="os-tab-badge"></span></button>
                </nav>
            </header>
            <section class="os-tab-page" data-tab="character">
            <div class="char-identity">
                <span id="char-name" class="char-name">—</span>
                <span id="char-sub" class="char-sub">Level 1</span>
            </div>
            <div class="paper-doll">
                <div class="equip-slot" data-slot="head"><span class="equip-label">Head</span></div>
                <div class="equip-slot" data-slot="chest"><span class="equip-label">Chest</span></div>
                <div class="equip-slot" data-slot="legs"><span class="equip-label">Legs</span></div>
                <div class="equip-slot" data-slot="feet"><span class="equip-label">Feet</span></div>
                <div class="equip-slot" data-slot="neck"><span class="equip-label">Neck</span></div>
                <div class="equip-slot" data-slot="ring1"><span class="equip-label">Ring</span></div>
                <div class="equip-slot" data-slot="ring2"><span class="equip-label">Ring</span></div>
                <div class="equip-slot trinket-slot" data-slot="trinket"><span class="equip-label">Trinket</span></div>
                <div class="char-portrait"><div class="char-portrait-figure"></div></div>
                <div class="equip-slot" data-slot="main_hand"><span class="equip-label">Main</span></div>
                <div class="equip-slot" data-slot="off_hand"><span class="equip-label">Off</span></div>
            </div>
            <!-- Gold pouch (#389): not an equip slot — carried Coins (inventory slots 100–103) drawn as a pixel pouch
                 hanging off the panel's gold right edge (ui/itemIcons.js pixelPouch). Fill state + hover amount + drag to the stash: ui/inventory.js _renderPouch -->
            <div id="gold-pouch" data-fill="empty" aria-label="Gold pouch">
                <img class="pouch-art" alt="" draggable="false">
                <span class="pouch-bump" aria-hidden="true"></span>
            </div>
            <!-- Tool sling: the 'tool' equip slot (one axe or pickaxe for realm harvesting) drawn as a leather
                 loop hanging under the gold pouch (ui/itemIcons.js pixelSling). data-tool = none | axe | pickaxe. Drop a tool on it to equip; right-click / drag off to unequip: ui/inventory.js _setupSling -->
            <div id="tool-sling" data-tool="none" aria-label="Tool sling (empty)">
                <img class="sling-art" alt="" draggable="false">
            </div>
            <div class="os-panel-body">
                <div class="os-section-title">Attributes</div>
                <div id="stats-panel"></div>
                <div id="talents-summary"></div>
            </div>
            </section>
            <!-- Party (ui/party.js) — P opens the character screen on this tab -->
            <section class="os-tab-page" data-tab="party" id="party-page">
                <div class="os-panel-body">
                    <div id="party-no-party">
                        <div class="party-blurb">You're not in a party.</div>
                        <div class="party-blurb">To adventure together, walk up to another player, hold <b>[E]</b> and choose <b>Invite</b>.</div>
                    </div>
                    <div id="party-in-party" style="display:none">
                        <div class="os-section-title">Members</div>
                        <div id="party-members" class="party-members-list"></div>
                        <button id="party-pull-btn" class="party-btn" style="display:none">Pull to My Zone</button>
                        <button id="party-follow-btn" class="party-btn" style="display:none">Follow Leader</button>
                        <button id="party-leave-btn" class="party-btn party-btn-danger">Leave Party</button>
                    </div>
                </div>
            </section>
        </aside>
        <aside id="spellbook-panel" class="os-panel os-side-panel">
            <header class="os-panel-header os-panel-header--tabs">
                <nav class="os-tabs">
                    <button type="button" class="os-tab" data-tab="skills" id="skills-heading"><span class="os-tab-label">Skills</span><span class="os-tab-badge"></span></button>
                    <button type="button" class="os-tab" data-tab="talents" id="talents-heading"><span class="os-tab-label">Talents</span><span class="os-tab-badge"></span></button>
                    <button type="button" class="os-tab" data-tab="quests"><span class="os-tab-label">Quests</span><span class="os-tab-badge"></span></button>
                </nav>
            </header>
            <section class="os-tab-page" data-tab="skills"><div class="os-panel-body"><div id="skills-panel"></div></div></section>
            <section class="os-tab-page" data-tab="talents"><div class="os-panel-body"><div id="talents-panel"></div></div></section>
            <section class="os-tab-page" data-tab="quests"><div class="os-panel-body"><div id="quest-log"></div></div></section>
        </aside>
        <div id="hotbar-row">
            <!-- hp orb (#385) — fill height set by ui/hud.js -->
            <div class="vital-orb vital-orb--hp">
                <div class="orb-liquid"><div id="health-fill" class="orb-fill"></div></div>
                <div class="orb-glass"></div>
                <div id="health-text" class="orb-text">100 / 100</div>
                <span class="orb-label">Health</span>
                <!-- Q quick slot as a mini orb (#belt-slot): an equipment slot holding up to 10 potions (out of the bag) -->
                <div class="mini-orb mini-orb--potion" id="belt-slot" title="Quick slot — drag potions here (up to 10, they leave your bag), press Q to drink, right-click or drag off to put them back">
                    <span class="mini-orb-key">Q</span>
                    <div class="ability-cd-overlay"></div>
                </div>
                <!-- Realm Book hex (#realm-book-orb, relic slot) at the health orb's upper-right: fills purple with realm charges, cast out at full — ui/hud.js syncRealmBookOrb -->
                <div class="mini-orb mini-orb--book" id="realm-book-orb" data-state="empty">
                    <span class="mini-orb-key">R</span>
                    <div class="book-orb-frame"></div>
                    <div class="book-orb-liquid"><div class="book-orb-fill"></div></div>
                    <span class="book-orb-icon">&#x1F4D6;</span>
                    <span class="book-orb-count">0</span>
                </div>
            </div>
            <div id="inventory-panel">
                <div class="panel-corner-tl"></div>
                <div class="panel-corner-tr"></div>
                <div class="panel-corner-bl"></div>
                <div class="panel-corner-br"></div>
                <!-- Inventory drawer: only shown while the Tab panel is open (#384) -->
                <div id="inv-drawer">
                    <div id="inv-right-col">
                        <div id="inventory-grid"></div>
                        <div id="hotbar">
                            <div class="hotbar-slot" data-slot="0"></div>
                            <div class="hotbar-slot" data-slot="1"></div>
                            <div class="hotbar-slot" data-slot="2"></div>
                            <div class="hotbar-slot" data-slot="3"></div>
                            <div class="hotbar-slot" data-slot="4"></div>
                            <div class="hotbar-slot" data-slot="5"></div>
                        </div>
                    </div>
                    <button id="haven-build-btn" title="Build Mode [H]" style="display:none"><span class="slot-key">H</span>⚒</button>
                </div>
                <!-- Action bar — always visible: Left | Right | 1 | 2 | 3 | 4 (dodge + potion are mini orbs on the vital orbs) -->
                <div id="action-bar">
                    <div class="skill-slot action-slot" id="ability-m1">
                        <svg class="slot-key mouse-btn-icon" viewBox="0 0 20 28" width="12" height="16">
                            <rect x="0" y="0" width="9" height="13" rx="3" ry="3" fill="rgba(255,200,50,0.9)"/>
                            <rect x="11" y="0" width="9" height="13" rx="3" ry="3" fill="rgba(255,255,255,0.15)"/>
                            <rect x="0" y="14" width="20" height="14" rx="5" ry="5" fill="rgba(255,255,255,0.15)"/>
                        </svg>
                        <span class="skill-icon"></span>
                        <div class="ability-cd-overlay"></div>
                    </div>
                    <div class="skill-slot action-slot" id="ability-m2">
                        <svg class="slot-key mouse-btn-icon" viewBox="0 0 20 28" width="12" height="16">
                            <rect x="0" y="0" width="9" height="13" rx="3" ry="3" fill="rgba(255,255,255,0.15)"/>
                            <rect x="11" y="0" width="9" height="13" rx="3" ry="3" fill="rgba(255,200,50,0.9)"/>
                            <rect x="0" y="14" width="20" height="14" rx="5" ry="5" fill="rgba(255,255,255,0.15)"/>
                        </svg>
                        <span class="skill-icon"></span>
                        <div class="ability-cd-overlay"></div>
                    </div>
                    <span class="action-bar-sep" aria-hidden="true"></span>
                    <div id="skill-bar">
                        <div class="skill-slot" data-skill-slot="0"><span class="slot-key">1</span><span class="skill-icon"></span><div class="ability-cd-overlay"></div></div>
                        <div class="skill-slot" data-skill-slot="1"><span class="slot-key">2</span><span class="skill-icon"></span><div class="ability-cd-overlay"></div></div>
                        <div class="skill-slot" data-skill-slot="2"><span class="slot-key">3</span><span class="skill-icon"></span><div class="ability-cd-overlay"></div></div>
                        <div class="skill-slot" data-skill-slot="3"><span class="slot-key">4</span><span class="skill-icon"></span><div class="ability-cd-overlay"></div></div>
                    </div>
                </div>
                <button id="inventory-close">[TAB] to close</button>
            </div>
            <!-- resource orb (#385) — fill height set by ui/hud.js -->
            <div class="vital-orb vital-orb--resource" data-resource="mana">
                <div class="orb-liquid"><div id="mana-fill" class="orb-fill"></div></div>
                <div class="orb-glass"></div>
                <div id="mana-text" class="orb-text">50 / 50</div>
                <span class="orb-label" id="resource-label">Mana</span>
                <!-- Dodge as a mini orb (#ability-space) -->
                <div class="mini-orb mini-orb--dodge" id="ability-space">
                    <span class="mini-orb-key">SPACE</span>
                    <span class="skill-icon">◈</span>
                    <div class="ability-cd-overlay"></div>
                </div>
            </div>
        </div>

        <!-- Tutorial Overlays -->
        <div id="tutorial-welcome" style="display:none">
            <div class="tut-welcome-title">OriginStory</div>
            <div class="tut-welcome-sub">A Realm Unbound</div>
        </div>
        <div id="tutorial-controls" style="display:none">
            <div class="tut-ctrl-row" data-ctrl="move"><span class="tut-key">W A S D</span> Move</div>
            <div class="tut-ctrl-row" data-ctrl="look"><span class="tut-key">Mouse</span> Look Around</div>
            <div class="tut-ctrl-row" data-ctrl="dodge"><span class="tut-key">Space</span> Dodge</div>
            <div class="tut-ctrl-row" data-ctrl="interact"><span class="tut-key">E</span> Interact</div>
        </div>
        <div id="tutorial-combat-hint" style="display:none">
            <span class="tut-key">Left Click</span> to Attack
        </div>
        <div id="tutorial-objective" style="display:none"></div>
        <div id="tutorial-arrow" style="display:none">
            <div class="tut-arrow-icon">&#9654;</div>
        </div>

        <canvas id="boss-plate" style="display:none"></canvas>

        <div id="interact-prompt"></div>
        <div id="dialogue-box">
            <div class="panel-corner-tl"></div>
            <div class="panel-corner-tr"></div>
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <div id="dialogue-header">
                <div id="dialogue-name"></div>
                <button id="dialogue-close" class="panel-close-x">&times;</button>
            </div>
            <div id="dialogue-body">
                <div id="dialogue-text"></div>
                <div id="dialogue-quest-info" style="display:none">
                    <div id="quest-title" class="quest-title"></div>
                    <div id="quest-objectives" class="quest-objectives"></div>
                    <div id="quest-rewards" class="quest-rewards"></div>
                </div>
            </div>
            <div id="dialogue-footer">
                <div id="dialogue-continue" style="display:none">[E] Continue</div>
                <div id="dialogue-choices" style="display:none"></div>
                <div id="dialogue-actions" style="display:none"></div>
            </div>
        </div>
    </div>

    <!-- Pause Menu -->
    <div id="menu-overlay">
        <div class="menu-inner">
            <div class="panel-corner-tl"></div>
            <div class="panel-corner-tr"></div>
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <h2 style="margin-bottom: 20px; font-size: 1.5rem; text-align: center;">OriginStory</h2>
            <button id="btn-resume" class="menu-btn">🎮 Resume</button>
            <button id="btn-options" class="menu-btn">⚙️ Options</button>
            <button id="btn-wiki" class="menu-btn">📖 Wiki</button>
            <button id="btn-report" class="menu-btn" onclick="window.open('https://github.com/Xianith/origin-story/issues/new?labels=bug,in-game','_blank','noopener')">🐛 Submit an Issue</button>
            <button id="btn-logout" class="menu-btn danger">🪫 Logout</button>
        </div>
    </div>

    <!-- Options Panel -->
    <div id="options-overlay">
        <div id="options-panel">
            <div class="panel-corner-tl"></div>
            <div class="panel-corner-tr"></div>
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <h2 style="margin: 0 0 16px 0; font-size: 1.3rem;">Options</h2>
            <div class="options-section">
                <h3 class="options-section-title">Gameplay</h3>
                <label class="toggle-row">
                    <span class="toggle-label">Show Clock</span>
                    <input type="checkbox" id="opt-clock" class="toggle-checkbox">
                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
                </label>
                <label class="toggle-row">
                    <span class="toggle-label">Show FPS</span>
                    <input type="checkbox" id="opt-fps" class="toggle-checkbox">
                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
                </label>
                <label class="toggle-row">
                    <span class="toggle-label">Show Decay Meter</span>
                    <input type="checkbox" id="opt-decay-meter" class="toggle-checkbox" checked>
                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
                </label>
                <div class="options-row" style="margin-top:8px; gap:10px; align-items:center">
                    <span class="toggle-label">Lights</span>
                    <select id="opt-lights" class="options-select" title="Dynamic lights (torches, lanterns, the forge). Fewer is faster on the GPU.">
                        <option value="8">High (8)</option>
                        <option value="4">Medium (4)</option>
                        <option value="2">Low (2)</option>
                    </select>
                </div>
                <div class="options-row" style="margin-top:8px; gap:10px; align-items:center">
                    <span class="toggle-label">Render scale</span>
                    <select id="opt-render-scale" class="options-select" title="Resolution the 3D view is drawn at. Lower is faster on the GPU.">
                        <option value="1">100%</option>
                        <option value="0.85">85%</option>
                        <option value="0.7">70%</option>
                        <option value="0.5">50%</option>
                    </select>
                </div>
                <div class="options-row" style="margin-top:8px; gap:10px; align-items:center">
                    <span class="toggle-label">Mouse Sensitivity</span>
                    <input type="range" id="opt-sensitivity" min="1" max="10" value="4" step="1" class="volume-slider" style="width:100px">
                    <span id="opt-sensitivity-val" style="font-size:0.7rem; min-width:24px; text-align:right">4</span>
                </div>
            </div>
            <div class="options-section">
                <h3 class="options-section-title">Sound</h3>
                <div id="volume-controls">
                    <label class="volume-row">
                        <span class="volume-label">Master</span>
                        <input type="range" id="vol-master" min="0" max="100" value="80" class="volume-slider">
                        <button id="btn-mute" class="mute-btn">Mute</button>
                    </label>
                    <label class="volume-row">
                        <span class="volume-label">SFX</span>
                        <input type="range" id="vol-sfx" min="0" max="100" value="80" class="volume-slider">
                    </label>
                    <label class="volume-row">
                        <span class="volume-label">Music</span>
                        <input type="range" id="vol-music" min="0" max="100" value="50" class="volume-slider">
                    </label>
                </div>
            </div>
            <!-- Admin-only section — shown via setAdminMode() in menu.js -->
            <div id="options-admin-section" style="display:none">
                <h3 class="options-section-title">Admin</h3>
                <label class="toggle-row">
                    <span class="toggle-label">Debug Mode</span>
                    <input type="checkbox" id="opt-debug-mode" class="toggle-checkbox">
                    <span class="toggle-track"><span class="toggle-thumb"></span></span>
                </label>
            </div>
            <button id="btn-options-back" class="menu-btn" style="margin-top: 16px;">Back</button>
        </div>
    </div>

    <!-- Stash Panel -->
    <div id="stash-panel">
        <div class="stash-window">
            <div class="panel-corner-tl"></div>
            <div class="panel-corner-tr"></div>
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <div class="shop-header">
                <h2 class="shop-title">Stash</h2>
                <button id="stash-close" class="panel-close-x">&times;</button>
            </div>
            <div class="stash-tabs">
                <button class="shop-tab active" data-stash-tab="personal">Personal</button>
                <button class="shop-tab" data-stash-tab="party">Party</button>
            </div>
            <div id="stash-grid"></div>
            <!-- Gold (#387): banked gold is a number on the character, never stash slots — ui/stash.js -->
            <section id="stash-gold" class="stash-gold">
                <div class="stash-gold-title">Gold</div>
                <div class="stash-gold-amounts">
                    <div class="stash-gold-amt banked" title="In the bank — safe on death">
                        <span class="stash-gold-coin" draggable="true" title="Drag onto your gold pouch to withdraw">&#x1FA99;</span>
                        <span class="stash-gold-lbl">Banked</span>
                        <span id="stash-gold-banked" class="stash-gold-val">0</span>
                    </div>
                    <div class="stash-gold-amt carried" title="In your pouch — drops on death">
                        <svg class="stash-gold-pouch" viewBox="2 4 36 38" aria-hidden="true"><path class="pouch-body" d="M13 12 C6 18 4 27 6 33 C8 40 32 40 34 33 C36 27 34 18 27 12 Z" /><path class="pouch-neck" d="M12 9 C16 12 24 12 28 9 L27 13 C23 15 17 15 13 13 Z" /></svg>
                        <span class="stash-gold-lbl">Carried</span>
                        <span id="stash-gold-carried" class="stash-gold-val">0</span>
                    </div>
                </div>
                <div class="stash-gold-move">
                    <input id="stash-gold-amount" type="number" min="1" step="1" placeholder="Amount" aria-label="Gold amount">
                    <button id="stash-gold-deposit" type="button">Deposit</button>
                    <button id="stash-gold-withdraw" type="button">Withdraw</button>
                </div>
                <div class="stash-gold-all">
                    <button id="stash-gold-deposit-all" type="button">Deposit all</button>
                    <button id="stash-gold-withdraw-all" type="button">Withdraw all</button>
                </div>
                <div id="stash-gold-msg" class="stash-gold-msg" aria-live="polite"></div>
            </section>
        </div>
    </div>

    <!-- Shop Panel -->
    <!-- Vendor panel — ui/vendorPanel.js: Buy / Sell lists, the picked row expands to trade -->
    <div id="shop-panel">
        <div class="shop-window prog-window vendor-window">
            <div class="haven-panel-header">
                <span id="shop-title" class="haven-panel-title">Shop</span>
                <button id="shop-close" class="panel-close-x">&times;</button>
            </div>
            <div class="vendor-tabs">
                <button class="shop-tab vendor-tab active" data-tab="buy">Buy <span class="vendor-tab-n"></span></button>
                <button class="shop-tab vendor-tab" data-tab="sell">Sell <span class="vendor-tab-n"></span></button>
            </div>
            <div id="shop-items" class="vendor-list"></div>
            <div class="vendor-footer">
                <span id="shop-purse" class="vendor-purse"></span>
                <span id="shop-hint" class="vendor-hint"></span>
            </div>
            <div class="vendor-drop"><span>Release to sell</span></div>
        </div>
    </div>

    <!-- Unlock Panel (Keeper of Paths) — ui/unlockPanel.js -->
    <div id="unlock-panel" style="display:none">
        <div class="unlock-window prog-window">
            <div class="haven-panel-header">
                <span id="unlock-title" class="haven-panel-title">Progression</span>
                <span class="haven-build-count prog-charges" title="Realm charges (relic + Realm Charged Bottles)">◆ <span id="unlock-charges-count">0</span></span>
                <button id="unlock-close" class="panel-close-x">&times;</button>
            </div>
            <div class="haven-detail">
                <div class="haven-spin-wrap">
                    <canvas id="unlock-spin-canvas" width="96" height="96"></canvas>
                    <span id="unlock-detail-icon" class="prog-detail-icon"></span>
                </div>
                <div class="haven-detail-text">
                    <div id="unlock-detail-name" class="haven-selected-name">Pick an unlock</div>
                    <div id="unlock-detail-desc" class="haven-selected-desc"></div>
                    <div id="unlock-detail-progress" class="prog-progress"><div class="prog-progress-fill"></div><span class="prog-progress-text"></span></div>
                    <div id="unlock-detail-status" class="haven-selected-status"></div>
                </div>
            </div>
            <div id="unlock-actions" class="prog-actions"></div>
            <div id="unlock-list" class="prog-list"></div>
            <div id="unlock-footer" class="haven-build-footer"></div>
            <div id="unlock-hint" class="haven-hint haven-keys"></div>
        </div>
    </div>

    <!-- Loot Chest Panel -->
    <!-- Loot pickup feed (ui/pickupFeed.js) -->
    <div id="pickup-feed"></div>

    <div id="loot-chest-panel">
        <div class="loot-chest-window">
            <div class="panel-corner-tl"></div>
            <div class="panel-corner-tr"></div>
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></div>
            <div class="shop-header">
                <h2 id="loot-chest-title">Ground Loot</h2>
                <button id="loot-chest-close" class="panel-close-x">&times;</button>
            </div>
            <div id="loot-chest-grid"></div>
            <button id="loot-chest-take-all">Take All</button>
        </div>
    </div>

    <!-- Crafting Panel -->
    <!-- Crafting Panel — ui/crafting.js: profession tabs, level/XP header, category filters,
         recipe rows (vendor row style). Minigames + result cards play in #crafting-stage (ui/craftMinigame.js). -->
    <div id="crafting-panel">
        <div class="craft-window">
            <div class="haven-panel-header">
                <span id="crafting-title" class="haven-panel-title">Crafting</span>
                <button id="crafting-close" class="panel-close-x">&times;</button>
            </div>
            <div id="crafting-tabs" class="craft-tabs"></div>
            <div id="crafting-prof-header" class="craft-prof"></div>
            <div id="crafting-bench" class="craft-bench" hidden></div>
            <div id="crafting-filters" class="craft-filters"></div>
            <div id="crafting-list" class="vendor-list craft-list"></div>
            <div id="crafting-stage" class="craft-stage" hidden></div>
        </div>
    </div>

    <!-- Overlays -->
    <div id="damage-flash"></div>
    <div id="decay-overlay" style="opacity:0"></div>
    <div id="decay-vignette" style="opacity:0"></div>
    <div id="void-vignette" style="opacity:0"></div>

    <!-- Death Screen -->
    <div id="death-screen">
        <div id="death-title">YOU DIED</div>
        <div id="death-killer"></div>
        <div id="death-damage"></div>
        <button id="death-release-btn" class="menu-btn" style="display:none">Release Spirit</button>
    </div>

    <!-- Chat -->
    <div id="chat-container">
        <div id="connection-status" class="connection-status">
            <span class="status-dot">●</span>
            <span class="status-text"></span>
        </div>
        <div id="chat-tabs">
            <button class="chat-tab" data-tab="chat">Chat</button>
            <button class="chat-tab active" data-tab="system">System</button>
        </div>
        <div id="chat-messages"></div>
        <input id="chat-input" type="text" placeholder="Press Enter to chat..." autocomplete="off">
    </div>

<?php if ($isAdminUser): ?>
    <!-- Admin-only panels -->
    <div id="console-container">
        <div id="console-output"></div>
        <div id="console-input-row">
            <span class="console-prompt">&gt;</span>
            <input id="console-input" type="text" autocomplete="off" spellcheck="false" placeholder="Type 'help' for commands...">
        </div>
    </div>

    <div id="edit-place-panel">
        <div class="panel-corner-tl"></div>
        <div class="panel-corner-tr"></div>
        <div class="panel-corner-bl"></div>
        <div class="panel-corner-br"></div>
        <div class="haven-panel-header">
            <span class="haven-panel-title">✏ Edit Mode</span>
            <button class="haven-panel-close panel-close-x" id="edit-panel-close">&times;</button>
        </div>
        <div id="edit-place-list" class="haven-station-list"></div>
        <div id="edit-place-hint" class="haven-hint">Click type to place. Drag to move. Del to delete.</div>
    </div>

    <div id="edit-context-menu">
        <button id="edit-ctx-save">💾 Save unsaved changes</button>
        <button id="edit-ctx-exit">✖ Exit edit mode</button>
    </div>
<?php endif; ?>

    <!-- Haven Build Panel -->
    <div id="haven-build-panel">
        <div class="panel-corner-tl"></div>
        <div class="panel-corner-tr"></div>
        <div class="panel-corner-bl"></div>
        <div class="panel-corner-br"></div>
        <div class="haven-panel-header">
            <span class="haven-panel-title">⚒ Build Mode</span>
            <span id="haven-build-count" class="haven-build-count"></span>
            <button class="haven-panel-close panel-close-x" id="haven-panel-close">&times;</button>
        </div>
        <div class="haven-detail">
            <div class="haven-spin-wrap">
                <canvas id="haven-spin-canvas" width="96" height="96"></canvas>
            </div>
            <div class="haven-detail-text">
                <div id="haven-selected-name" class="haven-selected-name">Pick a station</div>
                <div id="haven-selected-desc" class="haven-selected-desc"></div>
                <div id="haven-selected-status" class="haven-selected-status"></div>
            </div>
        </div>
        <div id="haven-station-list" class="haven-station-grid"></div>
        <div id="haven-build-footer" class="haven-build-footer"></div>
        <div id="haven-hint" class="haven-hint haven-keys"></div>
    </div>


<?php endif; /* authenticated */ ?>

    <script>document.addEventListener('contextmenu', e => e.preventDefault());</script>
    <script>
    // Login error banner — also used by main.js when the game fails to boot
    window.showLoginError = (msg) => {
        const el = document.getElementById('login-error');
        if (!el) return;
        el.textContent = msg;
        el.hidden = false;
        document.getElementById('login-screen')?.classList.remove('hidden');
        const loading = document.getElementById('loading-screen');
        if (loading) loading.style.display = 'none';
    };
    // Drop ?login_error from the URL so a refresh doesn't re-show it
    if (new URLSearchParams(location.search).has('login_error')) {
        history.replaceState(null, '', location.pathname);
    }
    </script>

    <!-- Three.js from CDN via import map -->
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
        }
    }
    </script>
    <!-- Login screen starfield (always loaded, no auth needed) -->
    <script type="module" src="/home.js"></script>
    <!-- Game entry point — PHP-gated modules (Issue #282) -->
    <!-- onerror fires if main.js or any module it imports fails to load -->
    <script type="module" src="/game/main.js"
        onerror="showLoginError('The game failed to load. Please refresh the page — if it keeps happening, let us know.')"></script>
</body>
</html>
