{% extends 'base.html.twig' %}

{% block title %}Mines{% endblock %}

{% block body %}
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Barlow+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

#mg-page{
  --void:#0C1109;
  --panel:#161C11;
  --panel-raised:#1F2818;
  --panel-line:#3A4529;
  --amber:#E8A23D;
  --amber-bright:#FFC15C;
  --olive:#5C6B3C;
  --olive-dim:#2C3620;
  --safe:#7ED957;
  --danger:#E4483A;
  --text-hi:#EEF0E2;
  --text-lo:#8B9478;
  --font-display:'Black Ops One', sans-serif;
  --font-body:'Barlow Condensed', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  font-family:var(--font-body);
  color:var(--text-hi);
  min-height:100vh;
  padding:16px 0 88px;
}
#mg-page *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

#phone{
  position:relative;
  width:100%;
  max-width:460px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
  border-radius:16px;
  border:1px solid var(--panel-line);
  overflow:hidden;
  background:
    radial-gradient(140% 60% at 50% -10%, rgba(232,162,61,0.10), transparent 55%),
    var(--void);
}
#phone.shake{ animation:shakeFrame 0.42s ease; }
@keyframes shakeFrame{
  0%,100%{ transform:translate(0,0); }
  15%{ transform:translate(-6px,3px); }
  30%{ transform:translate(5px,-4px); }
  45%{ transform:translate(-4px,4px); }
  60%{ transform:translate(4px,-2px); }
  75%{ transform:translate(-2px,2px); }
  90%{ transform:translate(2px,-1px); }
}

/* ---------- Top bar ---------- */
#topbar{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px;
  padding:14px 18px 8px;
  flex-shrink:0;
}
#muteBtn{ flex-shrink:0; width:38px; height:38px; font-size:17px; }
.balance-chip{
  display:flex; flex-direction:column; align-items:flex-end;
  background:var(--panel-raised);
  border:1px solid var(--panel-line);
  border-radius:8px;
  padding:6px 12px;
  margin-right:auto;
}
.balance-chip .bc-label{
  font-family:var(--font-mono); font-size:8px; letter-spacing:1.5px; color:var(--text-lo);
}
.balance-chip .bc-value{
  font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--amber-bright);
}

/* ---------- Screens ---------- */
.screen{ display:flex; flex-direction:column; padding:6px 18px 18px; }
.hidden{ display:none !important; }

/* ---------- Bet screen ---------- */
#betScreen{ gap:18px; }
.section-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2.5px;
  color:var(--text-lo);
  margin:6px 0 10px;
  text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.section-label::after{ content:''; flex:1; height:1px; background:var(--panel-line); }
.chips-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  flex:1 1 auto;
  min-width:64px;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--panel-line);
  color:var(--text-hi);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13.5px;
  padding:10px 8px;
  border-radius:4px;
  cursor:pointer;
  transition:all .15s ease;
}
.chip.active{
  background:linear-gradient(180deg, var(--amber-bright), var(--amber));
  color:#241705;
  border-color:var(--amber-bright);
  box-shadow:0 0 16px rgba(232,162,61,0.35);
}
.bet-stepper{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:6px;
  padding:6px;
  margin-top:4px;
}
.step-btn{
  width:42px; height:42px; border-radius:4px; border:none;
  background:var(--panel-raised);
  color:var(--text-hi);
  font-size:20px; font-family:var(--font-mono);
  cursor:pointer;
}
.bet-display{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:22px;
  color:var(--amber-bright);
  letter-spacing:1px;
}

.risk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.risk-card{
  background:var(--panel);
  border:1.5px solid var(--panel-line);
  border-radius:6px;
  padding:12px 12px 11px;
  cursor:pointer;
  transition:all .15s ease;
}
.risk-card .rc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.risk-card .rc-name{
  font-family:var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.risk-card .rc-mark{
  width:9px; height:9px; border-radius:2px;
  background:var(--card-accent, var(--olive));
  flex-shrink:0;
}
.risk-card .rc-bombs{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-lo);
  margin-bottom:4px;
}
.risk-card .rc-desc{ font-size:12px; color:var(--text-lo); line-height:1.3; }
.risk-card.active{
  border-color:var(--card-accent, var(--olive));
  background:linear-gradient(180deg, rgba(92,107,60,0.18), var(--panel));
  box-shadow:0 0 0 1px var(--card-accent, var(--olive)) inset;
}

#placeBetBtn{
  margin-top:4px;
  width:100%;
  padding:16px;
  border:none;
  border-radius:6px;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber));
  color:#241705;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(232,162,61,0.22);
}
#placeBetBtn:disabled{ opacity:0.4; box-shadow:none; }
#howtoLink{
  text-align:center;
  font-size:11px;
  color:var(--text-lo);
  text-decoration:underline;
  cursor:pointer;
  margin-top:2px;
  font-family:var(--font-mono);
}
#betError{
  text-align:center; font-size:11.5px; color:var(--danger);
  font-family:var(--font-mono); min-height:16px;
}

/* ---------- Game screen ---------- */
.hud{
  display:grid; grid-template-columns:1fr 1.2fr;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:6px;
  padding:12px 6px;
  margin-bottom:8px;
  flex-shrink:0;
}
.hud-item{ text-align:center; padding:0 4px; }
.hud-item + .hud-item{ border-left:1px solid var(--panel-line); }
.hud-item label{
  display:block; font-size:9px; letter-spacing:1.5px; color:var(--text-lo);
  font-family:var(--font-mono); margin-bottom:4px; text-transform:uppercase;
}
.hud-item span{
  font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--text-hi);
}
.hud-item small{ display:block; font-size:10px; color:var(--safe); font-family:var(--font-mono); margin-top:2px; }

.stats-row{
  display:flex; justify-content:center; gap:16px;
  font-family:var(--font-mono); font-size:11px; color:var(--text-lo);
  margin-bottom:8px; flex-shrink:0;
}
.stats-row b{ color:var(--text-hi); }
.stats-row .warn b{ color:var(--danger); }

#canvasWrap{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:radial-gradient(90% 70% at 50% 35%, rgba(92,107,60,0.14), transparent 70%), var(--panel);
  border:1px solid var(--panel-line);
}
#canvasWrap::before{
  content:'';
  position:absolute; inset:0;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(232,162,61,0.15), inset 0 0 40px rgba(0,0,0,0.5);
  pointer-events:none;
  z-index:2;
}
.bolt{
  position:absolute; width:7px; height:7px;
  background:radial-gradient(circle at 35% 35%, var(--amber-bright), var(--amber) 60%, #6b4a1f 100%);
  z-index:3;
}
.bolt.tl{ top:8px; left:8px; } .bolt.tr{ top:8px; right:8px; }
.bolt.bl{ bottom:8px; left:8px; } .bolt.br{ bottom:8px; right:8px; }
.corner-tag{
  position:absolute; top:8px; left:22px;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:1.5px;
  color:rgba(238,240,226,0.35); z-index:3; pointer-events:none;
}
#c{ width:100%; height:100%; display:block; touch-action:none; }

/* Invisible click targets over the 3D crates — the real interaction surface
   (raycasting isn't used; these overlay buttons drive every reveal). Each
   button is positioned in JS from the actual Three.js camera projection of
   its crate (see positionTileButtons()), so it tracks the tilted board
   exactly instead of approximating it with a CSS transform. */
.tile-overlay{
  position:absolute; inset:0;
  z-index:5;
}
.tile-hit{
  position:absolute;
  background:transparent; border:none; padding:0; margin:0;
  opacity:0; cursor:pointer;
}
.tile-hit:disabled{ cursor:default; }

.actionbar{ flex-shrink:0; padding-top:10px; }
#cashoutBtn{
  width:100%;
  padding:15px;
  border:none;
  border-radius:6px;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:1.5px;
  cursor:pointer;
  background:linear-gradient(180deg, var(--safe), #3a9a2c);
  color:#0b1e07;
  box-shadow:0 8px 22px rgba(126,217,87,0.2);
  transition:opacity .15s ease;
}
#cashoutBtn:disabled{ opacity:0.35; box-shadow:none; }
#hintText{
  text-align:center; font-size:11.5px; color:var(--text-lo);
  margin-top:8px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.5px;
}

/* ---------- Explosion / alarm flash ---------- */
#screenFlash{
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 45%, rgba(228,72,58,0.75), rgba(228,72,58,0.4) 45%, rgba(228,72,58,0) 75%);
  opacity:0;
  pointer-events:none;
  z-index:9;
}
#screenFlash.flash{ animation:flashPulse 0.6s ease-out; }
@keyframes flashPulse{
  0%{ opacity:0; }
  10%{ opacity:1; }
  30%{ opacity:0.15; }
  45%{ opacity:0.9; }
  100%{ opacity:0; }
}

/* ---------- Overlays ---------- */
.resume-loader{
  position:absolute; inset:0; z-index:11;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--void);
  transition:opacity .3s ease;
}
.resume-loader.done{ opacity:0; pointer-events:none; }
.resume-loader__spinner{
  width:28px; height:28px;
  border:3px solid var(--panel-line); border-top-color:var(--amber);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.resume-loader__text{
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--text-lo);
}
.overlay-backdrop{
  position:absolute; inset:0;
  background:rgba(8,10,6,0.78);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  z-index:10;
  padding:24px;
}
.overlay-backdrop.show{ opacity:1; pointer-events:auto; }
.result-card{
  width:100%; max-width:340px;
  background:var(--panel-raised);
  border:1px solid var(--panel-line);
  border-radius:10px;
  padding:28px 24px 24px;
  text-align:center;
  transform:translateY(14px) scale(.96);
  transition:transform .28s cubic-bezier(.2,1.4,.4,1);
}
.overlay-backdrop.show .result-card{ transform:translateY(0) scale(1); }
#resultIcon{ font-size:42px; margin-bottom:6px; }
#resultTitle{
  font-family:var(--font-display); font-size:16px; letter-spacing:1.5px;
  margin:0 0 6px;
}
#resultSub{ font-size:12.5px; color:var(--text-lo); margin:0 0 16px; font-family:var(--font-mono); }
.payout-display{
  font-family:var(--font-mono); font-weight:700; font-size:32px;
  margin-bottom:20px;
}
.payout-display.win{ color:var(--amber-bright); }
.payout-display.lose{ color:var(--danger); }
.cta-btn{
  width:100%; padding:14px; border:none; border-radius:6px;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber));
  color:#241705; font-family:var(--font-display);
  font-size:13px; letter-spacing:1.5px; cursor:pointer;
}

/* ---------- How to play ---------- */
.howto-card{ max-width:380px; text-align:left; max-height:80vh; overflow-y:auto; }
#howtoTitle{
  font-family:var(--font-display); font-size:16px; letter-spacing:1.5px;
  text-align:center; margin:0 0 16px;
}
.howto-steps{
  margin:0 0 18px; padding-left:20px;
  font-size:13px; line-height:1.5; color:var(--text-hi);
}
.howto-steps li{ margin-bottom:8px; }
.howto-risks{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:16px; padding:12px;
  background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
}
.howto-risk-row{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-hi);
}
.howto-risk-row .rr-dot{ width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.howto-risk-row .rr-bombs{ margin-left:auto; color:var(--text-lo); }
.howto-note{ font-size:12px; color:var(--text-lo); margin:0 0 18px; }
</style>

<div id="mg-page" data-testid="mg-page">
  <div id="phone">
    <div id="topbar">
      <div class="balance-chip"><span class="bc-label">BUDGET</span><span class="bc-value" id="balanceVal" data-testid="mg-balance">₱0</span></div>
      <button id="muteBtn" class="step-btn" aria-label="Toggle sound">🔊</button>
    </div>

    {# ── BET SCREEN ── #}
    <div id="betScreen" class="screen">
      <div>
        <div class="section-label">Stake</div>
        <div class="chips-row" id="chipsRow"></div>
        <div class="bet-stepper">
          <button class="step-btn" id="betMinus" type="button">−</button>
          <div class="bet-display" id="betDisplay" data-testid="mg-bet-display">₱10</div>
          <button class="step-btn" id="betPlus" type="button">+</button>
        </div>
      </div>
      <div>
        <div class="section-label">Mission Risk</div>
        <div class="risk-grid" id="riskGrid" data-testid="mg-tier-picker"></div>
      </div>
      {% if not playBlocked %}
      <button id="placeBetBtn" type="button" data-testid="btn-mg-start">DEPLOY</button>
      {% endif %}
      <div id="betError" data-testid="mg-bet-error"></div>
      <div id="howtoLink">how to play</div>
    </div>

    {# ── GAME SCREEN ── #}
    <div id="gameScreen" class="screen hidden">
      <div id="resumeLoader" class="resume-loader hidden">
        <div class="resume-loader__spinner"></div>
        <div class="resume-loader__text">LOADING MISSION…</div>
      </div>
      <div class="hud">
        <div class="hud-item"><label>Stake</label><span id="hudBet">₱0</span></div>
        <div class="hud-item"><label>Bonus</label><small id="hudIncr" data-testid="mg-multiplier"></small></div>
      </div>
      <div class="stats-row">
        <div>✅ Secured <b id="statSafe">0</b>/<span id="statSafeTotal">0</span></div>
        <div class="warn">⚠ Tripwires <b id="statBombs">0</b></div>
        <div>📦 Crates <b id="statLeft">16</b></div>
      </div>
      <div id="canvasWrap">
        <div class="bolt tl"></div><div class="bolt tr"></div>
        <div class="bolt bl"></div><div class="bolt br"></div>
        <div class="corner-tag">SECTOR-04 · LIVE</div>
        <canvas id="c"></canvas>
        <div class="tile-overlay" id="tileOverlay" data-testid="mg-grid">
          {% for i in 0..15 %}
          <button type="button" class="tile-hit" data-tile="{{ i }}" data-testid="mg-tile-{{ i }}" aria-label="Crate {{ i + 1 }}"></button>
          {% endfor %}
        </div>
      </div>
      {% if not playBlocked %}
      <div class="actionbar">
        <button id="cashoutBtn" type="button" disabled data-testid="btn-mg-cashout">CASH OUT</button>
        <div id="hintText">Tap a crate to search it</div>
      </div>
      {% endif %}
    </div>

    <div id="screenFlash"></div>

    {# ── RESULT OVERLAY ── #}
    <div id="resultOverlay" class="overlay-backdrop hidden">
      <div class="result-card">
        <div id="resultIcon">🎖️</div>
        <h2 id="resultTitle" data-testid="mg-result-title">EXTRACTION SUCCESSFUL</h2>
        <p id="resultSub">4 crates secured</p>
        <div class="payout-display win" id="resultPayoutWrap">₱<span id="resultPayout" data-testid="mg-result-payout">0</span></div>
        <button id="playAgainBtn" class="cta-btn" type="button">NEW MISSION</button>
      </div>
    </div>

    {# ── HOW TO PLAY OVERLAY ── #}
    <div id="howtoOverlay" class="overlay-backdrop hidden">
      <div class="result-card howto-card">
        <h2 id="howtoTitle">HOW TO PLAY</h2>
        <em style="font-size:11px; font-style:italic; color:#6b7280; display:block; margin-bottom:12px;">PAANO LARUIN</em>
        <ol class="howto-steps">
          <li>Choose a stake and a mission risk tier, then tap <b>DEPLOY</b>.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">Pumili ng stake at mission risk tier, pagkatapos ay i-tap ang DEPLOY.</em></li>
          <li>The 4×4 grid hides 16 crates. Some hold intel (safe), the rest are tripwires (bombs) — the count depends on your risk tier.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">Ang 4×4 grid ay nagtatago ng 16 na crates. Ang ilan ay may intel (safe), ang iba ay mga tripwire (bombs) — ang bilang ay depende sa iyong risk tier.</em></li>
          <li>Tap crates to search them. Every safe crate raises your multiplier and extract value.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">I-tap ang mga crate para hanapin ang mga ito. Bawat safe crate ay nagpapataas ng iyong multiplier at extract value.</em></li>
          <li>Tap <b>CASH OUT</b> any time after your first safe find to bank the current payout.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">I-tap ang CASH OUT anumang oras pagkatapos ng iyong unang safe find para i-bank ang kasalukuyang payout.</em></li>
          <li>Hit a tripwire and the mission fails — your stake is lost.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">Makaka-hit ng tripwire at mabibigo ang misyon — mawawala ang iyong stake.</em></li>
          <li>Clear every safe crate for a <b>Flawless Extraction</b> — you're cashed out automatically at the highest multiplier.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">Linisin ang bawat safe crate para sa Flawless Extraction — awtomatiko kang magka-cash out sa pinakamataas na multiplier.</em></li>
        </ol>
        <div class="howto-risks" id="howtoRisks"></div>
        <p class="howto-note">Higher risk tiers hide more tripwires, so each safe crate is worth more — but the odds of surviving the next tap drop too.<br><em style="font-size:11px; font-style:italic; color:#6b7280;">Ang mas mataas na risk tiers ay nagtatago ng mas maraming tripwire, kaya ang bawat safe crate ay mas mahalaga — ngunit ang tsansa na mabuhay sa susunod na tap ay bumababa rin.</em></p>
        <button id="howtoCloseBtn" class="cta-btn" type="button">GOT IT<br><em style="font-size:10px; font-style:italic;">NAINTINDIHAN KO</em></button>
      </div>
    </div>
  </div>
</div>

{# ── Sticky Wallet Bar ── #}
<div class="wallet-bar" data-testid="wallet-bar">
  <div class="wallet-bar__balance"
       data-controller="balance-counter"
       data-balance-counter-amount-value="{{ app.user.walletBalance }}">
    <p class="wallet-bar__label">Balance</p>
    <p class="wallet-bar__amount"
       id="wallet-bar-amount"
       data-testid="wallet-balance"
       data-balance-counter-target="display">₱{{ app.user.walletBalance|number_format(2) }}</p>
  </div>
  <div class="wallet-bar__actions">
    <a href="{{ path('app_deposit') }}"
       class="pill-link--ghost"
       style="font-size: 12px; padding: 7px 14px;"
       data-testid="wallet-bar-add-funds">+ Add Funds</a>
  </div>
</div>

<script src="{{ asset('idle-watcher.js') }}"></script>
<script type="module">
import * as THREE from 'three';

(function(){
  "use strict";

  /* ============ SERVER WIRING ============ */
  var STATE_URL     = '{{ path('app_play_mines_state') }}';
  var START_URL     = '{{ path('app_play_mines_start') }}';
  var REVEAL_URL    = '{{ path('app_play_mines_reveal') }}';
  var CASH_OUT_URL  = '{{ path('app_play_mines_cash_out') }}';
  var START_CSRF    = '{{ csrf_token('mines_start') }}';
  var REVEAL_CSRF   = '{{ csrf_token('mines_reveal') }}';
  var CASH_OUT_CSRF = '{{ csrf_token('mines_cash_out') }}';
  var playBlocked   = {{ playBlocked ? 'true' : 'false' }};

  /* ============ CONFIG ============ */
  var TOTAL_BOXES  = 16;
  var TIER_ORDER   = ['green', 'standard', 'high_risk', 'blackout'];
  var TIER_META    = {
    green:     { label:'GREEN LIGHT', accent:'#7ED957', desc:'Low risk, steady gains' },
    standard:  { label:'STANDARD',    accent:'#E8A23D', desc:'Balanced risk and reward' },
    high_risk: { label:'HIGH RISK',   accent:'#E27A3F', desc:'Deeper exposure, bigger multipliers' },
    blackout:  { label:'BLACKOUT',    accent:'#E4483A', desc:'Maximum exposure, maximum reward' }
  };
  var RISK_CONFIG  = {}; // populated from GET /play/mines/state: { mines, baseMultiplier, incrementalMultiplier, label, accent, desc } — incrementalMultiplier is now a flat peso amount per safe tile
  var BET_CHIPS    = [5, 10, 50, 100];

  function calcPayout(cfg, n, bet){
    if(!cfg || n<=0) return bet * cfg.baseMultiplier;
    return bet * cfg.baseMultiplier + cfg.incrementalMultiplier * (n-1);
  }
  function peso(n){ return '₱' + Number(n).toLocaleString('en-PH', {minimumFractionDigits:0, maximumFractionDigits:2}); }
  function money(n){ return Number(n).toLocaleString('en-PH', {minimumFractionDigits:2, maximumFractionDigits:2}); }

  /* ============ GAME STATE ============ */
  var game = {
    balance: 0,
    bet: 10,
    riskKey: 'standard',
    state: 'betting', // betting | playing | result
    safeCount: 0,
    payout: 0,        // current payout in pesos
    nextPayout: 0     // next reveal's payout in pesos
  };
  var selectedBet = 10;
  var selectedRisk = 'standard';
  var pendingTile = null; // tile index awaiting a server response, blocks double-taps

  /* ============ DOM ============ */
  var $ = function(id){ return document.getElementById(id); };
  var balanceVal = $('balanceVal');
  var betScreen = $('betScreen');
  var gameScreen = $('gameScreen');
  var resumeLoader = $('resumeLoader');
  var chipsRow = $('chipsRow');
  var riskGrid = $('riskGrid');
  var betDisplay = $('betDisplay');
  var placeBetBtn = $('placeBetBtn');
  var betError = $('betError');
  var howtoLink = $('howtoLink');
  var hudBet = $('hudBet'), hudIncr = $('hudIncr');
  var statSafe = $('statSafe'), statSafeTotal = $('statSafeTotal'), statBombs = $('statBombs'), statLeft = $('statLeft');
  var cashoutBtn = $('cashoutBtn');
  var hintText = $('hintText');
  var resultOverlay = $('resultOverlay');
  var resultIcon = $('resultIcon'), resultTitle = $('resultTitle'), resultSub = $('resultSub');
  var resultPayout = $('resultPayout'), resultPayoutWrap = $('resultPayoutWrap');
  var playAgainBtn = $('playAgainBtn');
  var phone = $('phone');
  var screenFlash = $('screenFlash');
  var muteBtn = $('muteBtn');
  var howtoOverlay = $('howtoOverlay');
  var howtoRisks = $('howtoRisks');
  var howtoCloseBtn = $('howtoCloseBtn');
  var tileButtons = Array.prototype.slice.call(document.querySelectorAll('.tile-hit'));

  function updateBalanceUI(){
    balanceVal.textContent = peso(game.balance);
    var walletBarEl = document.getElementById('wallet-bar-amount');
    if (walletBarEl) walletBarEl.textContent = '₱' + Number(game.balance).toLocaleString('en-PH', {minimumFractionDigits:2, maximumFractionDigits:2});
  }

  /* ============ BET SCREEN UI ============ */
  BET_CHIPS.forEach(function(amt){
    var chip = document.createElement('div');
    chip.className = 'chip' + (amt===selectedBet ? ' active' : '');
    chip.textContent = peso(amt);
    chip.dataset.amount = amt;
    chip.setAttribute('data-testid', 'mg-bet-chip');
    chip.addEventListener('click', function(){ setSelectedBet(amt); });
    chipsRow.appendChild(chip);
  });
  function refreshChips(){
    Array.prototype.forEach.call(chipsRow.children, function(c){
      c.classList.toggle('active', Number(c.dataset.amount)===selectedBet);
    });
  }
  function setSelectedBet(v){
    selectedBet = Math.max(5, Math.min(5000, Math.round(v/5)*5));
    betDisplay.textContent = peso(selectedBet);
    refreshChips();
  }
  $('betMinus').addEventListener('click', function(){ setSelectedBet(selectedBet-5); });
  $('betPlus').addEventListener('click', function(){ setSelectedBet(selectedBet+5); });
  setSelectedBet(10);

  function buildRiskUI(){
    riskGrid.innerHTML = '';
    howtoRisks.innerHTML = '';
    TIER_ORDER.forEach(function(key){
      var cfg = RISK_CONFIG[key];
      if(!cfg) return;

      var card = document.createElement('div');
      card.className = 'risk-card' + (key===selectedRisk ? ' active' : '');
      card.style.setProperty('--card-accent', cfg.accent);
      card.dataset.risk = key;
      card.setAttribute('data-testid', 'mg-tier-' + key);
      card.innerHTML =
        '<div class="rc-top"><span class="rc-name">'+cfg.label+'</span><span class="rc-mark"></span></div>'+
        '<div class="rc-bombs">16 crates · '+cfg.mines+' tripwires</div>'+
        '<div class="rc-desc">'+cfg.desc+'</div>';
      card.addEventListener('click', function(){
        selectedRisk = key;
        Array.prototype.forEach.call(riskGrid.children, function(c){ c.classList.toggle('active', c.dataset.risk===key); });
      });
      riskGrid.appendChild(card);

      var row = document.createElement('div');
      row.className = 'howto-risk-row';
      row.innerHTML =
        '<span class="rr-dot" style="background:'+cfg.accent+'"></span>'+
        '<span>'+cfg.label+'</span>'+
        '<span class="rr-bombs">'+cfg.mines+' tripwires</span>';
      howtoRisks.appendChild(row);
    });
  }

  howtoLink.addEventListener('click', function(){
    howtoOverlay.classList.remove('hidden');
    requestAnimationFrame(function(){
      requestAnimationFrame(function(){ howtoOverlay.classList.add('show'); });
    });
  });
  howtoCloseBtn.addEventListener('click', function(){
    howtoOverlay.classList.remove('show');
    setTimeout(function(){ howtoOverlay.classList.add('hidden'); }, 220);
  });

  if (placeBetBtn) {
    placeBetBtn.addEventListener('click', function(){
      ensureAudio();
      if(game.state !== 'betting') return;
      betError.textContent = '';

      if(selectedBet > game.balance){
        phone.classList.remove('shake'); void phone.offsetWidth; phone.classList.add('shake');
        betError.textContent = 'Not enough balance.';
        return;
      }
      playSound('click');
      placeBetBtn.disabled = true;

      fetch(START_URL, {
        method: 'POST',
        headers: {'Content-Type':'application/x-www-form-urlencoded'},
        body: new URLSearchParams({ _token: START_CSRF, tier: selectedRisk, amount: selectedBet }),
      })
      .then(function(r){ return r.json(); })
      .then(function(data){
        placeBetBtn.disabled = false;
        if(data.error){
          phone.classList.remove('shake'); void phone.offsetWidth; phone.classList.add('shake');
          betError.textContent = data.error;
          return;
        }
        if (window.idleWatcher) idleWatcher.onBetPlaced();

        game.balance = parseFloat(data.walletBalance);
        game.bet = parseFloat(data.game.amount);
        game.riskKey = data.game.tier;
        game.safeCount = 0;
        game.payout = parseFloat(data.game.currentPayout);
        game.nextPayout = calcPayout(RISK_CONFIG[game.riskKey], 1, game.bet);
        game.state = 'playing';
        updateBalanceUI();

        betScreen.classList.add('hidden');
        gameScreen.classList.remove('hidden');
        if (cashoutBtn) cashoutBtn.disabled = true;
        if (hintText) hintText.textContent = 'Tap a crate to search it';

        createBoard();
        updateHUD();
        onResize();
      })
      .catch(function(){
        placeBetBtn.disabled = false;
        phone.classList.remove('shake'); void phone.offsetWidth; phone.classList.add('shake');
        betError.textContent = 'Network error. Try again.';
      });
    });
  }

  if (cashoutBtn) {
    cashoutBtn.addEventListener('click', function(){
      if(game.state!=='playing' || game.safeCount<=0) return;
      game.state = 'result';
      cashoutBtn.disabled = true;

      fetch(CASH_OUT_URL, {
        method: 'POST',
        headers: {'Content-Type':'application/x-www-form-urlencoded'},
        body: new URLSearchParams({ _token: CASH_OUT_CSRF }),
      })
      .then(function(r){ return r.json(); })
      .then(function(data){
        if(data.error){
          game.state = 'playing';
          cashoutBtn.disabled = false;
          hintText.textContent = data.error;
          return;
        }
        playSound('cashout');
        settleRound(data, true, false);
      })
      .catch(function(){
        game.state = 'playing';
        cashoutBtn.disabled = false;
        hintText.textContent = 'Network error. Try again.';
      });
    });
  }

  playAgainBtn.addEventListener('click', function(){
    resultOverlay.classList.remove('show');
    setTimeout(function(){
      resultOverlay.classList.add('hidden');
      gameScreen.classList.add('hidden');
      betScreen.classList.remove('hidden');
      game.state = 'betting';
    }, 220);
  });

  function updateHUD(){
    var cfg = RISK_CONFIG[game.riskKey] || { mines: 0 };
    var safeTotal = TOTAL_BOXES - cfg.mines;
    hudBet.textContent = peso(game.bet);
    if (cfg.incrementalMultiplier > 0) {
      hudIncr.textContent = '+' + peso(cfg.incrementalMultiplier) + '/diamond';
    } else {
      hudIncr.textContent = '';
    }
    statSafe.textContent = game.safeCount;
    statSafeTotal.textContent = safeTotal;
    statBombs.textContent = cfg.mines;
    statLeft.textContent = TOTAL_BOXES - game.safeCount;
    if (cashoutBtn) {
      cashoutBtn.textContent = game.safeCount > 0
        ? ('CASH OUT ' + peso(game.payout))
        : 'CASH OUT';
    }
  }

  /* ============ AUDIO ============ */
  var audioCtx = null;
  var bgMusic = new Audio('{{ asset('game/musics/mines_bg.mp3') }}');
  bgMusic.loop = true;
  bgMusic.volume = 0.15;
  var clipHit = new Audio('{{ asset('game/musics/mines_hit.mp3') }}');
  clipHit.volume = 0.35;
  var clipWin = new Audio('{{ asset('game/musics/mines_win.mp3') }}');
  clipWin.volume = 0.4;
  var clipExplode = new Audio('{{ asset('game/musics/mines_explode.mp3') }}');
  clipExplode.volume = 0.4;
  var musicStarted = false;
  var muted = localStorage.getItem('mg_muted') === '1';

  function startMusic(){
    if(musicStarted || muted) return;
    musicStarted = true;
    bgMusic.play().catch(function(){ musicStarted = false; });
  }
  startMusic();

  function ensureAudio(){
    if(!audioCtx){
      try{ audioCtx = new (window.AudioContext||window.webkitAudioContext)(); }catch(e){}
    } else if(audioCtx.state==='suspended'){ audioCtx.resume(); }
    startMusic();
  }
  function beep(freq,duration,type,vol){
    if(!audioCtx) return;
    var o = audioCtx.createOscillator(), g = audioCtx.createGain();
    o.type = type||'sine'; o.frequency.value = freq;
    g.gain.value = vol||0.15;
    o.connect(g); g.connect(audioCtx.destination);
    var t0 = audioCtx.currentTime;
    o.start(t0);
    g.gain.exponentialRampToValueAtTime(0.001, t0+duration);
    o.stop(t0+duration);
  }
  function playClip(el){
    if(muted) return;
    var c = el.cloneNode();
    c.volume = el.volume;
    c.play().catch(function(){});
  }
  function playSound(type){
    if(type==='safe') playClip(clipHit);
    else if(type==='bomb') playClip(clipExplode);
    else if(type==='cashout') playClip(clipWin);
    else if(type==='click'){ if(!muted && audioCtx) beep(440,0.05,'square',0.06); }
  }
  function setMuted(v){
    muted = v;
    localStorage.setItem('mg_muted', v ? '1' : '0');
    muteBtn.textContent = v ? '🔇' : '🔊';
    if(v) bgMusic.pause();
    else if(musicStarted) bgMusic.play().catch(function(){});
    else startMusic();
  }
  muteBtn.addEventListener('click', function(){ setMuted(!muted); });
  setMuted(muted);

  /* ============ THREE.JS SCENE ============ */
  var scene, camera, renderer, canvasEl, canvasWrap;
  var boxes = [];      // {group, lid, gem, bomb, index, opened}
  var lidMeshes = [];
  var activeTweens = [];
  var particleSystems = [];
  var spinners = [];
  var baseCameraPos = new THREE.Vector3(0, 7.4, 6.6);
  var shake = { until:0, duration:1, mag:0 };
  var clock = new THREE.Clock();

  function initThree(){
    canvasWrap = $('canvasWrap');
    canvasEl = $('c');
    renderer = new THREE.WebGLRenderer({ canvas:canvasEl, antialias:true, alpha:true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio||1, 2));

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
    camera.position.copy(baseCameraPos);
    camera.lookAt(0,0,0);

    scene.add(new THREE.AmbientLight(0x334025, 0.55));
    var moon = new THREE.DirectionalLight(0xbfd8ff, 0.7);
    moon.position.set(3,8,4);
    scene.add(moon);
    var amberLight = new THREE.PointLight(0xe8a23d, 1.2, 22);
    amberLight.position.set(3,3,3);
    scene.add(amberLight);
    var tealLight = new THREE.PointLight(0x3fa9a0, 0.7, 22);
    tealLight.position.set(-3,4,-2);
    scene.add(tealLight);

    var floor = new THREE.Mesh(
      new THREE.CircleGeometry(5.4, 64),
      new THREE.MeshStandardMaterial({ color:0x141a10, metalness:0.4, roughness:0.7 })
    );
    floor.rotation.x = -Math.PI/2;
    floor.position.y = -0.34;
    scene.add(floor);

    [4.6, 4.85].forEach(function(r){
      var ring = new THREE.Mesh(
        new THREE.RingGeometry(r, r+0.03, 64),
        new THREE.MeshBasicMaterial({ color:0xE8A23D, side:THREE.DoubleSide, transparent:true, opacity:0.28 })
      );
      ring.rotation.x = -Math.PI/2;
      ring.position.y = -0.33;
      scene.add(ring);
    });

    // radar sweep beam - signature ops touch
    var sweep = new THREE.Mesh(
      new THREE.CircleGeometry(4.8, 32, 0, Math.PI/7),
      new THREE.MeshBasicMaterial({ color:0x7ed957, transparent:true, opacity:0.12, side:THREE.DoubleSide })
    );
    sweep.rotation.x = -Math.PI/2;
    sweep.position.y = -0.32;
    scene.add(sweep);
    spinners.push({ mesh:sweep, speed:0.6 });

    window.addEventListener('resize', onResize);
    onResize();
    requestAnimationFrame(renderLoop);
  }

  function onResize(){
    if(!canvasWrap) return;
    var w = canvasWrap.clientWidth, h = canvasWrap.clientHeight;
    if(w<=0||h<=0){
      // Layout may not have settled yet (e.g. right after unhiding the game
      // screen on resume) — retry next frame instead of leaving the tile
      // buttons permanently unpositioned.
      requestAnimationFrame(onResize);
      return;
    }
    renderer.setSize(w,h,false);
    camera.aspect = w/h;
    camera.updateProjectionMatrix();
    positionTileButtons();
  }

  /**
   * Position each invisible tile-hit button exactly where its crate renders
   * on screen, using the real camera projection instead of guessing a CSS
   * transform — this is what makes taps land where the crate actually is.
   */
  var BOARD_COLS = 4, BOARD_SPACING = 1.3;
  var BOARD_OFFSET = (BOARD_COLS-1)*BOARD_SPACING/2;
  var projectHelper = new THREE.Vector3();

  function crateWorldPos(i){
    var col = i%4, row = Math.floor(i/4);
    return { x: col*BOARD_SPACING - BOARD_OFFSET, z: row*BOARD_SPACING - BOARD_OFFSET };
  }

  function positionTileButtons(){
    if(!camera || !canvasWrap) return;
    var w = canvasWrap.clientWidth, h = canvasWrap.clientHeight;
    if(w<=0||h<=0) return;

    for(var i=0;i<TOTAL_BOXES;i++){
      var btn = tileButtons[i];
      if(!btn) continue;
      var pos = crateWorldPos(i);

      projectHelper.set(pos.x, 0.15, pos.z);
      projectHelper.project(camera);
      var cx = (projectHelper.x*0.5+0.5) * w;
      var cy = (1-(projectHelper.y*0.5+0.5)) * h;

      // Project a point offset half a cell over to gauge the crate's on-screen
      // footprint size at this depth (closer rows render larger than farther ones).
      projectHelper.set(pos.x + BOARD_SPACING/2, 0.15, pos.z);
      projectHelper.project(camera);
      var ex = (projectHelper.x*0.5+0.5) * w;
      var halfSizePx = Math.abs(ex - cx);
      var size = Math.max(16, halfSizePx * 2 * 0.9);

      btn.style.left = (cx - size/2) + 'px';
      btn.style.top = (cy - size/2) + 'px';
      btn.style.width = size + 'px';
      btn.style.height = size + 'px';
    }
  }

  function clearBoard(){
    boxes.forEach(function(b){ scene.remove(b.group); });
    boxes = [];
    lidMeshes = [];
    particleSystems.forEach(function(ps){ scene.remove(ps.mesh); });
    particleSystems = [];
    activeTweens = [];
    // keep the radar sweep spinner (index 0), drop crate-specific spinners
    spinners = spinners.slice(0,1);
  }

  function resetTileButtons(){
    tileButtons.forEach(function(btn){ btn.disabled = false; });
  }

  function createBoard(){
    clearBoard();
    resetTileButtons();

    for(var i=0;i<TOTAL_BOXES;i++){
      var pos = crateWorldPos(i);

      var group = new THREE.Group();
      group.position.set(pos.x, 0, pos.z);

      /* --- ammo crate lid --- */
      var lidGeo = new THREE.BoxGeometry(1, 0.55, 1);
      var lidMat = new THREE.MeshStandardMaterial({
        color:0x4A5A32, metalness:0.2, roughness:0.65,
        emissive:0x141a0c, emissiveIntensity:0.35
      });
      var lid = new THREE.Mesh(lidGeo, lidMat);
      lid.position.y = 0.28;
      var edges = new THREE.LineSegments(
        new THREE.EdgesGeometry(lidGeo),
        new THREE.LineBasicMaterial({ color:0xE8A23D, transparent:true, opacity:0.4 })
      );
      lid.add(edges);
      // stencil cross strap
      var strapMat = new THREE.MeshStandardMaterial({ color:0x2C3620, metalness:0.1, roughness:0.8 });
      var strap1 = new THREE.Mesh(new THREE.BoxGeometry(1.02,0.03,0.14), strapMat);
      strap1.position.y = 0.02;
      lid.add(strap1);
      var strap2 = new THREE.Mesh(new THREE.BoxGeometry(0.14,0.03,1.02), strapMat);
      strap2.position.y = 0.02;
      lid.add(strap2);
      lid.userData.index = i;
      group.add(lid);

      /* --- secured intel beacon (safe reveal) --- */
      var gem = new THREE.Mesh(
        new THREE.OctahedronGeometry(0.27, 0),
        new THREE.MeshStandardMaterial({ color:0x7ED957, emissive:0x1f5c0f, emissiveIntensity:0.9, metalness:0.2, roughness:0.3 })
      );
      gem.position.y = 0.05;
      gem.scale.set(0.0001,0.0001,0.0001);
      group.add(gem);

      /* --- tripwire charge (trap reveal) — procedurally built dynamite bundle --- */
      var bomb = new THREE.Group();
      var stickMat = new THREE.MeshStandardMaterial({ color:0xB33A2A, roughness:0.6, metalness:0.05, emissive:0x300800, emissiveIntensity:0.3, flatShading:true });
      var bandMat = new THREE.MeshStandardMaterial({ color:0x241505, roughness:0.85, metalness:0.05 });
      var stickOffsets = [[-0.115,0], [0.115,0], [0,-0.115]];
      stickOffsets.forEach(function(off){
        var stick = new THREE.Mesh(new THREE.CylinderGeometry(0.075, 0.075, 0.34, 10), stickMat);
        stick.position.set(off[0], 0.17, off[1]);
        bomb.add(stick);
        var band = new THREE.Mesh(new THREE.CylinderGeometry(0.079, 0.079, 0.05, 10), bandMat);
        band.position.set(off[0], 0.17, off[1]);
        bomb.add(band);
      });
      var strapTop = new THREE.Mesh(new THREE.BoxGeometry(0.34, 0.035, 0.34), bandMat);
      strapTop.position.y = 0.28;
      bomb.add(strapTop);
      var strapBottom = new THREE.Mesh(new THREE.BoxGeometry(0.34, 0.035, 0.34), bandMat);
      strapBottom.position.y = 0.07;
      bomb.add(strapBottom);
      var fuse = new THREE.Mesh(
        new THREE.CylinderGeometry(0.014, 0.022, 0.24, 6),
        new THREE.MeshStandardMaterial({ color:0x2a2015, roughness:0.8 })
      );
      fuse.position.set(0.03, 0.42, 0);
      fuse.rotation.z = -0.4;
      bomb.add(fuse);
      var flareTip = new THREE.Mesh(
        new THREE.SphereGeometry(0.06, 12, 12),
        new THREE.MeshStandardMaterial({ color:0xE4483A, emissive:0xff3a26, emissiveIntensity:1.7, roughness:0.4 })
      );
      flareTip.position.set(0.1, 0.52, 0);
      bomb.add(flareTip);
      var sirenDisc = new THREE.Mesh(
        new THREE.TorusGeometry(0.2, 0.02, 8, 24),
        new THREE.MeshStandardMaterial({ color:0xE8A23D, emissive:0xE8A23D, emissiveIntensity:1.1, roughness:0.4 })
      );
      sirenDisc.rotation.x = Math.PI/2;
      sirenDisc.position.y = 0.55;
      bomb.add(sirenDisc);
      bomb.position.y = 0.05;
      bomb.scale.set(0.0001,0.0001,0.0001);
      group.add(bomb);

      scene.add(group);
      var boxObj = { group:group, lid:lid, gem:gem, bomb:bomb, sirenDisc:sirenDisc, index:i, opened:false };
      boxes.push(boxObj);
      lidMeshes.push(lid);
    }
  }

  /* ---- tween helper ---- */
  function addTween(duration, onUpdate, onComplete){
    activeTweens.push({ start: performance.now(), duration: duration*1000, onUpdate: onUpdate, onComplete: onComplete });
  }
  function easeOutBack(t){ var c1=1.70158, c3=c1+1; return 1 + c3*Math.pow(t-1,3) + c1*Math.pow(t-1,2); }
  function easeOutCubic(t){ return 1-Math.pow(1-t,3); }

  /* Lid-only lift, fired the instant a tile is clicked — purely cosmetic
     (the lid mesh carries no gem/bomb info) so it's safe to play before the
     server confirms the outcome. Keeps clicks feeling instant even while the
     reveal request is still in flight. */
  function beginLidLift(box){
    var startY = box.lid.position.y, startScaleY = box.lid.scale.y;
    addTween(0.18, function(t){
      var e = easeOutCubic(t);
      box.lid.position.y = startY + (-0.32-startY)*e;
      box.lid.scale.y = startScaleY + (0.06-startScaleY)*e;
    });
  }

  /* Reverses beginLidLift() when a click turns out to be invalid (error
     response) so the crate closes back up instead of staying ajar. */
  function revertLidLift(box){
    var startY = box.lid.position.y, startScaleY = box.lid.scale.y;
    addTween(0.18, function(t){
      var e = easeOutCubic(t);
      box.lid.position.y = startY + (0.28-startY)*e;
      box.lid.scale.y = startScaleY + (1-startScaleY)*e;
    });
  }

  function playRevealAnimation(box, isBomb){
    var target = isBomb ? box.bomb : box.gem;
    addTween(0.34, function(t){
      var e = easeOutBack(Math.min(t,1));
      var s = Math.max(0.0001, e);
      target.scale.set(s,s,s);
    });
    if(isBomb && box.sirenDisc){
      spinners.push({ mesh:box.sirenDisc, speed:6, expiresAt:performance.now()+4000 });
    }
  }

  function snapRevealed(box, isBomb){
    box.lid.position.y = -0.32;
    box.lid.scale.y = 0.06;
    var target = isBomb ? box.bomb : box.gem;
    target.scale.set(1,1,1);
  }

  function spawnParticles(pos, colorHex, count, spread, life, gravity){
    var positions = new Float32Array(count*3);
    var velocities = [];
    for(var i=0;i<count;i++){
      positions[i*3] = pos.x;
      positions[i*3+1] = pos.y + 0.2;
      positions[i*3+2] = pos.z;
      var ang = Math.random()*Math.PI*2;
      var up = Math.random()*spread + spread*0.4;
      var r = Math.random()*spread;
      velocities.push(new THREE.Vector3(Math.cos(ang)*r, up, Math.sin(ang)*r));
    }
    var geo = new THREE.BufferGeometry();
    geo.setAttribute('position', new THREE.BufferAttribute(positions,3));
    var mat = new THREE.PointsMaterial({ color:colorHex, size:0.11, transparent:true, opacity:1, depthWrite:false });
    var points = new THREE.Points(geo, mat);
    scene.add(points);
    particleSystems.push({ mesh:points, velocities:velocities, born:performance.now(), life:life*1000, gravity:gravity });
  }

  function spawnShockwave(pos){
    var ring = new THREE.Mesh(
      new THREE.RingGeometry(0.1, 0.17, 40),
      new THREE.MeshBasicMaterial({ color:0xE4483A, transparent:true, opacity:0.9, side:THREE.DoubleSide, blending:THREE.AdditiveBlending, depthWrite:false })
    );
    ring.rotation.x = -Math.PI/2;
    ring.position.set(pos.x, 0.03, pos.z);
    ring.scale.set(0.3,0.3,0.3);
    scene.add(ring);
    addTween(0.55, function(t){
      var e = easeOutCubic(t);
      var s = 0.3 + e*3.4;
      ring.scale.set(s,s,s);
      ring.material.opacity = 0.9*(1-t);
    }, function(){
      scene.remove(ring); ring.geometry.dispose(); ring.material.dispose();
    });
  }

  function spawnFlashLight(pos){
    var light = new THREE.PointLight(0xff5540, 6.5, 7);
    light.position.set(pos.x, pos.y+0.6, pos.z);
    scene.add(light);
    addTween(0.4, function(t){
      light.intensity = 6.5*(1-t);
    }, function(){ scene.remove(light); });
  }

  function triggerScreenFlash(){
    screenFlash.classList.remove('flash');
    void screenFlash.offsetWidth;
    screenFlash.classList.add('flash');
  }

  function triggerShake(){ shake.until = performance.now()+420; shake.duration=420; shake.mag=0.42; }

  /* ---- interaction: overlay buttons drive every reveal (no canvas raycasting) ---- */
  tileButtons.forEach(function(btn){
    var i = parseInt(btn.getAttribute('data-tile'), 10);
    btn.addEventListener('click', function(){
      ensureAudio();
      revealBox(i);
    });
  });

  function revealBox(i){
    var box = boxes[i];
    if(!box || box.opened || game.state!=='playing' || pendingTile!==null) return;
    pendingTile = i;
    if(tileButtons[i]) tileButtons[i].disabled = true;
    beginLidLift(box);

    fetch(REVEAL_URL, {
      method: 'POST',
      headers: {'Content-Type':'application/x-www-form-urlencoded'},
      body: new URLSearchParams({ _token: REVEAL_CSRF, tileIndex: i }),
    })
    .then(function(r){ return r.json(); })
    .then(function(data){
      pendingTile = null;
      if(data.error){
        if(tileButtons[i]) tileButtons[i].disabled = false;
        revertLidLift(box);
        hintText.textContent = data.error;
        return;
      }

      box.opened = true;
      var isBomb = data.isMine;
      playRevealAnimation(box, isBomb);

      if(isBomb){
        var epos = box.group.position;
        spawnParticles(epos, 0xE4483A, 20, 2.4, 0.9, 5);
        spawnParticles(epos, 0xE8A23D, 16, 2.0, 0.7, 4.5);
        spawnParticles(epos, 0xfff2b0, 10, 1.4, 0.5, 4);
        spawnShockwave(epos);
        spawnFlashLight(epos);
        triggerScreenFlash();
        triggerShake();
        phone.classList.remove('shake'); void phone.offsetWidth; phone.classList.add('shake');
        playSound('bomb');
        game.state = 'result';
        cashoutBtn.disabled = true;
        setTimeout(function(){ settleRound(data, false, false); }, 520);
      } else {
        spawnParticles(box.group.position, 0x7ED957, 14, 1.2, 0.6, 2.5);
        playSound('safe');
        game.safeCount = data.game.tilesRevealed;
        game.payout = parseFloat(data.game.currentPayout);
        game.nextPayout = calcPayout(RISK_CONFIG[game.riskKey], game.safeCount + 1, game.bet);
        updateHUD();

        if(data.game.status === 'cashed_out'){
          hintText.textContent = 'Flawless — all crates cleared';
          game.state = 'result';
          cashoutBtn.disabled = true;
          setTimeout(function(){ settleRound(data, true, true); }, 650);
        } else {
          cashoutBtn.disabled = false;
          hintText.textContent = 'Search another crate or extract now';
        }
      }
    })
    .catch(function(){
      pendingTile = null;
      if(tileButtons[i]) tileButtons[i].disabled = false;
      hintText.textContent = 'Network error. Try again.';
    });
  }

  function revealAllRemaining(finalBoard, cb){
    var remaining = boxes.filter(function(b){ return !b.opened; });
    remaining.forEach(function(b, idx){
      setTimeout(function(){
        b.opened = true;
        var isBomb = !!(finalBoard && finalBoard[b.index]);
        beginLidLift(b);
        playRevealAnimation(b, isBomb);
        if(tileButtons[b.index]) tileButtons[b.index].disabled = true;
      }, idx*80);
    });
    setTimeout(cb, remaining.length*80 + 420);
  }

  function settleRound(data, won, perfect){
    cashoutBtn.disabled = true;
    hintText.textContent = 'Mission complete';
    revealAllRemaining(data.game.finalBoard, function(){
      game.balance = parseFloat(data.walletBalance);
      showResult(won, won ? parseFloat(data.game.payout) : 0, !!perfect);
      updateBalanceUI();
    });
  }

  function showResult(won, payout, perfect){
    resultIcon.textContent = won ? (perfect ? '🏅' : '🎖️') : '🚨';
    resultTitle.textContent = won ? (perfect ? 'FLAWLESS EXTRACTION' : 'EXTRACTION SUCCESSFUL') : 'COVER BLOWN';
    resultSub.textContent = won
      ? (game.safeCount + ' crate' + (game.safeCount===1?'':'s') + ' secured')
      : ('Tripwire triggered after ' + game.safeCount + ' crate' + (game.safeCount===1?'':'s') + ' secured');
    resultPayout.textContent = money(payout);
    resultPayoutWrap.className = 'payout-display ' + (won ? 'win' : 'lose');
    resultOverlay.classList.remove('hidden');
    requestAnimationFrame(function(){
      requestAnimationFrame(function(){ resultOverlay.classList.add('show'); });
    });
  }

  /* ---- resume an in-progress round after a page reload ---- */
  function resumeActiveGame(activeGame, tiers){
    game.bet = parseFloat(activeGame.amount);
    game.riskKey = activeGame.tier;
    game.safeCount = activeGame.tilesRevealed;
    game.payout = parseFloat(activeGame.currentPayout);
    game.nextPayout = calcPayout(RISK_CONFIG[game.riskKey], game.safeCount + 1, game.bet);
    game.state = 'playing';

    betScreen.classList.add('hidden');
    gameScreen.classList.remove('hidden');

    // Show loader while Three.js board and tile buttons are being positioned
    resumeLoader.classList.remove('hidden', 'done');

    createBoard();

    (activeGame.revealedTiles || []).forEach(function(i){
      var box = boxes[i];
      if(!box) return;
      box.opened = true;
      snapRevealed(box, false);
      if(tileButtons[i]) tileButtons[i].disabled = true;
    });

    if (cashoutBtn) cashoutBtn.disabled = game.safeCount < 1;
    if (hintText) hintText.textContent = 'Search another crate or extract now';
    updateHUD();
    // Double-rAF ensures the browser has reflowed after unhiding gameScreen
    // before we measure canvasWrap dimensions and position tile buttons.
    requestAnimationFrame(function(){
      onResize();
      requestAnimationFrame(function(){
        onResize();
        resumeLoader.classList.add('done');
        setTimeout(function(){ resumeLoader.classList.add('hidden'); }, 350);
      });
    });
  }

  /* ---- render loop ---- */
  function renderLoop(){
    requestAnimationFrame(renderLoop);
    var now = performance.now();
    var dt = clock.getDelta();

    for(var i=activeTweens.length-1;i>=0;i--){
      var tw = activeTweens[i];
      var t = Math.min(1, (now-tw.start)/tw.duration);
      tw.onUpdate(t);
      if(t>=1){
        if(tw.onComplete) tw.onComplete();
        activeTweens.splice(i,1);
      }
    }

    for(var p=particleSystems.length-1;p>=0;p--){
      var ps = particleSystems[p];
      var age = now - ps.born;
      if(age >= ps.life){
        scene.remove(ps.mesh);
        particleSystems.splice(p,1);
        continue;
      }
      var posAttr = ps.mesh.geometry.attributes.position;
      for(var v=0; v<ps.velocities.length; v++){
        var vel = ps.velocities[v];
        vel.y -= ps.gravity*dt;
        posAttr.array[v*3]   += vel.x*dt;
        posAttr.array[v*3+1] += vel.y*dt;
        posAttr.array[v*3+2] += vel.z*dt;
      }
      posAttr.needsUpdate = true;
      ps.mesh.material.opacity = Math.max(0, 1-age/ps.life);
    }

    for(var sIdx=spinners.length-1; sIdx>=0; sIdx--){
      var sp = spinners[sIdx];
      sp.mesh.rotation.y += sp.speed*dt;
      if(sp.expiresAt && now>sp.expiresAt){ spinners.splice(sIdx,1); }
    }

    if(now < shake.until){
      var remain = (shake.until-now)/shake.duration;
      var m = shake.mag*remain;
      camera.position.set(
        baseCameraPos.x + (Math.random()-0.5)*m,
        baseCameraPos.y + (Math.random()-0.5)*m,
        baseCameraPos.z + (Math.random()-0.5)*m
      );
    } else {
      camera.position.copy(baseCameraPos);
    }
    camera.lookAt(0,0,0);

    renderer.render(scene, camera);
  }

  /* ============ INIT ============ */
  function init(){
    fetch(STATE_URL)
      .then(function(r){ return r.json(); })
      .then(function(data){
        if(data.error) return;

        game.balance = parseFloat(data.walletBalance);
        updateBalanceUI();

        TIER_ORDER.forEach(function(key){
          var t = data.tiers[key];
          if(!t) return;
          RISK_CONFIG[key] = {
            mines: t.mines,
            baseMultiplier: parseFloat(t.baseMultiplier),
            incrementalMultiplier: parseFloat(t.incrementalMultiplier),
            label: TIER_META[key].label,
            accent: TIER_META[key].accent,
            desc: TIER_META[key].desc
          };
        });
        buildRiskUI();

        initThree();

        if(data.activeGame && data.activeGame.status === 'active'){
          resumeActiveGame(data.activeGame, data.tiers);
        }
      })
      .catch(function(){
        buildRiskUI();
        initThree();
      });
  }

  init();
})();
</script>
{% endblock %}