<?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();
}
?>
<!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="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">~ ~ ~</div>
         <div class="panel">
            <div class="panel-corner-bl"></div>
            <div class="panel-corner-br"></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="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 id="vitals">
            <div class="vitals-row">
                <span class="bar-label bar-label--hp">HP</span>
                <div class="health-bar">
                    <div id="health-fill" style="width: 100%"></div>
                    <div id="health-text">100 / 100</div>
                </div>
            </div>
            <div class="vitals-row">
                <span class="bar-label bar-label--mana" id="resource-label">Mana</span>
                <div class="mana-bar">
                    <div id="mana-fill" style="width: 100%"></div>
                    <div id="mana-text">50 / 50</div>
                </div>
            </div>
        </div>
        <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>
        <div id="downed-bar" style="display:none">
            <div id="giveup-bar" style="display:none">
                <div class="giveup-label">[Hold E] Give Up</div>
                <div class="giveup-track"><div id="giveup-fill"></div></div>
            </div>
            <div class="downed-label">DOWNED</div>
            <div class="downed-track"><div id="downed-fill"></div></div>
        </div>
        <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="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">
            <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>
        </div>
        <div id="hotbar-row">
            <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>
                <div id="equipment-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="equip-tabs">
                        <button class="equip-tab-btn active" data-tab="equipment">Equipment</button>
                        <button class="equip-tab-btn" data-tab="stats">Stats</button>
                    </div>
                    <div class="equip-grid">
                        <div class="equip-slot" data-slot="head"><span class="equip-label">Head</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="chest"><span class="equip-label">Chest</span></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 class="equip-slot" data-slot="legs"><span class="equip-label">Legs</span></div>
                        <div class="equip-slot" data-slot="ring2"><span class="equip-label">Ring</span></div>
                        <div class="equip-slot" data-slot="feet"><span class="equip-label">Feet</span></div>
                    </div>
                    <div id="equip-stats"></div>
                    <div id="stats-panel"></div>
                </div>
                <div id="inv-bottom-row">
                    <div id="ability-column">
                        <div id="relic-slot" class="equip-slot relic-slot" data-slot="relic">
                            <span class="equip-label">Relic</span>
                        </div>
                        <div id="ability-panel">
                            <div class="ability-slot ability-slot--attack" id="ability-attack">
                                <div class="ability-sub" id="ability-m1">
                                    <span class="ability-icon">—</span>
                                    <svg class="mouse-btn-icon" viewBox="0 0 20 28" width="14" height="18">
                                        <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.1)"/>
                                        <rect x="0" y="14" width="20" height="14" rx="5" ry="5" fill="rgba(255,255,255,0.1)"/>
                                    </svg>
                                    <div class="ability-cd-overlay"></div>
                                </div>
                                <div class="ability-sub" id="ability-m2">
                                    <span class="ability-icon ability-icon-m2">—</span>
                                    <svg class="mouse-btn-icon" viewBox="0 0 20 28" width="14" height="18">
                                        <rect x="0" y="0" width="9" height="13" rx="3" ry="3" fill="rgba(255,255,255,0.1)"/>
                                        <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.1)"/>
                                    </svg>
                                    <div class="ability-cd-overlay"></div>
                                </div>
                            </div>
                            <div class="ability-slot" id="ability-space">
                                <span class="ability-btn-label">SPACE</span>
                                <span class="ability-icon">◈</span>
                                <div class="ability-cd-overlay"></div>
                            </div>
                        </div>
                    </div>
                    <div id="inv-right-col">
                        <div id="inventory-grid"></div>
                        <div id="hotbar">
                            <div class="hotbar-slot" data-slot="0"><span class="slot-key">1</span></div>
                            <div class="hotbar-slot" data-slot="1"><span class="slot-key">2</span></div>
                            <div class="hotbar-slot" data-slot="2"><span class="slot-key">3</span></div>
                            <div class="hotbar-slot" data-slot="3"><span class="slot-key">4</span></div>
                            <div class="hotbar-slot" data-slot="4"><span class="slot-key">5</span></div>
                        </div>
                    </div>
                    <button id="haven-build-btn" title="Build Mode [H]" style="display:none"><span class="slot-key">H</span>⚒</button>
                </div>
                <button id="inventory-close">[TAB] to close</button>
            </div>
        </div>

        <!-- Party Panel -->
        <div id="party-panel" style="display:none">
            <div class="party-header">
                <span class="party-title">Party</span>
                <button id="party-close-btn" class="panel-close-x">&times;</button>
            </div>
            <div id="party-no-party">
                <button id="party-create-btn" class="party-btn">Create Party</button>
                <div class="party-join-row">
                    <input id="party-join-input" class="party-join-input" type="text" placeholder="Enter code" maxlength="6" autocomplete="off" spellcheck="false">
                    <button id="party-join-btn" class="party-btn">Join</button>
                </div>
            </div>
            <div id="party-in-party" style="display:none">
                <div id="party-code" style="display:none" class="party-code-row">
                    <span class="party-code-label">Code:</span>
                    <span id="party-code-display" class="party-code-value"></span>
                    <button id="party-code-copy" class="party-btn party-btn-sm">Copy</button>
                </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>

        <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-public/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 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">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>
        </div>
    </div>

    <!-- Shop Panel -->
    <div id="shop-panel">
        <div class="shop-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="shop-title">Shop</h2>
                <button id="shop-close" class="panel-close-x">&times;</button>
            </div>
            <div id="shop-items"></div>
            <div id="shop-sell-zone">
                <span class="shop-sell-zone-label">Drag item here to sell — or right-click to sell</span>
            </div>
        </div>
    </div>

    <!-- Unlock Panel -->
    <div id="unlock-panel" style="display:none">
        <div class="unlock-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="unlock-header">
                <h2>Progression</h2>
                <button id="unlock-close" class="panel-close-x">&times;</button>
            </div>
            <div class="unlock-charges-display">
                Realm Charges: <span id="unlock-charges-count">0</span>
            </div>
            <div class="unlock-tabs">
                <button id="unlock-tab-available" class="shop-tab active">Available</button>
                <button id="unlock-tab-owned" class="shop-tab">Owned</button>
            </div>
            <div id="unlock-list"></div>
        </div>
    </div>

    <!-- Loot Chest Panel -->
    <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 -->
    <div id="crafting-panel">
        <div class="craft-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="crafting-title">Crafting</h2>
                <button id="crafting-close" class="panel-close-x">&times;</button>
            </div>
            <div id="crafting-tabs"></div>
            <div id="crafting-prof-header"></div>
            <div id="crafting-list"></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>
            <button class="haven-panel-close panel-close-x" id="haven-panel-close">&times;</button>
        </div>
        <div class="haven-spin-wrap">
            <canvas id="haven-spin-canvas" width="96" height="96"></canvas>
        </div>
        <div id="haven-selected-name" class="haven-selected-name">–</div>
        <div id="haven-station-list" class="haven-station-list"></div>
        <div id="haven-hint" class="haven-hint"></div>
    </div>

    <!-- Class Selection Panel -->
    <div id="class-select-panel" class="os-panel">
        <h2 class="class-select-heading">Choose Your Path</h2>
        <p class="class-select-sub">This choice shapes your journey. Choose wisely.</p>
        <div id="class-select-grid" class="class-select-grid"></div>
        <button id="class-select-confirm" class="class-select-btn" disabled>Select a Class</button>
    </div>

    <!-- Realm Timer HUD -->
    <div id="realm-timer-hud" style="display:none">
        <div id="realm-timer-bar"><div id="realm-timer-fill"></div></div>
        <span id="realm-timer-text"></span>
    </div>

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

    <script>document.addEventListener('contextmenu', e => e.preventDefault());</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) -->
    <script type="module" src="/game/main.js"></script>
</body>
</html>
