<!doctype html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    <meta name="theme-color" content="#0d1020" />
    <title>Potion Explosion</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Inter:wght@500;700;800&display=swap" rel="stylesheet" />
    <script type="module" crossorigin src="./assets/index-DXK-1-sm.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/CanvasPool-CTz6W2rm.js">
    <link rel="modulepreload" crossorigin href="./assets/Filter-DcApWjwm.js">
    <link rel="modulepreload" crossorigin href="./assets/canvasUtils-B5KrsTsU.js">
    <link rel="modulepreload" crossorigin href="./assets/Cache-D0EC7riK.js">
    <link rel="modulepreload" crossorigin href="./assets/GCManagedHash-25qXeh8D.js">
    <link rel="modulepreload" crossorigin href="./assets/RenderTargetSystem-BXpsW2Ep.js">
    <link rel="modulepreload" crossorigin href="./assets/getTextureBatchBindGroup-BOmbyaNZ.js">
    <link rel="modulepreload" crossorigin href="./assets/GraphicsContext-BFAuFKTR.js">
    <link rel="modulepreload" crossorigin href="./assets/getTexelRangeRects-DQNoXu-c.js">
    <link rel="stylesheet" crossorigin href="./assets/index-C1G116dx.css">
  </head>
  <body>
    <div id="stage"></div>

    <!-- 1) Oyun sağlayıcı ekranı -->
    <div id="provider">
      <canvas id="providerFx"></canvas>
      <div class="pv-logo">
        <div class="pv-emblem">
          <img class="pv-wing-l" src="assets/provider/wing-left.webp" alt="" />
          <img class="pv-wing-r" src="assets/provider/wing-right.webp" alt="" />
          <img class="pv-diamond" src="assets/provider/diamond.webp" alt="" />
          <i class="pv-shock"></i>
          <i class="pv-sweep"></i>
        </div>
        <img class="pv-text" src="assets/provider/text.webp" alt="WONGAMING" />
      </div>
      <div class="pv-load" role="progressbar" aria-label="Oyun yükleniyor" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="loaderBox">
        <div class="pv-load-row"><span class="pv-load-label">YÜKLENİYOR</span><span class="pv-load-pct"><b id="loaderPct">0</b>%</span></div>
        <div class="pv-bar"><i id="loaderFill"></i></div>
      </div>
    </div>

    <!-- 2) Oyun tanıtım ekranı -->
    <div id="intro" hidden>
      <img class="in-bg-blur" src="assets/splash.webp" alt="" />
      <img class="in-bg" src="assets/splash.webp" alt="" />
      <canvas id="introFx"></canvas>
      <div class="in-panel">
        <div class="in-cards">
          <div class="in-card">
            <div class="in-pics"><img src="assets/sym-potion.webp" alt="" /><img src="assets/sym-wild.webp" alt="" /><img src="assets/sym-frog.webp" alt="" /></div>
            <b>243 YOL &amp; PATLAMA</b>
            <span>Kazanan semboller patlar, yerine yenileri düşer</span>
          </div>
          <div class="in-card">
            <div class="in-pics"><img src="assets/intro-flask-5.webp" alt="" /><img src="assets/intro-flask-10.webp" alt="" /><img src="assets/intro-flask-15.webp" alt="" /></div>
            <b>İKSİR MERDİVENİ</b>
            <span>Her patlama bir damla: <em>x5 · x10 · x15</em> çarpan</span>
          </div>
          <div class="in-card">
            <div class="in-pics"><img src="assets/sym-scatter.webp" alt="" /><img class="tall" src="assets/char-witch.webp" alt="" /></div>
            <b>FREE SPINS</b>
            <span>3+ ejderha yumurtası · merdiven sıfırlanmaz</span>
          </div>
        </div>
        <button id="introGo" class="in-go">DEVAM</button>
        <label class="in-skip"><input type="checkbox" id="introSkip" /> Bir daha gösterme</label>
      </div>
    </div>

    <footer id="bar">
      <div class="bar-left">
        <div class="tools">
          <button id="infoBtn" class="icon" aria-label="Oyun bilgisi">
            <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" /></svg>
          </button>
          <button id="soundBtn" class="icon" aria-label="Ses">
            <svg viewBox="0 0 24 24"><path d="M4 9h4l5-4v14l-5-4H4z" fill="currentColor" /><path class="wave" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /><path class="mute" d="M16 9l5 6M21 9l-5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
          </button>
        </div>
        <div class="meter"><span>BAKİYE</span><b id="balance">—</b></div>
      </div>

      <div class="bar-center">
        <span id="winLabel">İYİ ŞANSLAR!</span>
        <b id="win"></b>
      </div>

      <div class="bar-right">
        <div class="betbox">
          <div class="meter"><span>BAHİS</span><b id="bet">—</b></div>
          <div class="betarrows">
            <button id="betPlus" class="round" aria-label="Bahsi artır"><svg viewBox="0 0 16 16"><path d="M3 10l5-5 5 5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg></button>
            <button id="betMinus" class="round" aria-label="Bahsi azalt"><svg viewBox="0 0 16 16"><path d="M3 6l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /></svg></button>
          </div>
        </div>
        <button id="spinBtn" class="spin" aria-label="Çevir">
          <svg viewBox="0 0 64 64"><path d="M50 22A21 21 0 0 0 13 26" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" /><path d="M52 12v12H40" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" /><path d="M14 42a21 21 0 0 0 37-4" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" /><path d="M12 52V40h12" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" /></svg>
          <span id="autoCount"></span>
        </button>
        <button id="frbBtn" class="pill frb-pill" aria-label="Hediye free spin" hidden><svg viewBox="0 0 24 24"><path d="M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7c-2-4-6-3-5 0M12 7c2-4 6-3 5 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /></svg><i id="frbCount"></i></button>
        <button id="anteBtn" class="pill ante-pill" aria-label="Ante bahis">ANTE</button>
        <button id="autoBtn" class="pill" aria-label="Otomatik oyun">
          <svg viewBox="0 0 24 24"><path d="M19 12a7 7 0 1 1-2-4.9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" /><path d="M19 4v4h-4" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" /><path d="M10 9.5v5l4-2.5z" fill="currentColor" /></svg>
        </button>
        <button id="turboBtn" class="pill" aria-label="Turbo">
          <svg viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z" fill="currentColor" /></svg>
        </button>
      </div>
    </footer>

    <div id="overlay" hidden></div>
    <div id="toast" hidden></div>

  </body>
</html>
