<!doctype html>
<html lang="en">
  <head>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" defer></script>
    <!-- Meta Properties -->
    <meta charset="UTF-8">
    <title>survev.io - 2d battle royale game</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no">
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="survev.io">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="application-name" content="survev.io">
    <meta name="description" content="Like games such as Player Unknown's Battlegrounds (PUBG), Fortnite or Apex Legends? Play this free 2d battle royale io game in your browser!">
    <meta property="og:description" content="Like games such as Player Unknown's Battlegrounds (PUBG), Fortnite or Apex Legends? Play this free 2d battle royale io game in your browser!">
    <meta name="keywords" content="survev, resurviv, survivio, surviv, 2d battle royale, io, battle royale browser game, 2d battlegrounds, battlegrounds, battleroyale, battle, royale, browser game, br, survival, game, web game, multiplayer">
    <meta property="og:type" content="website">
    <meta property="og:title" content="survev.io">
    <meta property="og:url" content="https://survev.io/">
    <meta property="og:site_name" content="survev.io">
    <meta content="https://survev.io/img/survev_title.png" property="og:image">
    <link rel="canonical" href="https://survev.io" />
    <link rel="apple-touch-icon-precomposed" href="img/icon_app.png">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">
    <!-- Styles -->

    
    <script type="module" crossorigin src="./js/DRVmgR8S.js"></script>
    <link rel="modulepreload" crossorigin href="./js/X1OxIwm2.js">
    <link rel="stylesheet" crossorigin href="./css/main-U-h8cJ5T.css">
  </head>
  <body>
    <div id="preroll-wrapper">
      <div id="preroll"></div>
    </div>
    <div id="fb-root"></div>
    <canvas tabindex="1" id="cvs"></canvas>
    <div id="game-area-wrapper" style="display: none" oncontextmenu="return false;">
      <div id="game-touch-area"></div>
      <!-- Class Select -->
      <div id="ui-role-menu-wrapper">
        <div id="ui-role-menu">
          <div id="ui-role-header"></div>
          <div id="ui-role-body"></div>
          <div id="ui-role-footer">
            <div id="ui-role-footer-desc" data-l10n="game-select-class">SELECT A CLASS</div>
            <div id="ui-role-footer-enter">ENTER GAME (20)</div>
          </div>
        </div>
      </div>
      <div id="ui-game" class="click-through">
        <div id="tablet-console"></div>
        <div id="ui-center">
          <div id="ui-game-menu">
            <div id="btn-game-tabs" class="btns-game-double-row">
              <div class="btn-game-container">
                <a id="btn-game-settings" class="btn-game-tab-select btn-game-menu btn-game-menu-selected btn-darken" data-tab="settings"></a>
                <div class="btn-double-row game-menu-icon-static settings-icon"></div>
              </div>
              <div class="btn-game-container">
                <a id="btn-game-keybinds" class="btn-game-tab-select btn-game-menu btn-darken" data-tab="keybinds"></a>
                <div class="btn-double-row game-menu-icon-static keybind-icon"></div>
              </div>
            </div>
            <div id="ui-game-tab-settings" class="ui-game-tab">
              <a id="btn-game-fullscreen" class="btn-fullscreen-toggle btn-game-menu btn-darken" data-l10n="game-full-screen">Full Screen</a>
              <div id="btn-touch-styles" class="btns-game-double-row">
                <div class="btn-game-container">
                  <a id="btn-game-move-style" class="btn-double-row btn-game-touch-style btn-darken"></a>
                  <div class="btn-double-row game-menu-icon-toggle movement-icon"></div>
                </div>
                <div class="btn-game-container">
                  <a id="btn-game-aim-style" class="btn-double-row btn-game-touch-style btn-darken"></a>
                  <div class="btn-double-row game-menu-icon-toggle target-icon"></div>
                </div>
              </div>
              <a id="btn-game-aim-line" class="btn-game-menu btn-darken locked-on-icon" data-l10n="game-aim-line">Aim Line</a>
              <a id="btn-game-sound" class="btn-sound-toggle btn-game-menu btn-darken audio-on-icon" data-l10n="game-sound">Sound</a>
              <div class="slider-container ui-slider-container">
                <p class="slider-text" data-l10n="index-master-volume">Master Volume</p>
                <input type="range" min="0" max="100" value="100" class="slider sl-master-volume">
              </div>
              <div class="slider-container ui-slider-container">
                <p class="slider-text" data-l10n="index-sfx-volume">SFX Volume</p>
                <input type="range" min="0" max="100" value="100" class="slider sl-sound-volume">
              </div>
              <div class="slider-container ui-slider-container">
                <p class="slider-text" data-l10n="index-music-volume">Music Volume</p>
                <input type="range" min="0" max="100" value="100" class="slider sl-music-volume">
              </div>
              <a id="btn-game-quit" class="btn-quit btn-game-menu btn-darken" data-l10n="game-quit-game">Quit Game</a>
            </div>
            <div id="ui-game-tab-keybinds" class="ui-game-tab">
              <div id="ui-keybind-list" class="js-keybind-list"></div>
              <a class="js-btn-keybind-restore btn-keybind-restore btn-game-menu btn-darken" data-l10n="game-restore-defaults">Restore Defaults</a>
            </div>
            <a id="btn-game-resume" class="btn-game-menu btn-darken" data-l10n="game-return-to-game">Return to Game</a>
          </div>
        </div>
        <div id="big-map" class="js-ui-map-show">
          <div id="big-map-collision"></div>
          <div id="big-map-close"></div>
        </div>
        <div id="ui-emotes" class="ui-emote-wheel">
          <div id="ui-emote-middle" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-key="middle" data-id="0">
            <div class="ui-emote ui-emote-bg-circle"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-emote-top" class="ui-emote-top ui-emote-quarter ui-emote-parent" data-key="top" data-id="1">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-emote-right" class="ui-emote-right ui-emote-quarter ui-emote-parent" data-key="right" data-id="2">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-emote-bottom" class="ui-emote-bottom ui-emote-quarter ui-emote-parent" data-key="bottom" data-id="3">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-emote-left" class="ui-emote-left ui-emote-quarter ui-emote-parent" data-key="left" data-id="4">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
        </div>
        <div id="ui-team-pings" class="ui-emote-wheel">
          <div id="ui-team-ping-middle" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-id="0">
            <div class="ui-emote ui-emote-bg-circle"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-team-ping-top" class="ui-emote-top ui-emote-quarter ui-emote-parent" data-id="1">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-team-ping-right" class="ui-emote-right ui-emote-quarter ui-emote-parent" data-id="2">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-team-ping-bottom" class="ui-emote-bottom ui-emote-quarter ui-emote-parent" data-id="3">
            <div class="ui-emote ui-emote-bg-quarter"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-large"></div>
          </div>
          <div id="ui-team-ping-bottom-left" class="ui-emote-bottom-left ui-emote-eighth ui-emote-parent" data-id="4">
            <div class="ui-emote ui-emote-bg-eighth"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-small"></div>
          </div>
          <div id="ui-team-ping-top-left" class="ui-emote-top-left ui-emote-eighth ui-emote-parent" data-id="5">
            <div class="ui-emote ui-emote-bg-eighth"></div>
            <div class="ui-emote ui-emote-hl"></div>
            <div class="ui-emote-image ui-emote-image-small"></div>
          </div>
        </div>
        <div id="ui-team-indicators" class="js-ui-map-hidden js-desktop-ui-hud-show">
          <div class="ui-team-indicator ui-indicator-main" data-id="0">
            <div class="ui-team-indicator-pos ui-background-yellow"></div>
          </div>
          <div class="ui-team-indicator ui-indicator-main" data-id="1">
            <div class="ui-team-indicator-pos ui-background-purple"></div>
          </div>
          <div class="ui-team-indicator ui-indicator-main" data-id="2">
            <div class="ui-team-indicator-pos ui-background-cyan"></div>
          </div>
          <div class="ui-team-indicator ui-indicator-main" data-id="3">
            <div class="ui-team-indicator-pos ui-background-orange"></div>
          </div>
          <div class="ui-team-indicator ui-indicator-main" data-id="4">
            <div class="ui-team-indicator-pos ui-background-yellow"></div>
          </div>
          <div class="ui-team-indicator ui-indicator-ping" data-id="0">
            <div class="ui-team-indicator-pos ui-team-indicator-image"></div>
          </div>
          <div class="ui-indicator-ping-border" data-id="0"></div>
          <div class="ui-team-indicator ui-indicator-ping" data-id="1">
            <div class="ui-team-indicator-pos ui-team-indicator-image"></div>
          </div>
          <div class="ui-indicator-ping-border" data-id="1"></div>
          <div class="ui-team-indicator ui-indicator-ping" data-id="2">
            <div class="ui-team-indicator-pos ui-team-indicator-image"></div>
          </div>
          <div class="ui-indicator-ping-border" data-id="2"></div>
          <div class="ui-team-indicator ui-indicator-ping" data-id="3">
            <div class="ui-team-indicator-pos ui-team-indicator-image"></div>
          </div>
          <div class="ui-indicator-ping-border" data-id="3"></div>
          <div class="ui-team-indicator ui-indicator-ping" data-id="4">
            <div class="ui-team-indicator-pos ui-team-indicator-image"></div>
          </div>
          <div class="ui-indicator-ping-border" data-id="4"></div>
        </div>
        <div id="ui-right-center" class="ui-right-center-desktop js-ui-map-hidden">
          <div id="ui-medical-interactive">
            <div id="ui-loot-bandage" class="ui-loot ui-outline-hover ui-scale-hover ui-medical tooltip">
              <div class="tooltip-text">
                <div class="tooltip-title" data-l10n="game-bandage">Bandage</div>
                <div class="tooltip-description"><span data-l10n="game-bandage-tooltip">Left-click to restore 15 health.</span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
            </div>
            <div id="ui-loot-healthkit" class="ui-loot ui-outline-hover ui-scale-hover ui-medical tooltip">
              <div class="tooltip-text">
                <div class="tooltip-title" data-l10n="game-healthkit">Med Kit</div>
                <div class="tooltip-description"><span data-l10n="game-healthkit-tooltip">Left-click to restore 100 health.</span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
            </div>
            <div id="ui-loot-soda" class="ui-loot ui-outline-hover ui-scale-hover ui-medical tooltip">
              <div class="tooltip-text">
                <div class="tooltip-title" data-l10n="game-soda">Soda</div>
                <div class="tooltip-description"><span data-l10n="game-soda-tooltip">Left-click to boost adrenaline by 25.</span><br><span data-l10n="game-adrenaline-tooltip">Adrenaline restores health over time.</span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
            </div>
            <div id="ui-loot-painkiller" class="ui-loot ui-outline-hover ui-scale-hover ui-medical tooltip">
              <div class="tooltip-text">
                <div class="tooltip-title" data-l10n="game-painkiller">Pills</div>
                <div class="tooltip-description"><span data-l10n="game-painkiller-tooltip">Left-click to boost adrenaline by 50.</span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
            </div>
          </div>
          <div id="ui-ammo-interactive">
            <div id="ui-loot-50AE" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-50AE"></div>
                <div class="tooltip-description"><span data-l10n="game-50AE-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(30,30,30,0.75)"></div>
            </div>
            <div id="ui-loot-9mm" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-9mm"></div>
                <div class="tooltip-description"><span data-l10n="game-9mm-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(255,153,0,0.75)"></div>
            </div>
            <div id="ui-loot-308sub" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-308sub"></div>
                <div class="tooltip-description"><span data-l10n="game-308sub-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(49,56,0,0.75)"></div>
            </div>
            <div id="ui-loot-12gauge" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-12gauge"></div>
                <div class="tooltip-description"><span data-l10n="game-12gauge-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(255,0,0,0.75)"></div>
            </div>
            <div id="ui-loot-flare" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-flare"></div>
                <div class="tooltip-description"><span data-l10n="game-flare-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(255,85,0,0.75)"></div>
            </div>
            <div id="ui-loot-762mm" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-762mm"></div>
                <div class="tooltip-description"><span data-l10n="game-762mm-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(0,102,255,0.75)"></div>
            </div>
            <div id="ui-loot-45acp" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-45acp"></div>
                <div class="tooltip-description"><span data-l10n="game-45acp-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(121,0,255,0.75)"></div>
            </div>
            <div id="ui-loot-556mm" class="ui-outline-hover ui-ammo tooltip">
              <div class="tooltip-text click-through">
                <div class="tooltip-title" data-l10n="game-556mm"></div>
                <div class="tooltip-description"><span data-l10n="game-556mm-tooltip"></span></div>
              </div>
              <div class="ui-loot-count">0</div>
              <img class="ui-loot-image" src="">
              <div class="ui-loot-overlay" style="background: rgba(3,123,0,0.75)"></div>
            </div>
          </div>
          <div id="ui-emote-button"></div>
        </div>
        <div id="ui-top-left" class="js-ui-hud-show click-through">
          <div id="ui-team" class="js-ui-mobile-map-hidden">
            <div class="ui-team-member ui-bg-standard" data-id="0">
              <div class="ui-team-member-name"></div>
              <div class="ui-team-member-color ui-background-yellow"></div>
              <div class="ui-team-member-status"></div>
              <div class="ui-team-member-health">
                <div class="ui-bar-inner ui-health-actual"></div>
              </div>
            </div>
            <div class="ui-team-member ui-bg-standard" data-id="1">
              <div class="ui-team-member-name"></div>
              <div class="ui-team-member-color ui-background-purple"></div>
              <div class="ui-team-member-status"></div>
              <div class="ui-team-member-health">
                <div class="ui-bar-inner ui-health-actual"></div>
              </div>
            </div>
            <div class="ui-team-member ui-bg-standard" data-id="2">
              <div class="ui-team-member-name"></div>
              <div class="ui-team-member-color ui-background-cyan"></div>
              <div class="ui-team-member-status"></div>
              <div class="ui-team-member-health">
                <div class="ui-bar-inner ui-health-actual"></div>
              </div>
            </div>
            <div class="ui-team-member ui-bg-standard" data-id="3">
              <div class="ui-team-member-name"></div>
              <div class="ui-team-member-color ui-background-orange"></div>
              <div class="ui-team-member-status"></div>
              <div class="ui-team-member-health">
                <div class="ui-bar-inner ui-health-actual"></div>
              </div>
            </div>
          </div>
        </div>
        <div id="ui-map-wrapper" class="ui-map-wrapper-desktop click-through">
          <div id="ui-map-container">
            <div id="ui-map-info" class="js-ui-map-hidden js-ui-hud-show">
              <div id="ui-gas-icon" class="gas-icon"></div>
              <div id="ui-gas-timer"></div>
            </div>
            <div id="ui-spec-counter" class="js-ui-map-hidden js-ui-hud-show">
              <div id="ui-spec-counter-icon"></div>
              <div id="ui-spec-counter-number"></div>
            </div>
            <div id="ui-settings-container-desktop" class="js-ui-desktop-map-hidden">
              <div id="ui-map-expand-desktop" class="ui-map-expand ui-settings-button">
                <img id="mag-glass-white" src="">
              </div>
              <div id="ui-map-minimize" class="ui-settings-button js-ui-map-hidden">
                <img id="ui-minimize-img" src="">
              </div>
            </div>
            <div id="ui-settings-container-mobile" class="js-ui-mobile-map-hidden">
              <div id="ui-alive-info">
                <div id="ui-alive-icon" class="ui-map-icon alive-icon"></div>
                <div id="ui-map-counter-default" class="js-ui-players-alive">0</div>
                <div id="ui-map-counter-faction">
                  <span class="ui-players-alive-red js-ui-players-alive-red">0</span>:<span class="ui-players-alive-blue js-ui-players-alive-blue">0</span>
                </div>
              </div>
              <div id="ui-map-expand-mobile" class="ui-map-expand ui-settings-button"></div>
              <div id="ui-menu-display" class="ui-settings-button prop-event"></div>
            </div>
          </div>
        </div>
        <div id="ui-kill-leader-container">
          <div id="ui-kill-leader-wrapper" class="js-ui-map-hidden js-ui-hud-show hide-on-mobile">
            <div id="ui-kill-leader-name">Waiting for new leader</div>
            <div id="ui-kill-leader-icon"></div>
            <div id="ui-kill-leader-count">0</div>
          </div>
        </div>
        <div id="ui-killfeed-wrapper">
          <div id="ui-killfeed" class="js-ui-map-hidden js-ui-hud-show">
            <div id="ui-killfeed-contents"></div>
          </div>
        </div>
        <div id="ui-leaderboard-wrapper">
          <div id="ui-leaderboard" class="js-ui-hud-show">
            <div id="ui-leaderboard-alive">
              <span class="ui-players-alive js-ui-players-alive">0</span>
            </div>
            <div id="ui-leaderboard-alive-faction">
              <span class="ui-players-alive-red js-ui-players-alive-red">0</span>
              <span class="ui-players-alive-blue js-ui-players-alive-blue">0</span>
            </div>
            <div class="ui-leaderboard-header" data-l10n="game-alive">Alive</div>
          </div>
          <div id="ui-kill-counter-wrapper" class="js-ui-map-show">
            <div id="ui-kill-counter">
              <span class="ui-player-kills js-ui-player-kills">0</span>
            </div>
            <div class="ui-kill-counter-header" data-l10n="game-kills">Kills</div>
          </div>
        </div>
        <div id="ui-top-center-scopes-wrapper">
          <div id="ui-top-center-scopes" class="click-through js-ui-map-hidden">
            <div id="ui-scope-1xscope" class="ui-scope ui-zoom">
              <div class="ui-zoom-text">
                <div class="ui-zoom-level">1<span class="ui-zoom-append">x</span></div>
              </div>
            </div>
            <div id="ui-scope-2xscope" class="ui-scope ui-zoom ui-outline-hover">
              <div class="ui-zoom-text">
                <div class="ui-zoom-level">2<span class="ui-zoom-append">x</span></div>
              </div>
            </div>
            <div id="ui-scope-4xscope" class="ui-scope ui-zoom ui-outline-hover">
              <div class="ui-zoom-text">
                <div class="ui-zoom-level">4<span class="ui-zoom-append">x</span></div>
              </div>
            </div>
            <div id="ui-scope-8xscope" class="ui-scope ui-zoom ui-outline-hover">
              <div class="ui-zoom-text">
                <div class="ui-zoom-level">8<span class="ui-zoom-append">x</span></div>
              </div>
            </div>
            <div id="ui-scope-15xscope" class="ui-scope ui-zoom ui-outline-hover">
              <div class="ui-zoom-text">
                <div class="ui-zoom-level">15<span class="ui-zoom-append">x</span></div>
              </div>
            </div>
          </div>
        </div>
        <div id="ui-top-center" class="js-ui-map-hidden js-ui-hud-show click-through">
          <div id="ui-waiting-text" class="top-center-text"><span data-l10n="game-waiting-for-players">Waiting for players</span>...</div>
          <div id="ui-spectate-text" class="top-center-text ui-spectate-mode">
            <div class="spectate-text spectate-desc" data-l10n="game-spectating">Spectating</div>
            <div id="spectate-player" class="spectate-text"></div>
          </div>
        </div>
        <div id="ui-upper-center" class="click-through">
          <div id="ui-announcement"></div>
        </div>
        <div id="ui-lower-center" class="js-ui-map-hidden js-ui-hud-show click-through">
          <div id="ui-interaction">
            <div id="ui-interaction-press"></div>
            <div id="ui-interaction-outer">
              <div id="ui-interaction-description"></div>
            </div>
          </div>
        </div>
        <div id="ui-bottom-center-2" class="click-through">
          <div id="ui-pickup-message" class="notify-message"></div>
          <div id="ui-perk-message-wrapper" class="notify-message">
            <div id="ui-perk-message-image-wrapper">
              <div id="ui-perk-message-image-icon"></div>
            </div>
            <div id="ui-perk-message-name" class="notify-message"></div>
            <div id="ui-perk-message-acquired" class="notify-message"></div>
          </div>
        </div>
        <div id="ui-equipped-ammo-wrapper" class="js-ui-map-hidden js-ui-hud-show">
          <div id="ui-equipped-ammo">
            <div id="ui-bullet-counter">
              <div id="ui-current-clip">0</div>
              <div id="ui-remaining-ammo">0</div>
              <div id="ui-reload-button-container">
                <div id="ui-reload-button"></div>
              </div>
            </div>
          </div>
        </div>
        <div id="ui-bottom-center-0" class="click-through js-ui-map-hidden js-ui-hud-show">
          <div id="ui-boost-counter">
            <div class="ui-boost-base" id="ui-boost-counter-0">
              <div class="ui-bar-inner"></div>
            </div>
            <div class="ui-boost-base" id="ui-boost-counter-1">
              <div class="ui-bar-inner"></div>
            </div>
            <div class="ui-boost-base" id="ui-boost-counter-2">
              <div class="ui-bar-inner"></div>
            </div>
            <div class="ui-boost-base" id="ui-boost-counter-3">
              <div class="ui-bar-inner"></div>
            </div>
          </div>
          <div id="ui-health-counter">
            <div id="ui-health-flair-left" class="ui-health-flair"></div>
            <div id="ui-health-flair-right" class="ui-health-flair"></div>
            <div id="ui-health-container">
              <div class="ui-bar-inner" id="ui-health-actual"></div>
              <div class="ui-bar-inner" id="ui-health-depleted"></div>
            </div>
          </div>
        </div>
        <div id="ui-bottom-center-left" class="js-ui-map-hidden">
          <div id="ui-perk-0" class="ui-armor-counter tooltip-perk ui-outline-hover">
            <div class="tooltip-text">
              <div class="tooltip-title"></div>
              <div class="tooltip-desc"></div>
            </div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
          <div id="ui-perk-1" class="ui-armor-counter tooltip-perk ui-outline-hover">
            <div class="tooltip-text">
              <div class="tooltip-title"></div>
              <div class="tooltip-desc"></div>
            </div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
          <div id="ui-perk-2" class="ui-armor-counter tooltip-perk ui-outline-hover">
            <div class="tooltip-text">
              <div class="tooltip-title"></div>
              <div class="tooltip-desc"></div>
            </div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
          <div id="ui-perk-3" class="ui-armor-counter tooltip-perk ui-outline-hover">
            <div class="tooltip-text">
              <div class="tooltip-title"></div>
              <div class="tooltip-desc"></div>
            </div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
        </div>
        <div id="ui-bottom-center-right" class="js-ui-map-hidden">
          <div id="ui-armor-helmet" class="ui-armor-counter ui-outline-hover">
            <div class="ui-armor-counter-inner"></div>
            <div class="ui-armor-level"></div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
          <div id="ui-armor-chest" class="ui-armor-counter ui-outline-hover">
            <div class="ui-armor-counter-inner"></div>
            <div class="ui-armor-level"></div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
          <div id="ui-armor-backpack" class="ui-armor-counter">
            <div class="ui-armor-counter-inner"></div>
            <div class="ui-armor-level"></div>
            <img class="ui-armor-image ui-loot-image" src="">
          </div>
        </div>
        <div id="ui-bottom-right" class="js-ui-map-hidden">
          <div id="ui-weapon-container">
            <div class="ui-weapon-info">
              <div class="ui-weapon-switch ui-outline-hover" id="ui-weapon-id-1" data-slot="1">
                <div class="ui-weapon-name"></div>
                <div class="ui-weapon-number">1</div>
                <img class="ui-weapon-image" src="">
              </div>
            </div>
            <div class="ui-weapon-info">
              <div class="ui-weapon-switch ui-outline-hover" id="ui-weapon-id-2" data-slot="2">
                <div class="ui-weapon-name"></div>
                <div class="ui-weapon-number">2</div>
                <img class="ui-weapon-image" src="">
              </div>
            </div>
            <div class="ui-weapon-info">
              <div class="ui-weapon-switch ui-outline-hover" id="ui-weapon-id-3">
                <div class="ui-weapon-name"></div>
                <div class="ui-weapon-number">3</div>
                <img class="ui-weapon-image" src="">
              </div>
            </div>
            <div class="ui-weapon-info">
              <div class="ui-weapon-switch ui-outline-hover" id="ui-weapon-id-4">
                <div class="ui-weapon-name"></div>
                <div class="ui-weapon-number">4</div>
                <div class="ui-weapon-exp ui-weapon-ammo-counter">0</div>
                <img class="ui-weapon-image" src="">
              </div>
            </div>
          </div>
        </div>
        <div id="ui-spectate-options-wrapper">
          <div id="ui-spectate-options" class="ui-spectate-mode js-ui-hud-show click-through">
            <div id="ui-spectate-buttons" class="ui-bg-standard">
              <a class="menu-option btn-darken" id="btn-spectate-next-player" data-l10n="game-next-teammate">Next Teammate</a>
              <a class="menu-option btn-darken" id="btn-spectate-prev-player" data-l10n="game-previous-teammate">Previous Teammate</a>
              <a class="menu-option btn-darken" id="btn-spectate-view-stats" data-l10n="game-view-match-stats">View Match Stats</a>
              <a class="menu-option btn-darken btn-quit" id="btn-spectate-quit" data-l10n="game-leave-game">Leave Game</a>
            </div>
            <div id="ui-spectate-stats" class="ui-bg-standard">
              <div id="ui-spectate-stats-header" data-l10n="game-your-results">Your Results</div>
              <table id="ui-spectate-stats-table">
                <tbody id="ui-spectate-stats-data">
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div id="ui-bottom-center-1" class="click-through">
          <div id="ui-kills">
            <div id="ui-kill-text"></div>
            <div id="ui-kill-count"></div>
          </div>
        </div>
      </div>
      <div id="ui-stats">
        <div id="ui-stats-bg"></div>
        <div id="ui-stats-contents">
          <div id="ui-stats-contents-inner">
            <div id="ui-stats-header"></div>
            <div id="ui-stats-info-box"></div>
            <div id="ui-stats-options"></div>
            <div id="ui-stats-logo"></div>
          </div>
          <div id="ui-stats-ad-container-desktop" class="ui-stats-ad-container">
            <div id="nitro-died-mrec" data-fuse="died_mrec" style="min-height: 90px;"></div>
          </div>
          <div id="ui-stats-ad-container-mobile" class="ui-stats-ad-container">
            <div id="nitro-died-mrec-mobile" data-fuse="died_mrec_mobile" style="min-height: 200px;"></div>
          </div>
        </div>
      </div>
      <div id="ui-editor" style="display: none">
        <div id="ui-editor-top-center">
          <div class="ui-editor-header">EDIT MODE</div>
        </div>
        <div id="ui-editor-top-right">
        </div>
      </div>
    </div>
    <div id="start-menu-wrapper">
      <div id="safari-margin"></div>
      <div id="background">
        <div id="start-overlay"></div>
      </div>
      <div id="start-main">
        <div id="start-top-left">
          <div id="btn-hamburger" class="icon-hamburger"></div>
          <a id="btn-discord-top-right" style="display: none;" href="https://discord.gg/75RAK3p3K2" target="_blank" class="btn-social btn-darken btn-discord"></a>
          <div id="start-top-left-desktop">
            <div id="featured-streamers">
              <div class="streaming-header">
                <div id="streaming-header-title" data-l10n="index-streaming-live">Streaming Live!</div>
                <div id="streaming-icon"></div>
              </div>
              <div class="streamer-list"></div>
              <div id="featured-streamer-template">
                <a href="" target="_blank" class="btn-streamer btn-darken"></a>
              </div>
            </div>
            <div id="featured-youtuber">
              <div class="youtube-header">
                <div id="youtube-header-title" data-l10n="index-featured-youtuber">Featured YouTuber</div>
              </div>
              <a href="" target="_blank" class="btn-youtuber btn-darken"></a>
            </div>
          </div>
        </div>
        <div class="ad-block-header hide-on-mobile">
          <div id="nitro-header" data-fuse="header" style="min-height: 90px;"></div>
        </div>
        <div class="ad-block-left-center hide-on-mobile">
          <div id="nitro-home-vrec" data-fuse="home_vrec" style="min-height: 250px;"></div>
        </div>
        <div class="ad-block-right-center hide-on-mobile" style="min-height: 250px;">
          <div id="nitro-home-mrec" data-fuse="home_mrec"></div>
        </div>
        <!-- Accounts Modals -->
        <div id="modal-account-name-change" class="modal modal-account">
          <div class="modal-content modal-close">
            <div class="modal-header modal-header-name">
              <span class="close close-corner"></span>
              <h2 id="modal-account-name-title" data-l10n="index-create-account">Create Account</h2>
            </div>
            <div class="modal-body modal-body-name">
              <div class="modal-settings-item">
                <p id="modal-account-name-desc" class="modal-body-text" data-l10n="index-set-account-name">Set your account name:</p>
                <div id="modal-body-warning"></div>
                <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="Enter name" id="modal-account-name-input" maxlength="16" />
              </div>
            </div>
            <div class="modal-footer modal-footer-name modal-footer-round">
              <h3 id="modal-account-name-finish" class="finish" data-l10n="index-finish">Finish</h3>
            </div>
          </div>
        </div>
        <div id="modal-account-reset-stats" class="modal modal-account">
          <div class="modal-content modal-close">
            <div class="modal-header modal-header-reset-stats">
              <span class="close close-corner"></span>
              <h2 id="modal-account-name-title" data-l10n="index-reset-stats">Reset Stats</h2>
            </div>
            <div class="modal-body modal-body-reset-stats">
              <div class="modal-settings-item">
                <p id="modal-account-reset-stats-desc" class="modal-body-text" data-l10n="index-reset-stats-desc">Enter "RESET STATS" to reset your stats:</p>
                <p id="modal-account-reset-stats-desc-2" class="modal-body-text" data-l10n="index-reset-stats-desc-2">(This does not reset pass progress.)</p>
                <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="" id="modal-account-reset-stats-input" maxlength="16" />
              </div>
            </div>
            <div class="modal-footer modal-footer-reset-stats modal-footer-round">
              <h3 id="modal-account-reset-stats-finish" class="finish" data-l10n="index-confirm">Confirm</h3>
            </div>
          </div>
        </div>
        <div id="modal-account-delete" class="modal modal-account">
          <div class="modal-content modal-close">
            <div class="modal-header modal-header-delete">
              <span class="close close-corner"></span>
              <h2 id="modal-account-name-title" data-l10n="index-delete-account">Delete Account</h2>
            </div>
            <div class="modal-body modal-body-delete">
              <div class="modal-settings-item">
                <p id="modal-account-delete-desc" class="modal-body-text" data-l10n="index-delete-account-desc">Enter "DELETE" to delete your account:</p>
                <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="" id="modal-account-delete-input" maxlength="16" />
              </div>
            </div>
            <div class="modal-footer modal-footer-delete modal-footer-round">
              <h3 id="modal-account-delete-finish" class="finish" data-l10n="index-confirm">Confirm</h3>
            </div>
          </div>
        </div>
        <!-- Accounts Mobile -->
        <div id="modal-mobile-account" class="modal">
          <div class="modal-content modal-close">
            <div class="modal-header">
              <span class="close close-corner"></span>
              <h2 data-l10n="index-account">Account</h2>
            </div>
            <div id="modal-mobile-account-body">
              <div class="account-buttons-settings account-buttons-wrapper account-block-arrow modal-close">
                <div class="account-buttons">
                  <div class="account-stats-link btn-player-stats-link menu-option btn-darken btn-standard " data-l10n="index-my-stats">My Stats</div>
                  <!-- <div class="btn-account-link btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-link-account">Link Account</div> -->
                  <div class="btn-account-change-name btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-change-account-name">Change Account Name</div>
                  <div class="btn-account-reset-stats btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-reset-stats">Reset Stats</div>
                  <div class="btn-account-delete btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-delete-account">Delete Account</div>
                  <div class="btn-account-logout btn-account-grey menu-option btn-darken btn-standard" data-l10n="index-log-out">Log Out</div>
                </div>
              </div>
              <div id="account-login-options-mobile" class="account-buttons-link-account account-buttons-wrapper account-block-arrow modal-close">
                <div class="login-options-content"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Accounts -->
        <div id="start-top-right">
          <div class="account-block" style="display: none;">
            <div class="account-details-top">
              <div class="account-details-top-buttons">
                <div class="account-details-button-wrapper account-details-button-loadout menu-option btn-darken-alt">
                  <div class="account-details-button">
                    <div id="loadout-alert-main" class="account-alert-main account-alert"></div>
                    <div class="account-link account-loadout-link">
                      <span data-l10n="index-loadout">Loadout</span>
                    </div>
                  </div>
                </div>
                <div class="account-details-button-wrapper account-details-link-out menu-option btn-darken hide-on-mobile">
                  <div class="account-details-button">
                    <div class="account-link account-stats-link"><span data-l10n="index-my-stats">My Stats</span></div>
                  </div>
                </div>
                <div class="account-details-button-wrapper account-details-link-out menu-option btn-darken hide-on-mobile">
                  <div class="account-details-button">
                    <div class="account-link account-leaderboard-link"><span data-l10n="index-leaderboards">Leaderboards</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="account-overview">
              <div class="account-details-user account-details-block">
                <div class="account-details">
                  <div class="account-avatar"></div>
                  <div id="account-login" class="account-player-name account-name account-name-user" data-l10n="index-log-in-desc">Log In / Create Account</div>
                  <div id="account-player-name" class="account-player-name account-name account-name-user" style="display:none"></div>
                  <div class="account-loading-container">
                    <div class="account-loading"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="account-buttons-settings account-buttons-wrapper account-block-arrow modal-close hide-on-mobile">
              <div class="account-buttons">
                <!-- <div class="btn-account-link btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-link-account">Link Account</div> -->
                <div class="btn-account-change-name btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-change-account-name">Change Account Name</div>
                <div class="btn-account-reset-stats btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-reset-stats">Reset Stats</div>
                <div class="btn-account-delete btn-account-turq menu-option btn-darken btn-standard" data-l10n="index-delete-account">Delete Account</div>
                <div class="btn-account-logout btn-account-grey menu-option btn-darken btn-standard" data-l10n="index-log-out">Log Out</div>
              </div>
            </div>
            <div id="account-login-options" class="account-buttons-link-account account-buttons-wrapper account-block-arrow modal-close">
              <div class="login-options-content"></div>
            </div>
          </div>
        </div>

        <div id="start-main-center">
          <div id="start-row-header">
            <div id="server-warning"></div>
          </div>
          <div id="start-turnstile-container"></div>
          <div id="start-row-top">
            <div id="start-rotate-reminder" class="menu-column menu-block">
              <span data-l10n="index-rotate-reminder">Rotate to landscape for a better experience.</span>
            </div>
            <div id="left-column" class="menu-column">
              <div id="ad-block-left">
                <div class="surviv-shirts">
                </div>
              </div>
              <div id="social-share-block-wrapper">
                <div id="social-share-block" class="menu-block">
                  <div class="btn-social-wrapper">
                    <!--
                    <a href="https://facebook.com/survev" target="_blank" class="btn-social btn-darken btn-facebook"></a>
                    <a href="https://twitter.com/survev" target="_blank" class="btn-social btn-darken btn-twitter"></a>
                    <a href="https://www.instagram.com/survev/" target="_blank" class="btn-social btn-darken btn-instagram"></a>
                    -->
                    <a href="https://discord.gg/75RAK3p3K2" target="_blank" class="btn-social btn-darken btn-discord"></a>
                    <a href="https://ko-fi.com/survev" target="_blank" style="display: none;" class="btn-social btn-darken btn-kofi"></a>
                    <a href="https://survev.wiki.gg/" target="_blank" class="btn-social btn-darken btn-wiki"></a>
                    <!--
                    <a href="https://www.youtube.com/c/survev?sub_confirmation=1" target="_blank" class="btn-social btn-darken btn-youtube"></a>
                    -->
                  </div>
                </div>
              </div>
            </div>
            <div id="start-menu" class="menu-column menu-block">
              <div class="play-loading-outer">
                <div class="play-loading-inner">
                  <div class="play-loading-spinner"></div>
                </div>
              </div>
              <div class="play-button-container">
                <div id="player-options">
                  <input type="text" class="menu-option player-name-input" tabindex="0" placeholder="Enter your name here" data-l10n="index-enter-name-here" id="player-name-input-solo" maxlength="16" />
                  <a class="btn-darken menu-option player-options-btn" id="btn-customize"></a>
                </div>
                <select id="server-select-main" class="server-select menu-option btn-hollow btn-hollow-selected">
                  <optgroup id="server-opts" label="Region" data-l10n="index-region">
                  </optgroup>
                </select>
                <a class="btn-green btn-darken menu-option" id="btn-start-mode-0" data-l10n="index-play-solo">Play Solo</a>
                <div id="btns-quick-start">
                  <a class="btn-green btn-darken menu-option" id="btn-start-mode-1" data-l10n="index-play-duo">Play Duo</a>
                  <a class="btn-green btn-darken menu-option" id="btn-start-mode-2" data-l10n="index-play-squad">Play Squad</a>
                </div>
                <div class="btns-double-row">
                  <a class="btn-darken menu-option btn-team-option" id="btn-join-team" data-l10n="index-join-team">Join Team</a>
                  <a class="btn-darken menu-option btn-team-option" id="btn-create-team" data-l10n="index-create-team">Create Team</a>
                </div>
                <div id="btn-help" class="menu-option btn-darken" data-l10n="index-how-to-play">How to Play</div>
                <div id="start-help">
                  <h1 data-l10n="index-controls">Controls</h1>
                  <p><span class="help-action" data-l10n="index-movement"></span>: <span class="help-control" data-l10n="index-movement-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-aim"></span>: <span class="help-control" data-l10n="index-aim-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-punch"></span>/<span class="help-action" data-l10n="index-shoot"></span>: <span class="help-control" data-l10n="index-shoot-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-change-weapons"></span>: <span class="help-control" data-l10n="index-change-weapons-ctrl"></span></p>
                  <p class="hide-on-mobile"><span class="help-action" data-l10n="index-stow-weapons"></span>: <span class="help-control" data-l10n="index-stow-weapons-ctrl"></span></p>
                  <p class="hide-on-mobile"><span class="help-action" data-l10n="index-swap-weapons"></span>: <span class="help-control" data-l10n="index-swap-weapons-ctrl"></span></p>
                  <p class="hide-on-mobile"><span class="help-action" data-l10n="index-swap-weapon-slots"></span>: <span class="help-control" data-l10n="index-swap-weapon-slots-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-reload"></span>: <span class="help-control" data-l10n="index-reload-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-scope-zoom"></span>: <span class="help-control" data-l10n="index-scope-zoom-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-pickup"></span>/<span class="help-action" data-l10n="index-loot"></span>/<span class="help-action" data-l10n="index-revive"></span>: <span class="help-control" data-l10n="index-pickup-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-use-medical"></span>: <span class="help-control" data-l10n="index-use-medical-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-drop-item"></span>: <span class="help-control" data-l10n="index-drop-item-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-cancel-action"></span>: <span class="help-control" data-l10n="index-cancel-action-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-view-map"></span>: <span class="help-control" data-l10n="index-view-map-ctrl"></span></p>
                  <p class="hide-on-mobile"><span class="help-action" data-l10n="index-toggle-minimap"></span>: <span class="help-control" data-l10n="index-toggle-minimap-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-use-ping"></span>: <span class="help-control" data-l10n="index-use-ping-ctrl"></span></p>
                  <p><span class="help-action" data-l10n="index-use-emote"></span>: <span class="help-control" data-l10n="index-use-emote-ctrl"></span></p>
                  <h1 data-l10n="index-how-to-play">How to Play</h1>
                  <p data-l10n="index-tips-1-desc">The goal of survev.io is to be the last player standing. You only live once per game - there is no respawn!</p>
                  <h1 data-l10n="index-tips-2">2D PUBG</h1>
                  <p data-l10n="index-tips-2-desc">If you've played other battle royale games like PUBG, Fortnite or H1Z1, then you're already halfway there! Think of survev.io as 2D PUBG (with slightly less desync and more chicken).</p>
                  <h1 data-l10n="index-tips-3">Loot and Kill</h1>
                  <p data-l10n="index-tips-3-desc">You'll begin the game with no items other than a simple backpack. Move around the map to find loot: weapons, ammo, scopes, and medical items. Eliminate other players and you can take their loot!</p>
                  <h1 data-l10n="index-tips-4">Red = Bad!</h1>
                  <p data-l10n="index-tips-4-desc">Players aren't the only thing that can hurt you. The deadly red zone will move in from the sides of the map and deal increasingly greater damage if you stand in it. Keep an eye on the map and stay safe.</p>
                </div>
              </div>
            </div>
            <div id="team-menu" class="menu-column menu-block">
              <div class="play-loading-outer">
                <div class="play-loading-inner">
                  <div class="play-loading-spinner"></div>
                </div>
              </div>
              <div class="play-button-container">
                <a class="btn-darken menu-option" id="btn-team-leave" data-l10n="index-leave-team">Leave Team</a>
                <div id="team-menu-connecting">
                  <div class="ui-spinner"></div>
                  <div class="team-menu-connecting-text" id="team-menu-joining-text"><span data-l10n="index-joining-team">Joining team</span> ...</div>
                  <div class="team-menu-connecting-text" id="team-menu-creating-text"><span data-l10n="index-creating-team">Creating team</span> ...</div>
                </div>
                <div id="team-menu-contents">
                  <div id="team-desc">
                    <div id="team-desc-text"><span id="invite-link-text" data-l10n="index-invite-link">Invite link</span>: <span id="team-url"></span>
                    </div>
                    <a id="team-copy-url" class="copy-item btn-darken"></a>
                    <a id="team-hide-url" class="hide-item btn-darken"></a>
                    <div id="team-code-text"><span id="invite-code-text" data-l10n="index-invite-code">Invite code</span>: <span id="team-code"></span></div>
                  </div>
                  <div id="team-menu-columns">
                    <div id="team-menu-members" class="team-menu-block">
                      <div id="team-menu-member-list"></div>
                    </div>
                    <div id="team-menu-options" class="team-menu-block">
                      <select id="team-server-select" class="btn-hollow btn-hollow-selected server-select menu-option">
                        <optgroup id="team-server-opts" label="Region">
                        </optgroup>
                      </select>
                      <div class="team-menu-options-buttons">
                        <a class="btn-hollow btn-hollow-selected btn-darken team-menu-option btn-team-queue" id="btn-team-queue-mode-1" data-l10n="index-duo">Duo</a>
                        <a class="btn-hollow btn-hollow-selected btn-darken team-menu-option btn-team-queue" id="btn-team-queue-mode-2" data-l10n="index-squad">Squad</a>
                      </div>
                      <div class="team-menu-options-buttons">
                        <a class="btn-hollow btn-hollow-selected btn-darken team-menu-option btn-team-fill" id="btn-team-fill-auto" data-l10n="index-auto-fill">Auto Fill</a>
                        <a class="btn-hollow btn-darken team-menu-option btn-team-fill" id="btn-team-fill-none" data-l10n="index-no-fill">No Fill</a>
                      </div>
                      <div id="team-menu-options-start">
                        <a class="btn-green btn-darken menu-option" id="btn-start-team" data-label="Play" data-l10n="index-play">Play</a>
                        <div id="msg-wait-reason"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="team-mobile-link" class="menu-column menu-block">
              <div id="team-mobile-link-desc" class="team-mobile-link-text" data-l10n="index-join-team-help">Got a team link or code? Paste it here:</div>
              <div id="team-mobile-link-warning" class="team-mobile-link-text">Invalid link!</div>
              <input type="text" class="menu-option" contenteditable="false" tabindex="0" autofocus placeholder="Paste team link or enter code here" id="team-link-input" />
              <a class="btn-darken menu-option btn-team-option" id="btn-team-mobile-link-join" data-l10n="index-join-team">Join Team</a>
              <a class="btn-darken menu-option" id="btn-team-mobile-link-leave" data-l10n="index-back-to-main">Back to Main Menu</a>
            </div>
            <div id="right-column" class="menu-column">
              <div id="pass-wrapper">
                <div id="pass-unlock-tooltip">
                  <div class="tooltip-pass-title"></div>
                  <div class="tooltip-pass-desc"></div>
                </div>
                <div class="right-column-toggle news-toggle">
                  <div class="account-alert"></div>
                </div>
                <div id="pass-loading" class="pass-column menu-block">
                  <div id="pass-loading-spinner"></div>
                </div>
                <div id="pass-block" class="pass-column menu-block">
                  <div id="pass-name">
                    <span id="pass-name-text"></span>
                  </div>
                  <div id="pass-progress" class="">
                    <div id="pass-progress-level" class=""></div>
                    <div id="pass-progress-bar" class="">
                      <div id="pass-progress-bar-fill"></div>
                      <div id="pass-progress-xp">
                        <span id="pass-progress-xp-current"></span>
                        <span>/</span>
                        <span id="pass-progress-xp-target"></span>
                        <span>XP</span>
                      </div>
                    </div>
                    <div id="pass-progress-unlock-wrapper">
                      <div id="pass-progress-unlock" class="">
                        <div id="pass-progress-unlock-image" class=""></div>
                      </div>
                      <div id="pass-progress-unlock-type-wrapper" class="">
                        <div id="pass-progress-unlock-type-border" class="">
                          <div id="pass-progress-unlock-type-image" class=""></div>
                        </div>
                        <div id="pass-progress-unlock-overlay" class=""></div>
                      </div>
                    </div>
                  </div>
                  <div id="pass-quest-wrapper" class="">
                    <div id="pass-locked">
                      <div id="btn-pass-locked" class="menu-option btn-darken" data-l10n="quest-login-prompt">Log in to get quests!</div>
                    </div>
                    <div id="pass-quest-0" class="pass-quest">
                      <div class="pass-quest-timer"></div>
                      <div class="pass-quest-spinner-container">
                        <div class="pass-quest-spinner"></div>
                      </div>
                      <div class="pass-quest-refresh-prompt">
                        <div class="pass-quest-refresh-prompt-text" data-l10n="quest-refresh-prompt">Get a new quest?</div>
                        <div class="pass-quest-refresh-confirm btn-pass-quest-refresh"></div>
                        <div class="pass-quest-refresh-cancel btn-pass-quest-refresh"></div>
                      </div>
                      <div class="pass-quest-info">
                        <div class="pass-quest-desc"></div>
                        <div class="pass-quest-xp"></div>
                        <div class="pass-quest-refresh"></div>
                        <div class="pass-quest-progress">
                          <div class="pass-quest-bar">
                            <div class="pass-quest-bar-fill"></div>
                          </div>
                          <div class="pass-quest-counter">
                            <span class="pass-quest-counter-current"></span>
                            <span>/</span>
                            <span class="pass-quest-counter-target"></span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="pass-quest-1" class="pass-quest">
                      <div class="pass-quest-timer"></div>
                      <div class="pass-quest-spinner-container">
                        <div class="pass-quest-spinner"></div>
                      </div>
                      <div class="pass-quest-refresh-prompt">
                        <div class="pass-quest-refresh-prompt-text" data-l10n="quest-refresh-prompt">Get a new quest?</div>
                        <div class="pass-quest-refresh-confirm btn-pass-quest-refresh"></div>
                        <div class="pass-quest-refresh-cancel btn-pass-quest-refresh"></div>
                      </div>
                      <div class="pass-quest-info">
                        <div class="pass-quest-desc"></div>
                        <div class="pass-quest-xp"></div>
                        <div class="pass-quest-refresh"></div>
                        <div class="pass-quest-progress">
                          <div class="pass-quest-bar">
                            <div class="pass-quest-bar-fill"></div>
                          </div>
                          <div class="pass-quest-counter">
                            <span class="pass-quest-counter-current"></span>
                            <span>/</span>
                            <span class="pass-quest-counter-target"></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div id="news-wrapper">
                <div class="right-column-toggle pass-toggle"></div>
                <div id="news-block" class="menu-block">
                  <div id="news">
                    <h3 class="news-header">What's New!</h3>
                    <div id="news-current" data-date="2026-05-11">
                      <small class="news-date">May 11th, 2026</small>
                      <p class="news-paragraph"><strong>Precursor</strong></p>
                      <p class="news-paragraph">Before the Soviet incursion and brutal fighting that ensued, PARMA scientists were given a directive: create the strongest survevr they possibly could. Their work now lies deep within the Twins...</p>
                      <p class="news-paragraph">Project: COBALT has returned! Along with much-needed adjustments for the Medic and Demo classes, PARMA is proud to announce a new perk: <span class="highlight">Indomitable Spirit</span>, allowing survevrs to shrug off fatal injuries through (quite literally) pure adrenaline.</p>
                      <p class="news-paragraph">Additionally, the long-anticipated <span class="highlight">Survevr Pass 1</span> has arrived, allowing you to flex your style with over 20 different cosmetics! The pass is completely <span class="highlight">free</span>; just <span class="highlight">log in</span> and complete two quests per day! If you don't like a quest, you can refresh it for a new one.</p>
                    </div>
                    <div data-date="2026-04-13">
                      <small class="news-date">April 13th, 2026</small>
                      <p class="news-paragraph"><strong>IntElegance</strong></p>
                      <p class="news-paragraph">As both sides exhaust their nightshade and weapon supplies, the Island rests again... what could have prompted such fierce fighting?</p>
                      <p class="news-paragraph">Over the past couple of years, PARMA has relied on third-party archives to train newbie survevrs, many of which were either misleading or hard to navigate. We've taken matters into our own hands and begun developing a comprehensive guide: the <a href="https://survev.wiki.gg">Survev.io Wiki</a>!</p>
                      <p class="news-paragraph">However, many of the sections are still yet to be filled, so we're welcoming our veterans to help contribute! For easier communication between survevrs, be sure to join the <a href="https://discord.gg/75RAK3p3K2">Discord Server</a>!</p>
                    </div>
                    <div data-date="2026-04-01">
                      <small class="news-date">April 1st, 2026</small>
                      <p class="news-paragraph"><strong>Potato vs. Tomato</strong></p>
                      <p class="news-paragraph">While survevrs have since become accustomed to the periodical spuddy incursions on the island, life was not always this way. Once, botanist brothers Spud and Percy Solanum worked in tandem, seeking to uncover the mysteries of the <span class="highlight">[REDACTED]</span>. In an act of betrayal, the Soviets obtained their precious research secrets, fragmenting their partnership forever. Join the fight of potato vs <span class="highlight">tomato</span>... and may the best nightshade win!</p>
                      <p class="news-paragraph">Additionally, PARMA's FSTMS division is proud to present their latest concoction: the <span class="highlight">PMG-134</span> (Potato Minigun 134), using a six-barrel rotary machine gun to blast tater tots at insane firerates. It's perfect for mowing down your local Soviet!</p>
                    </div>
                    <div data-date="2026-03-24">
                      <small class="news-date">March 24th, 2026</small>
                      <p class="news-paragraph"><strong>Spring Blossoms</strong></p>
                      <p class="news-paragraph">As PARMA continues to work on their research, the snow has melted and spring has returned to the island! Enjoy the cherry blossoms!</p>
                      <p class="news-paragraph">For the latest leeks and developments, be sure to join the <a href="https://discord.gg/75RAK3p3K2">Discord Server</a>!</p>
                    </div>
                    <div data-date="2026-03-09">
                      <small class="news-date">March 9th, 2026</small>
                      <p class="news-paragraph"><strong>Snow, Smoke, & Shells</strong></p>
                      <p class="news-paragraph">As we head into the final stretch of winter, our favourite arboreal mode has returned with a fresh coat of snow! For those who have been fighting through the winter weather, seek refuge at the <span class="highlight">campfires</span> spread out across the island.</p>
                      <p class="news-paragraph">In addition, PARMA's Department of Advanced Weaponry would be proud to present the new <span class="highlight">SPAS-16</span>, capable of unloading heavy damage... if they could find where their prototype went, that is.</p>
                      <p class="news-paragraph">The standard-issue <span class="highlight">IMD-2</span> is great for surpressing enemies with its high fire rate, but will have you asking your squad for ammo more often than not.</p>
                      <p class="news-paragraph">As PARMA attempts to defrost their simulation equipment, those who persist will be rewarded with the first blossoms of spring.</p>                    
                    </div>
                    <div data-date="2026-02-02">
                      <small class="news-date">February 2nd, 2026</small>
                      <p class="news-paragraph"><strong>High-Speed Hunting</strong></p>
                      <p class="news-paragraph">A new structure, lootable perks, and an open map: welcome back to the Savannah hallucination! For the brave, the bold, and the bloodthirsty, a secondary 'perk' is given to the kill leader: <span class="highlight">The Hunted</span>, revealing your position to all enemies.</p>
                      <p class="news-paragraph">Ever wanted your bullets to travel at absurd speeds? Look no further than PARMA's new perk: <span class="highlight">High-Velocity Rounds</span>! This perk greatly increases bullet speed & range.</p>
                      <p class="news-paragraph">Additionally, a new <span class="highlight">warehouse</span> has been constructed, offering a more <span><s>dangerous</s></span> secure place to store valuables, such as the new <span class="highlight">construction case</span>.</p>
                      <p class="news-paragraph">If you need hunting partners, look no further than our <a href="https://discord.gg/75RAK3p3K2">Discord Server</a>!</p>
                    </div>
                    <div data-date="2026-01-18">
                      <small class="news-date">January 18th, 2026</small>
                      <p class="news-paragraph"><strong>The Palms Sway</strong></p>
                      <p class="news-paragraph">Tired of the snow and ice? PARMA is providing a limited-time opportunity for Survevrs to escape... to a tropical island! Grab a <span class="highlight">Coconut</span> from the swaying <span class="highlight">Palm Trees</span> and throw it at a friend or foe, or set sail for the new <span class="highlight">Pirate Hut</span> to obtain the mythical <span class="highlight">Golden Cutlass</span>. Legend says those who wield the sword will never fail to find bountiful loot with each enemy they slay.</p>
                      <p class="news-paragraph">Surprises also await those who choose to tough out the winter weather. Trudge through the snow to find an <span class="highlight">Iced Hardstone Block</span>, which can only be broken by the new <span class="highlight">Ice Axe</span>. Enjoy some gun model redesigns and Winter recolors, some minor balance adjustments, and a plethora of bugfixes and improvements!</p>
                      <p class="news-paragraph">For an exclusive look at what's happening on the island, and to connect with the player community, check out our <a href="https://discord.gg/75RAK3p3K2">Discord Server!</a>!</p>
                    </div>
                    <div data-date="2025-10-21">
                      <small class="news-date">October 21st, 2025</small>
                      <p class="news-paragraph"><strong>Anniversary Harvest</strong></p>
                      <p class="news-paragraph">A strange irregularity emanating from the center of the island has led to the temporal displacement of survevrs back to <span class="highlight">October 2017</span>... perfectly coinciding with <span class="highlight">surviv's birthday!</span></p>
                      <p class="news-paragraph">Celebrate eight years of chicken dinners with a new limited-time gamemode simulating the Early Access version of the game, featuring <span class="highlight">silos, boxes, trees...</span> and the key to victory: <span class="highlight">weapons</span>! Note that our lack of research funds back then also means that the <span class="highlight">barrels don't explode.</span></p>
                      <p class="news-paragraph">On top of that, a new and improved <span class="highlight">fall map</span> has returned, with additional obstacles and a <span class="highlight">new type of squash</span>, providing even more loot for you.</p>
                      <p class="news-paragraph">Thanks to everyone for being a part of this community, and go hunting for the chicken dinner! Beware of the approaching gloom...</p>
                    </div>
                    <div data-date="2025-09-09">
                      <small class="news-date">September 9th, 2025</small>
                      <p class="news-paragraph"><strong>Remnants</strong></p>
                      <p class="news-paragraph">The war goes quiet once more after both sides exhausted their weaponry (and scheduled fighter flights).</p>
                      <p class="news-paragraph">Luckily, there's still tons of reserve airdrops, so go get rid of them in the <span class="highlight">Desert</span>!</p>
                      <p class="news-paragraph">The <span class="highlight">Mk45G</span> and <span class="highlight">Desert Camo</span> have also been made more common.</p>
                      <p class="news-paragraph">Stay tuned for new content, with the return of our <span class="highlight">arboreal</span> and <span class="highlight">veld</span> landscapes...</p>
                    </div>
                    <div data-date="2025-07-23">
                      <small class="news-date">July 23, 2025</small>
                      <p class="news-paragraph"><strong>New Leadership</strong></p>
                      <p class="news-paragraph">50v50 is back for another round, and getting straight to fighting is easier than ever: select guns are now <span class="highlight">bundled with ammo</span>.</p>
                      <p class="news-paragraph">Additionally, if a team leader fails to fire their flare soon after being promoted, it will now be <span class="highlight">auto-fired</span>.</p>
                      <p class="news-paragraph">A new role, the <span class="highlight">Captain</span>, has joined the ranks, but promotion to this role is not as easy as it seems. Lone Survivrs have also picked up a new perk: <span class="highlight">AP Rounds</span>.</p>
                      <p class="news-paragraph">Enjoy a selection of role buffs and new gun world images. Let us know your thoughts by hopping into our <a href="https://discord.gg/75RAK3p3K2">Discord server!</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="ad-block-leaderboard-bottom" id="survevio_728x90"></div>
        <div id="start-bottom-left">
          <div id="mobile-settings-front">
            <div class="btn-settings menu-option btn-darken btn-start-option"></div>
          </div>
        </div>
        <div id="start-bottom-middle">
          <a href="changelogRec.html" target="_blank" class="footer-after">ver 0.3.01</a>
          <a href="changelog.html" target="_blank" data-l10n="index-proxy-sites">Original changelog</a>
          <!--
          <a href="changelog.html" target="_blank" class="footer-after">ver 0.8.82</a>
          <a href="proxy.txt" target="_blank" data-l10n="index-proxy-sites">proxy sites</a>
          -->
          <a href="privacy.html" class="footer-after" target="_blank">Privacy Policy</a>
        </div>

        <div id="start-bottom-right-wrapper">
          <div id="start-bottom-right">
            <div class="language-select-wrap">
              <select class="language-select"></select>
            </div>
            <div class="btn-settings menu-option btn-darken btn-start-option"></div>
            <div class="btn-keybind menu-option btn-darken btn-start-option"></div>
            <div id="btn-start-fullscreen" class="btn-fullscreen-toggle menu-option btn-darken btn-start-option"></div>
            <div class="btn-start-mute btn-sound-toggle menu-option btn-darken btn-start-option audio-on-icon"></div>
          </div>
        </div>
      </div>
      <!-- Modals -->
      <div id="ui-modal-keybind" class="ui-modal-keybind modal" oncontextmenu="return false;">
        <div class="ui-modal-keybind-content modal-content modal-close">
          <div id="ui-modal-keybind-header" class="modal-header">
            <span id="ui-close-keybind" class="close close-corner"></span>
            <h2 data-l10n="index-customize-keybinds">Customize Keybinds</h2>
          </div>
          <div id="ui-modal-keybind-body" class="modal-body">
            <div id="ui-modal-keybind-list" class="js-keybind-list"></div>
            <div id="ui-modal-keybind-share">
              <div class="ui-modal-keybind-share-row">
                <div class="ui-modal-keybind-share-elem">
                  <span data-l10n="index-keybind-link">Share your keybinds with this code</span>:
                </div>
                <div class="ui-modal-keybind-share-elem">
                  <div id="keybind-link-text">
                    <div id="keybind-link">aFvc42SfhpoFlrJKVkA1fx+5afasdf9034hfSF09nASqqF</div>
                    <span id="keybind-copy" class="copy-item btn-darken"></span>
                  </div>
                </div>
              </div>
              <span class="keybind-share-paste-text" data-l10n="index-keybind-paste">Load keybinds using a code here</span><span>:</span>
              <div id="keybind-warning" class="link-warning">Invalid code!</div>
              <div class="ui-modal-keybind-share-row">
                <input type="text" class="menu-option" contenteditable="false" tabindex="0" autofocus placeholder="Paste a keybind code here" id="keybind-code-input" />
                <a class="btn-game-menu btn-darken" id="btn-keybind-code-load" data-l10n="index-keybind-apply">Load</a>
              </div>
            </div>
          </div>
          <div id="ui-modal-keybind-footer" class="modal-footer modal-footer-round">
            <a class="js-btn-keybind-share btn-game-menu btn-darken" data-l10n="game-share">Share</a>
            <a class="js-btn-keybind-restore btn-game-menu btn-darken" data-l10n="game-restore-defaults">Restore Defaults</a>
          </div>
        </div>
      </div>
      <!-- Loadouts -->
      <div id="modal-customize" class="modal">
        <div class="ad-block-loadouts-left hide-on-mobile">
          <div id="nitro-loadout-vrec" data-fuse="loadout_vrec" style="min-height: 600px;"></div>
        </div>
        <div id="modal-customize-wrapper" class="modal-close">
          <div id="modal-content-left" class="modal-content-shadow">
            <div id="modal-customize-cat-title"></div>
            <div id="modal-customize-sort-wrap">
              <select id="modal-customize-sort">
                <option id="customize-sort-newest" value="newest" data-l10n="loadout-newest">Newest</option>
                <option id="customize-sort-alpha" value="alpha" data-l10n="loadout-alpha">Alpha</option>
                <option id="customize-sort-rarity" value="rarity" data-l10n="loadout-rarity">Rarity</option>
                <option id="customize-sort-subcat" value="subcat" data-l10n="loadout-subcat">Category</option>
              </select>
            </div>
            <div id="modal-customize-close">
              <span class="close close-corner"></span>
            </div>
            <div id="modal-customize-header" class="modal-header"></div>
            <div class="modal-disabled">
              <div class="modal-disabled-message">The Edge browser does not support custom cursors.</div>
            </div>
            <div id="modal-customize-body" class="modal-body">
              <div id="modal-customize-item-header">
                <div id="modal-customize-item-name"></div>
                <div id="modal-customize-item-rarity"></div>
                <div id="modal-customize-loading-container">
                  <div id="modal-customize-loading"></div>
                </div>
              </div>
              <div id="modal-customize-list"></div>
            </div>
            <div id="modal-customize-footer" class="modal-footer modal-footer-round">
              <div id="modal-customize-item-source"></div>
              <div id="modal-customize-item-lore"></div>
            </div>
          </div>
          <div id="modal-content-right-crosshair" class="modal-content-right modal-content-shadow">
            <div class="modal-spacer"></div>
            <div class="modal-disabled"></div>
            <div id="customize-crosshair-parent">
              <div id="customize-crosshair-selected">
                <div class="customize-item-image customize-crosshair-image" draggable="false"></div>
              </div>
              <div id="customize-crosshair-sliders">
                <div class="crosshair-hex-outer">
                  <span>#</span><input type="text" id="color-picker-hex">
                </div>
                <section id="color-picker"></section>
                <div class="crosshair-slider-container">
                  <p class="" data-l10n="loadout-size">Size</p>
                  <input type="range" min="0.25" max="1.0" value="0.5" step="0.025" class="crosshair-slider" id="crosshair-size">
                </div>
                <div class="crosshair-slider-container">
                  <p class="" data-l10n="loadout-stroke">Stroke</p>
                  <input type="range" min="0.0" max="1.5" value="0.0" step="0.025" class="crosshair-slider" id="crosshair-stroke">
                </div>
              </div>
            </div>
          </div>
          <div id="modal-content-right-emote" class="modal-content-right modal-content-shadow">
            <div id="customize-emote-parent">
              <div id="customize-emote-wheel" class="ui-emote-wheel">
                <div id="customize-emote-middle" class="ui-emote-middle ui-emote-circle ui-emote-parent">
                  <div class="ui-emote ui-emote-bg-circle"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image ui-emote-image"></div>
                </div>
                <div id="customize-emote-top" class="ui-emote-top ui-emote-quarter ui-emote-parent" data-slot="emoteTop" data-idx="0">
                  <div class="ui-emote ui-emote-bg-quarter"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image ui-emote-image"></div>
                  <div class="customize-col customize-col-small" draggable="true"></div>
                </div>
                <div id="customize-emote-right" class="ui-emote-right ui-emote-quarter ui-emote-parent" data-slot="emoteRight" data-idx="1">
                  <div class="ui-emote ui-emote-bg-quarter"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image ui-emote-image"></div>
                  <div class="customize-col customize-col-small" draggable="true"></div>
                </div>
                <div id="customize-emote-bottom" class="ui-emote-bottom ui-emote-quarter ui-emote-parent" data-slot="emoteBottom" data-idx="2">
                  <div class="ui-emote ui-emote-bg-quarter"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image ui-emote-image"></div>
                  <div class="customize-col customize-col-small" draggable="true"></div>
                </div>
                <div id="customize-emote-left" class="ui-emote-left ui-emote-quarter ui-emote-parent" data-slot="emoteLeft" data-idx="3">
                  <div class="ui-emote ui-emote-bg-quarter"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image ui-emote-image"></div>
                  <div class="customize-col customize-col-small" draggable="true"></div>
                </div>
              </div>
              <div id="customize-emote-autos">
                <div id="customize-emote-win" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-slot="emoteWin" data-idx="4">
                  <div class="ui-emote ui-emote-auto-trash"></div>
                  <div class="ui-emote ui-emote-auto-icon ui-emote-auto-chicken"></div>
                  <div class="ui-emote ui-emote-bg-circle-outer"></div>
                  <div class="ui-emote ui-emote-bg-circle"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image"></div>
                  <div class="customize-col customize-col-large" draggable="true"></div>
                </div>
                <div id="customize-emote-death" class="ui-emote-middle ui-emote-circle ui-emote-parent" data-slot="emoteDeath" data-idx="5">
                  <div class="ui-emote ui-emote-auto-trash"></div>
                  <div class="ui-emote ui-emote-auto-icon ui-emote-auto-skull"></div>
                  <div class="ui-emote ui-emote-bg-circle-outer"></div>
                  <div class="ui-emote ui-emote-bg-circle"></div>
                  <div class="ui-emote ui-emote-hl"></div>
                  <div class="customize-emote-slot customize-item-image"></div>
                  <div class="customize-col customize-col-large" draggable="true"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="modal-settings" class="modal">
        <div class="modal-content modal-close">
          <div class="modal-header">
            <span class="close close-corner"></span>
            <h2 data-l10n="index-settings">Settings</h2>
          </div>
          <div id="modal-settings-body" class="modal-body">
            <div id="language-select-mobile-wrapper" class="modal-settings-item">
              <div class="language-select-wrap">
                <select class="language-select"></select>
              </div>
            </div>
            <div id="modal-settings-high-res" class="modal-settings-item">
              <input id="highResTex" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-high-resolution">High resolution (check to increase visual quality)</p>
            </div>
            <div id="modal-settings-interp" class="modal-settings-item">
              <input id="interpolation" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-client-side-interp">Client side interpolation</p>
            </div>
              <div id="modal-settings-rotation" class="modal-settings-item hide-on-mobile">
              <input id="localRotation" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-client-side-rotation">Client side player rotation</p>
            </div>
            <div class="modal-settings-item hide-on-mobile">
              <input id="screenShake" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-screen-shake">Screen shake</p>
            </div>
            <div class="modal-settings-item">
              <input id="anonPlayerNames" type="checkbox"><p class="modal-settings-checkbox-text" data-l10n="index-anon-player-names">Anonymize player names</p>
            </div>
            <div class="modal-settings-item slider-container main-volume-slider">
              <p class="modal-slider-text" data-l10n="index-master-volume">Master Volume</p>
              <input type="range" min="0" max="100" value="50" class="slider sl-master-volume" id="">
            </div>
            <div class="modal-settings-item slider-container main-volume-slider">
              <p class="modal-slider-text" data-l10n="index-sfx-volume">SFX Volume</p>
              <input type="range" min="0" max="100" value="50" class="slider sl-sound-volume" id="">
            </div>
            <div class="modal-settings-item slider-container main-volume-slider">
              <p class="modal-slider-text" data-l10n="index-music-volume">Music Volume</p>
              <input type="range" min="0" max="100" value="50" class="slider sl-music-volume" id="">
            </div>
            <div id="settings-links">
              <!--
              <a href="privacy.html" target="_blank" class="footer-after" data-l10n="index-privacy">privacy</a>
              -->
              <a href="attribution.txt" target="_blank" class="footer-after" data-l10n="index-attributions">attributions</a>
              <a href="hof.html" target="_blank" data-l10n="index-hof">HOF</a>
            </div>
          </div>
          <div class="modal-footer"></div>
        </div>
      </div>
      <div id="modal-hamburger" class="modal">
        <div class="modal-content modal-close">
          <div class="modal-header">
            <span class="close close-hamburger icon-hamburger"></span>
            <h2>&nbsp;</h2>
          </div>
          <div id="modal-hamburger-body" class="modal-body">
            <div id="modal-hamburger-leaderboards">
              <a href="/stats" target="_blank" class="btn-leaderboard-stats-link menu-option btn-darken" data-l10n="index-leaderboards">Leaderboards</a>
            </div>
            <div class="modal-divider"></div>
            <!-- <div class="btn-social-wrapper">
              <a href="https://facebook.com/survev" target="_blank" class="btn-social btn-darken btn-facebook"></a>
              <a href="https://twitter.com/survev" target="_blank" class="btn-social btn-darken btn-twitter"></a>
              <a href="https://www.instagram.com/survev/" target="_blank" class="btn-social btn-darken btn-instagram"></a>
              <a href="https://discord.gg/survev" target="_blank" class="btn-social btn-darken btn-discord"></a>
              <a href="https://www.youtube.com/c/survev?sub_confirmation=1" target="_blank" class="btn-social btn-darken btn-youtube"></a>
            </div> -->
            <div class="modal-divider"></div>
            <div id="modal-hamburger-bottom">
              <a href="changelogRec.html" class="footer-after">ver 0.3.01</a>
              <!--
              <a href="changelog.html" class="footer-after">ver 0.8.82</a>
              <a href="#" class="btn-cookie-settings footer-after">cookie settings</a>
              <a href="privacy.txt" target="_blank" class="footer-after">privacy</a>
              -->
              <a href="attribution.txt" target="_blank">attributions</a>
            </div>
          </div>
        </div>
      </div>
      <div id="modal-notification" class="modal">
        <div class="modal-content modal-close">
          <div class="modal-header">
            <span class="close close-corner"></span>
            <h2>Alert</h2>
          </div>
          <div class="modal-body">
            <p class="modal-body-text"></p>
          </div>
          <div class="modal-footer modal-footer-round">
            <h3 class="close close-footer">OK</h3>
          </div>
        </div>
      </div>
      <div id="modal-refresh" class="modal">
        <div class="modal-content modal-close">
          <div class="modal-header">
            <span class="close close-corner"></span>
            <h2>New Update</h2>
          </div>
          <div class="modal-body">
            <p class="modal-body-text">A new version of survev.io is available!<br><br>Press "OK" below to reload the page.</p>
          </div>
          <div class="modal-footer modal-footer-round">
            <h3 id="force-refresh" class="close close-footer">OK</h3>
          </div>
        </div>
      </div>
      <div id="modal-ip-banned" class="modal">
        <div class="modal-content modal-close">
          <div class="modal-header">
            <span class="close close-corner"></span>
            <h2 data-l10n="index-ip-banned">Your IP has been banned.</h2>
          </div>
          <div class="modal-body">
            <div id="modal-ip-banned-reason"></div>
            <div id="modal-ip-banned-expiration"></div>
          </div>
          <div class="modal-footer modal-footer-round">
            <h3 id="force-refresh" class="close close-footer">OK</h3>
          </div>
        </div>
      </div>
      <div id="modal-create-account" class="modal modal-account">
        <div class="modal-content modal-close">
          <div class="modal-header modal-header-name">
            <span class="close-loadouts close close-corner"></span>
            <h2 id="modal-account-name-title" data-l10n="index-log-in-desc">Log In / Create Account</h2>
          </div>
          <div class="modal-body modal-body-name">
            <p class="modal-body-text" data-l10n="index-create-account-prompt-1">Log in to access this feature!</p>
            <div class="login-options-content"></div>
          </div>
          <div class="modal-footer modal-footer-name modal-footer-round">
            <h3 class="close close-footer" data-l10n="index-cancel">Cancel</h3>
          </div>
        </div>
      </div>
      <div id="modal-screen-block">
        <div id="modal-item-confirm" class="modal">
          <div class="modal-content modal-close">
            <div class="modal-header modal-header-name">
              <h2 id="modal-account-name-title">You got a new item!</h2>
            </div>
            <div class="modal-body modal-body-name">
              <div id="modal-item-confirm-image-outer">
                <div id="modal-item-confirm-image-inner"></div>
              </div>
              <div class="modal-settings-item">
                <p id="modal-item-confirm-name" class="modal-body-text"></p>
              </div>
            </div>
            <div class="modal-footer modal-footer-name modal-footer-round">
              <h3 class="close close-footer" data-l10n="index-confirm">Confirm</h3>
              <h3 class='close close-footer' data-l10n='index-confirm-all' data-confirm-all="true">Confirm All</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      // load a cached background image as earlier as possible
      // so we dont have to wait for API to reply to show a background
      const config = JSON.parse(localStorage.getItem("surviv_config") || "{}");
      const bgImg = config.cachedBgImg || "img/main_splash.png";
      const bg = document.getElementById("background");
      if (bg) {
          bg.style.backgroundImage = `url(${bgImg})`;
      }
    </script>
  </body>
</html>
