<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>START | Arcade.now</title>
  <meta name="robots" content="noindex, follow">
  <meta name="description" content="Press the big green button. Free arcade games at Arcade.now.">
  <meta name="theme-color" content="#000000">
  <link rel="icon" href="/static/images/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
  <link rel="manifest" href="/static/manifest.webmanifest">
  <script async data-id="101463344" src="//static.getclicky.com/js"></script>
  <script>
  (function (s, t, a, y, twenty, two) {
    s.Stay22 = s.Stay22 || {};
    s.Stay22.params = { lmaID: '6a8bd05796bf215f33b0601c' };
    twenty = t.createElement(a);
    two = t.getElementsByTagName(a)[0];
    twenty.async = 1;
    twenty.src = y;
    two.parentNode.insertBefore(twenty, two);
  })(window, document, 'script', 'https://scripts.stay22.com/letmeallez.js');
  </script>
  
<script data-cfasync="false">
(function () {
  var sp = new URL(window.location.href).searchParams;
  var clickID = sp.get("click_id");

  // lp_sub cookie -> object. Werkzeug quotes the JSON and octal-escapes
  // special chars (\054 = comma), so unescape before parsing.
  function cookieSubs() {
    var m = document.cookie.match(/(?:^|;\s*)lp_sub=("?)([^;]*)\1(?:;|$)/);
    if (!m) return {};
    var v = m[2].replace(/\\(\d{3})/g, function (_, o) {
      return String.fromCharCode(parseInt(o, 8));
    }).replace(/\\"/g, '"');
    try { return JSON.parse(v) || {}; } catch (e) { return {}; }
  }
  var cs = cookieSubs();
  var sub1 = sp.get("subid") || cs.subid;
  var sub2 = sp.get("subid2") || cs.subid2;
  var sub3 = sp.get("subid3") || cs.subid3;
  if (!clickID) clickID = cs.click_id || null;

  var s = document.createElement("script");
  s.dataset.cfasync = "false";
  s.src = "https://sdk4push.com/f/sdk.js?z=2187891";
  s.onload = function (opts) {
    opts.zoneID = 2187891;
    opts.extClickID = clickID;

    opts.subID1 = sub1 || "arcade.now";
    if (sub2) opts.subID2 = sub2;
    if (sub3) opts.subID3 = sub3;

    opts.actions.onPermissionGranted = function () {};
    opts.actions.onPermissionDenied = function () {};
    opts.actions.onAlreadySubscribed = function () {};
    opts.actions.onError = function () {};
  };
  document.head.appendChild(s);
})();
</script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { cursor: pointer; }
    #start-screen {
      position: fixed; inset: 0; background-color: #000;
      z-index: 2147483647; display: flex; flex-direction: column;
      justify-content: center; align-items: center; gap: 40px;
    }
    .trigger-btn {
      cursor: pointer; transition: transform 0.1s; outline: none;
      -webkit-tap-highlight-color: transparent;
    }
    .trigger-btn:active { transform: scale(0.93); }
    /* expanding ripple rings around the button */
    .hitbox-container { position: relative; }
    .hitbox-container::before,
    .hitbox-container::after {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: 3px solid rgba(112, 255, 133, .85); pointer-events: none;
      animation: ripple 2.2s ease-out infinite;
    }
    .hitbox-container::after { animation-delay: 1.1s; }
    @keyframes ripple {
      0% { transform: scale(1); opacity: .9; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .big-green-button {
      position: relative; overflow: hidden;
      width: 78vw; height: 78vw;
      max-width: 480px; max-height: 480px; min-width: 280px; min-height: 280px;
      background: radial-gradient(circle at 50% 34%, #c9ffd2 0%, #70ff85 32%, #2ee254 62%, #1db843 100%);
      border-radius: 50%; border: 3px solid #1ea332;
      display: flex; justify-content: center; align-items: center;
      font-family: "Roboto", "Arial", sans-serif;
      animation: glowPulse 1.6s ease-in-out infinite, breathe 1.6s ease-in-out infinite;
    }
    @keyframes glowPulse {
      0%, 100% {
        box-shadow: 0px 18px 34px rgba(0,0,0,.45), 0 0 46px rgba(40,214,76,.6),
                    0 0 120px rgba(40,214,76,.30), inset 0px 6px 14px rgba(255,255,255,.55),
                    inset 0 -12px 24px rgba(0,90,25,.35);
      }
      50% {
        box-shadow: 0px 18px 34px rgba(0,0,0,.45), 0 0 90px rgba(112,255,133,1),
                    0 0 180px rgba(112,255,133,.5), inset 0px 6px 14px rgba(255,255,255,.55),
                    inset 0 -12px 24px rgba(0,90,25,.35);
      }
    }
    @keyframes breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.035); }
    }
    .trigger-btn:hover { animation-play-state: paused, paused; transform: scale(1.05); }
    /* glass highlight cap */
    .big-green-button::before {
      content: ""; position: absolute; top: 6%; left: 14%; width: 72%; height: 34%;
      border-radius: 50%; pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
      filter: blur(2px);
    }
    /* shine sweep across the glass */
    .big-green-button::after {
      content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
      transform: skewX(-20deg);
      animation: shine 2.1s ease-in-out infinite;
    }
    @keyframes shine {
      0%, 50% { left: -80%; }
      82%, 100% { left: 130%; }
    }
    .green-start-label {
      color: white; font-size: clamp(2.6rem, 13vw, 5.2rem); font-weight: 900;
      letter-spacing: .04em;
      text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255,255,255,.45);
      text-transform: uppercase; padding: 0 20px; text-align: center;
      animation: labelPop 1.6s ease-in-out infinite;
    }
    @keyframes labelPop {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.04); }
    }
    /* floating sparkles */
    .spark {
      position: fixed; pointer-events: none; font-size: 22px; opacity: 0;
      animation: sparkFloat 3.6s ease-in-out infinite;
    }
    .spark:nth-child(1) { left: 12%; top: 68%; animation-delay: 0s; }
    .spark:nth-child(2) { left: 84%; top: 30%; animation-delay: .9s; font-size: 16px; }
    .spark:nth-child(3) { left: 20%; top: 22%; animation-delay: 1.8s; font-size: 18px; }
    .spark:nth-child(4) { left: 78%; top: 72%; animation-delay: 2.7s; }
    @keyframes sparkFloat {
      0%, 100% { opacity: 0; transform: translateY(10px) scale(.7); }
      40% { opacity: .9; transform: translateY(-14px) scale(1.1); }
      70% { opacity: .4; transform: translateY(-30px) scale(.9); }
    }
  </style>
<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//tracking.arcade.now/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '3980']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
</head>
<body>

<div id="start-screen">
  <span class="spark">✨</span><span class="spark">✨</span><span class="spark">✨</span><span class="spark">✨</span>
  <div class="hitbox-container">
    <div class="big-green-button trigger-btn" id="start-btn" role="button" tabindex="0" aria-label="Start playing">
      <span class="label-text green-start-label" id="start-label">START</span>
    </div>
  </div>
</div>

<script>
(function () {
  // localized START word by browser language
  var langCode = (navigator.language || "en").split('-')[0].toLowerCase();
  var startWords = { "en": "START", "zh": "开始", "es": "EMPEZAR", "hi": "शुरू करें", "fr": "DÉMARRER",
    "de": "STARTEN", "ja": "開始", "ru": "НАЧАТЬ", "pt": "INICIAR", "ar": "ابدأ", "it": "INIZIA",
    "ko": "시작", "tr": "BAŞLAT", "vi": "BẮT ĐẦU" };
  document.getElementById('start-label').textContent = startWords[langCode] || "START";

  var GAME_URL = "/snake/";
  function go() {
    if (document.cookie.indexOf('lp_sub=') !== -1) {
      try {
        navigator.sendBeacon('/api/lp/event',
          new Blob([JSON.stringify({ event: 'click', game: 'snake' })],
                   { type: 'application/json' }));
      } catch (_) {}
    }
    window.location.href = GAME_URL;
  }
  // the WHOLE page is the button - any click/tap anywhere starts the game
  var done = false;
  document.addEventListener('click', function () {
    if (done) return;
    done = true;
    go();
  });
  document.getElementById('start-btn').addEventListener('keydown', function (e) {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
  });

  // dwell beacon on leave
  if (document.cookie.indexOf('lp_sub=') === -1) return;
  var t0 = Date.now(), sent = false;
  function reportDwell() {
    if (sent) return;
    sent = true;
    try {
      navigator.sendBeacon('/api/lp/event',
        new Blob([JSON.stringify({ event: 'dwell', extra: 's=' + Math.round((Date.now() - t0) / 1000) + ';sc=100' })],
                 { type: 'application/json' }));
    } catch (_) {}
  }
  document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'hidden') reportDwell();
  });
  window.addEventListener('pagehide', reportDwell);
})();
</script>

</body>
</html>