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

{% block title %}Pachinko{% endblock %}

{% block body %}
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{ display:flex; flex-direction:column; }
#pk-wrap{ flex:1; min-height:0; background:#000; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
#stage{ position:relative; width:100vw; max-width:480px; background:#111; display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
#stage canvas{ display:block; width:100%; height:100%; }
#sign{ position:absolute; top:6px; left:0; width:100%; text-align:center; z-index:5; pointer-events:none; }
#sign h1{ font-family:'Orbitron',sans-serif; font-size:clamp(16px,4vw,22px); font-weight:900; color:#fff; text-shadow:0 0 12px #ff2f92,0 0 30px #8b5cf6; letter-spacing:4px; margin:0; }
#sign .sub{ font-family:'Rajdhani',sans-serif; font-size:9px; letter-spacing:3px; color:#8b5cf6; margin-top:1px; }
#canvas-wrap{ position:relative; width:100%; flex:1; min-height:0; }
#screen-flash{ position:absolute; inset:0; z-index:7; pointer-events:none; background:radial-gradient(circle at 50% 40%, rgba(255,203,61,0.35), transparent 70%); opacity:0; transition:opacity .08s; }
#screen-flash.flash{ opacity:1; }
#hud{ flex-shrink:0; width:100vw; max-width:480px; padding:3px 8px calc(3px + env(safe-area-inset-bottom,4px)); display:flex; flex-direction:column; gap:3px; background:#111; }
#top-row{ display:flex; align-items:stretch; gap:4px; }
#bal-panel{ flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:3px 6px; min-width:0; text-align:center; }
.label{ font-family:'Rajdhani',sans-serif; font-size:7px; text-transform:uppercase; letter-spacing:1px; color:#7a6f96; margin-bottom:1px; line-height:1; }
.balance-value{ font-family:'Orbitron',sans-serif; font-size:clamp(12px,2.8vw,15px); font-weight:700; color:#fff8e0; line-height:1.2; }
.balance-value.pulse{ animation:balPulse .5s ease-out; }
@keyframes balPulse{ 0%{transform:scale(1)} 40%{transform:scale(1.22);color:#fff8e0} 100%{transform:scale(1)} }
#bet-row{ display:flex; align-items:center; gap:2px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:2px 4px; flex:1; min-width:0; }
.bet-value-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; min-width:0; }
.bet-value{ font-family:'Orbitron',sans-serif; font-size:clamp(11px,2.5vw,14px); font-weight:700; color:#fff; text-align:center; padding:0 2px; min-width:34px; line-height:1.1; }
.bet-sub{ font-family:'Rajdhani',sans-serif; font-size:6px; text-transform:uppercase; letter-spacing:1.2px; color:#7a6f96; line-height:1; margin-top:1px; }
.btn-round{ width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:#fff;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0; }
.btn-round:hover{ background:rgba(255,255,255,0.14);border-color:#8b5cf6; }
.drop-btn{ flex:1; background:linear-gradient(135deg,#ff2f92,#8b5cf6); border:none; border-radius:6px; color:#fff; font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; cursor:pointer; padding:6px 2px; transition:.15s; white-space:nowrap; line-height:1; text-align:center; }
.drop-btn:hover{ filter:brightness(1.2); }
.drop-btn:disabled{ opacity:0.35; cursor:default; filter:none; }
#auto-btn.active{ background:linear-gradient(135deg,#059669,#10b981); box-shadow:0 0 12px rgba(5,150,105,0.5); }
.quick-row{ display:flex; gap:3px; align-items:stretch; }
.quick-bets{ display:flex; gap:2px; flex:1; }
.quick-bets button{ flex:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:4px; color:#b0a8c8; font-size:8px; font-weight:600; cursor:pointer; padding:3px 0; transition:.12s; }
.quick-bets button:hover{ background:rgba(139,92,246,0.2); border-color:#8b5cf6; color:#fff; }
#recent-label{ font-size:9px; color:#7a6f96; text-transform:uppercase; letter-spacing:1.5px; margin-top:2px; }
#history{ display:flex; gap:2px; flex-wrap:wrap; min-height:14px; }
.hist-dot{ border-radius:50%;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.hist-dot.win{ width:20px;height:20px;font-size:9px; background:rgba(255,203,61,0.25); color:#ffcb3d; border:1px solid rgba(255,203,61,0.35); }
.hist-dot.lose{ width:12px;height:12px;font-size:6px; background:rgba(122,111,150,0.15); color:#7a6f96; }
#music-btn{ width:20px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#7a6f96;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;transition:.12s; }
#music-btn.active{ color:#ffcb3d; border-color:rgba(255,203,61,0.25); }
#howto-link{ font-size:11px; color:#8b5cf6; text-decoration:underline; cursor:pointer; text-align:center; flex-shrink:0; padding:3px 0; font-weight:600; }
.pk-overlay.hidden{ display:none; }
.pk-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.82); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; z-index:20; padding:20px; }
.pk-overlay.show{ opacity:1; pointer-events:auto; }
.pk-overlay-card{ width:100%; max-width:360px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:12px; padding:24px 20px 20px; text-align:center; transform:translateY(14px) scale(.96); transition:transform .28s cubic-bezier(.2,1.4,.4,1); }
.pk-overlay.show .pk-overlay-card{ transform:translateY(0) scale(1); }
#pk-howto-title{ font-family:'Orbitron',sans-serif; font-size:15px; letter-spacing:2px; color:#fff; margin:0 0 4px; }
.pk-howto-steps{ margin:0 0 18px; padding-left:18px; font-size:12px; line-height:1.5; color:#d1d5db; text-align:left; }
.pk-howto-steps li{ margin-bottom:8px; }
.pk-howto-btn{ background:linear-gradient(135deg,#ff2f92,#8b5cf6); border:none; border-radius:8px; color:#fff; font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700; cursor:pointer; padding:10px 24px; width:100%; }
#result-pop{ position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) scale(0.6); z-index:8; pointer-events:none; opacity:0; text-align:center; font-family:'Orbitron',sans-serif; font-weight:900; transition:all .35s cubic-bezier(.2,1.4,.4,1); }
#result-pop.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
#result-pop .mult-big{ font-size:clamp(28px,9vw,44px); text-shadow:0 0 20px currentColor,0 0 60px currentColor; }
#result-pop .amt{ font-size:12px; letter-spacing:1.5px; margin-top:2px; }
#balance-warning{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); font-family:'Rajdhani',sans-serif; font-size:11px; color:#ff2f92; background:rgba(0,0,0,0.6); padding:5px 12px; border-radius:6px; border:1px solid #ff2f92; opacity:0; transition:opacity .3s; z-index:10; pointer-events:none; white-space:nowrap; }
#balance-warning.show{ opacity:1; }
@media(max-height:700px){
  #sign .sub{ display:none; }
  #sign h1{ font-size:13px; letter-spacing:1.5px; }
}
@media(max-height:620px){
  #sign h1{ font-size:11px; }
  #hud{ gap:2px; padding:2px 6px calc(2px + env(safe-area-inset-bottom,3px)); }
  #bal-panel{ padding:2px 5px; }
  .balance-value{ font-size:11px; }
  #bet-row{ padding:1px 3px; }
  .bet-value{ font-size:10px; }
  .bet-sub{ font-size:5px; }
  .btn-round{ width:15px;height:15px;font-size:9px; }
  .drop-btn{ padding:4px 4px; font-size:8px; }
  .quick-bets button{ padding:2px 0; font-size:7px; }
  .hist-dot{ width:9px;height:9px;font-size:4px; }
  #music-btn{ width:17px;height:17px;font-size:8px; }
}
</style>
<div id="pk-wrap" data-testid="pk-page">
  <div id="stage">
    <div id="sign">
      <h1>PACHINKO</h1>
      <div class="sub">FORTUNE FALLS &middot; TRY YOUR LUCK</div>
    </div>
    <div id="canvas-wrap">
      <div id="screen-flash"></div>
      <div id="result-pop">
        <div class="mult-big" id="result-mult">0x</div>
        <div class="amt" id="result-amt"></div>
      </div>
      <div id="balance-warning">Not enough credits</div>
    </div>
  </div>
  <div id="hud">
    <div id="top-row">
      <div class="panel balance-panel" id="bal-panel">
        <div class="label">Balance</div>
        <div class="balance-value" id="balance">₱ 0</div>
      </div>
      <div class="bet-row" id="bet-row">
        <div class="btn-round" id="bet-minus" data-testid="pk-bet-minus">&minus;</div>
        <div class="bet-value-wrap">
          <div class="bet-value" id="bet-value" data-testid="pk-bet-value">₱ 50</div>
          <div class="bet-sub" data-testid="pk-bet-sub">Per Ball</div>
        </div>
        <div class="btn-round" id="bet-plus" data-testid="pk-bet-plus">+</div>
      </div>
      <button id="drop-btn" class="drop-btn">DROP</button>
      <button id="auto-btn" class="drop-btn" data-testid="pk-auto-btn">AUTO DROP</button>
    </div>
    <div class="quick-row">
      <div class="quick-bets" id="quick-bets"></div>
      <button id="music-btn" class="active">&#x1F50A;</button>
    </div>
    <div id="recent-label">Recent</div>
    <div id="history"></div>
    <div id="howto-link">How to Play</div>
  </div>
</div>

<div id="howto-overlay" class="pk-overlay hidden">
  <div class="pk-overlay-card">
    <h2 id="pk-howto-title">HOW TO PLAY</h2>
    <em style="font-size:11px;font-style:italic;color:#7a6f96;display:block;margin-bottom:12px;">PAANO LARUIN</em>
    <ol class="pk-howto-steps">
      <li>Set your bet amount <b>(price per ball)</b> and tap <b>DROP</b> to release the ball.<br><em style="font-size:11px;font-style:italic;color:#7a6f96;">Itakda ang iyong taya (presyo bawat bola) at i-tap ang DROP para bitawan ang bola.</em></li>
      <li>The ball bounces through pegs and lands in a slot with a multiplier.<br><em style="font-size:11px;font-style:italic;color:#7a6f96;">Ang bola ay tumatalbog sa mga peg at lumapag sa isang slot na may multiplier.</em></li>
      <li>Win slots: <b style="color:#ff0044;">10x</b> (jackpot!), <b style="color:#ffcb3d;">4x</b>, <b style="color:#ffcb3d;">3x</b>, <b style="color:#ff2f92;">2.5x</b>, <b style="color:#ff2f92;">2x</b>, <b style="color:#8b5cf6;">1.5x</b>, <b style="color:#8b5cf6;">1.2x</b> — you get your bet multiplied.<br><em style="font-size:11px;font-style:italic;color:#7a6f96;">Manalo: i-multiply ang iyong taya.</em></li>
      <li>Loss slots: <b style="color:#17e8ff;">0.5x</b>, <b style="color:#3a2e57;">0x</b> — 0.5x returns half, 0x loses the full bet.<br><em style="font-size:11px;font-style:italic;color:#7a6f96;">Talo: babalik ang kalahati o wala.</em></li>
      <li>Drop multiple balls by tapping <b>DROP</b> repeatedly — each ball is an independent bet.<br><em style="font-size:11px;font-style:italic;color:#7a6f96;">Pindutin lang nang paulit-ulit ang DROP para sa maraming bola — bawat isa ay hiwalay na taya.</em></li>
    </ol>
    <button id="pk-howto-close" class="pk-howto-btn" type="button">GOT IT<br><em style="font-size:10px;font-style:italic;">NAINTINDIHAN KO</em></button>
  </div>
</div>

<audio id="bg-music" src="{{ asset('game/musics/pachinko_bg.mp3') }}" loop preload="auto"></audio>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function(){
"use strict";

const SLOT_MULTS = [3, 0.5, 2.5, 1.5, 0, 10, 0, 4, 2, 0, 1.2];
const SLOT_COUNT = SLOT_MULTS.length;

const BOARD_LEFT = -6.2, BOARD_RIGHT = 6.2;
const BOARD_TOP = 7.6, BOARD_BOTTOM = -7.6;
const PEG_R = 0.14, BALL_R = 0.24;
const SLOT_WIDTH = (BOARD_RIGHT - BOARD_LEFT) / SLOT_COUNT;
const SCENE_TOP = BOARD_TOP + 1.0;
const SCENE_BOTTOM = BOARD_BOTTOM - 1.7;
const SCENE_HEIGHT = SCENE_TOP - SCENE_BOTTOM;
const SCENE_WIDTH = (BOARD_RIGHT - BOARD_LEFT) + 1.2;
const SCENE_CENTER_Y = (SCENE_TOP + SCENE_BOTTOM) / 2;

function slotColor(m){
  if(m >= 9) return 0xff0044;
  if(m >= 3) return 0xffcb3d;
  if(m >= 2) return 0xff2f92;
  if(m >= 1) return 0x8b5cf6;
  if(m >= 0.4) return 0x17e8ff;
  return 0x3a2e57;
}

const wrap = document.getElementById('canvas-wrap');
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x07040f, 0.022);
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:false });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
wrap.appendChild(renderer.domElement);

function fitCamera(){
  const w=wrap.clientWidth, h=wrap.clientHeight;
  if(!w||!h)return;
  renderer.setSize(w,h);
  camera.aspect=w/h;
  const vFov=camera.fov*Math.PI/180;
  const dW=(SCENE_WIDTH/2)/(Math.tan(vFov/2)*camera.aspect);
  const dH=(SCENE_HEIGHT/2)/Math.tan(vFov/2);
  camera.position.set(0, SCENE_CENTER_Y, Math.max(dW,dH)*1.1);
  camera.lookAt(0,SCENE_CENTER_Y-0.5,0);
  camera.updateProjectionMatrix();
}

scene.add(new THREE.AmbientLight(0x2a1f4a,1.1));
const kL=new THREE.PointLight(0xff2f92,2.2,40);kL.position.set(-6,6,10);scene.add(kL);
const kL2=new THREE.PointLight(0x17e8ff,2.0,40);kL2.position.set(6,-6,10);scene.add(kL2);
const tL=new THREE.PointLight(0xffffff,0.8,30);tL.position.set(0,10,12);scene.add(tL);

const backGeo=new THREE.PlaneGeometry(BOARD_RIGHT-BOARD_LEFT+1.4,BOARD_TOP-BOARD_BOTTOM+2.6);
const backMat=new THREE.MeshStandardMaterial({color:0x0c0818,metalness:0.6,roughness:0.35});
const back=new THREE.Mesh(backGeo,backMat);back.position.set(0,-0.3,-0.6);scene.add(back);

const gh=new THREE.GridHelper(16,24,0x2a1f4a,0x1a1230);
gh.rotation.x=Math.PI/2;gh.position.set(0,-0.3,-0.58);
gh.material.opacity=0.25;gh.material.transparent=true;scene.add(gh);

function wallTube(x){
  const g=new THREE.CylinderGeometry(0.09,0.09,BOARD_TOP-BOARD_BOTTOM+1.2,12);
  const m=new THREE.MeshStandardMaterial({color:0x17e8ff,emissive:0x17e8ff,emissiveIntensity:1.4,metalness:0.3,roughness:0.2});
  const me=new THREE.Mesh(g,m);me.position.set(x,-0.3,0.05);return me;
}
scene.add(wallTube(BOARD_LEFT-0.12));
scene.add(wallTube(BOARD_RIGHT+0.12));

const pegs=[];
const pegGeo=new THREE.CylinderGeometry(PEG_R,PEG_R,0.5,10);
const pegA=new THREE.MeshStandardMaterial({color:0xff2f92,emissive:0xff2f92,emissiveIntensity:0.9,metalness:0.4,roughness:0.25});
const pegB=new THREE.MeshStandardMaterial({color:0x17e8ff,emissive:0x17e8ff,emissiveIntensity:0.9,metalness:0.4,roughness:0.25});
const RC=11,RS=(BOARD_TOP-1.4-(BOARD_BOTTOM+1.6))/(RC-1);
for(let r=0;r<RC;r++){
  const y=(BOARD_TOP-1.4)-r*RS,off=r%2===0?0:0.55;
  for(let x=BOARD_LEFT+0.9+off;x<=BOARD_RIGHT-0.9;x+=1.1){
    const m=((r+Math.round(x))%2===0)?pegA:pegB;
    const p=new THREE.Mesh(pegGeo,m);
    p.rotation.x=Math.PI/2;p.position.set(x,y,0.1);scene.add(p);
    pegs.push({mesh:p,glow:0,x:x,y:y});
  }
}

const slotGroup=new THREE.Group();scene.add(slotGroup);
const DIVIDER_H=1.0;
const dGeo=new THREE.BoxGeometry(0.06,DIVIDER_H,0.5);
const dMat=new THREE.MeshStandardMaterial({color:0x8b5cf6,emissive:0x8b5cf6,emissiveIntensity:0.7});
const dividerXs=[];
for(let i=0;i<=SLOT_COUNT;i++){
  const x=BOARD_LEFT+i*SLOT_WIDTH;
  dividerXs.push(x);
  const d=new THREE.Mesh(dGeo,dMat);
  d.position.set(x,BOARD_BOTTOM-0.15+DIVIDER_H/2,0.1);slotGroup.add(d);
}

function makeLabel(text,color){
  const c=document.createElement('canvas');c.width=128;c.height=64;
  const ctx=c.getContext('2d');
  ctx.font='700 40px Orbitron, sans-serif';
  ctx.textAlign='center';ctx.textBaseline='middle';
  ctx.shadowColor=color;ctx.shadowBlur=18;ctx.fillStyle=color;
  ctx.fillText(text,64,32);
  const t=new THREE.CanvasTexture(c);
  const m=new THREE.SpriteMaterial({map:t,transparent:true});
  const s=new THREE.Sprite(m);s.scale.set(1.4,0.7,1);return s;
}
for(let i=0;i<SLOT_COUNT;i++){
  const cx=BOARD_LEFT+(i+0.5)*SLOT_WIDTH;
  const m=SLOT_MULTS[i];
  const col='#'+slotColor(m).toString(16).padStart(6,'0');
  const lb=makeLabel(m+'x',col);lb.position.set(cx,BOARD_BOTTOM-0.9,0.3);slotGroup.add(lb);
  const tg=new THREE.PlaneGeometry(SLOT_WIDTH*0.9,0.5);
  const tm=new THREE.MeshStandardMaterial({color:slotColor(m),emissive:slotColor(m),emissiveIntensity:0.55,transparent:true,opacity:0.55});
  const tl=new THREE.Mesh(tg,tm);tl.position.set(cx,BOARD_BOTTOM-0.15,0.05);slotGroup.add(tl);
}

const MAX_BALLS=10;
const ballGeo=new THREE.SphereGeometry(BALL_R,24,24);
const ballMat=new THREE.MeshStandardMaterial({color:0xfff2d0,emissive:0xffcb3d,emissiveIntensity:0.6,metalness:0.85,roughness:0.15});
const ballMeshes=[];
for(let i=0;i<MAX_BALLS;i++){
  const m=new THREE.Mesh(ballGeo,ballMat.clone());m.visible=false;m.position.z=0.18;scene.add(m);
  const g=new THREE.PointLight(0xffcb3d,1.5,6);m.add(g);
  ballMeshes.push(m);
}

const CONFETTI_COLORS=[0xffcb3d,0xff2f92,0x17e8ff,0x8b5cf6,0xffffff];
function dotTex(){
  const c=document.createElement('canvas');c.width=32;c.height=32;
  const ctx=c.getContext('2d');
  const g=ctx.createRadialGradient(16,16,0,16,16,16);
  g.addColorStop(0,'rgba(255,255,255,1)');g.addColorStop(0.5,'rgba(255,255,255,0.7)');g.addColorStop(1,'rgba(255,255,255,0)');
  ctx.fillStyle=g;ctx.fillRect(0,0,32,32);
  return new THREE.CanvasTexture(c);
}
const dotTexture=dotTex();
const confetti=[];
for(let i=0;i<70;i++){
  const m=new THREE.SpriteMaterial({map:dotTexture,color:0xffffff,transparent:true,opacity:0,blending:THREE.AdditiveBlending,depthWrite:false});
  const s=new THREE.Sprite(m);s.scale.set(0.28,0.28,1);s.visible=false;scene.add(s);
  confetti.push({mesh:s,active:false,x:0,y:0,z:0,vx:0,vy:0,vz:0,life:0,maxLife:1});
}

function spawnConfetti(x,y,count,big){
  let n=0;
  for(let i=0;i<confetti.length&&n<count;i++){
    const p=confetti[i];if(p.active)continue;
    p.active=true;p.x=x;p.y=y;p.z=0.5;
    const a=Math.random()*Math.PI-Math.PI/2+(Math.random()<0.5?0:Math.PI);
    const s=(big?5.5:3.8)+Math.random()*(big?3.5:2.5);
    p.vx=Math.cos(a)*s*0.9+(Math.random()-0.5)*2;
    p.vy=Math.abs(Math.sin(a))*s+2.5;
    p.vz=(Math.random()-0.5)*1.5;
    p.life=p.maxLife=0.9+Math.random()*(big?0.9:0.5);
    p.mesh.material.color.setHex(CONFETTI_COLORS[Math.floor(Math.random()*CONFETTI_COLORS.length)]);
    p.mesh.material.opacity=1;
    p.mesh.scale.setScalar((big?0.34:0.24)+Math.random()*0.14);
    p.mesh.visible=true;n++;
  }
}

function updateConfetti(dt){
  for(let i=0;i<confetti.length;i++){
    const p=confetti[i];if(!p.active)continue;
    p.vy+=-9*dt;p.x+=p.vx*dt;p.y+=p.vy*dt;p.z+=p.vz*dt;
    p.life-=dt;
    if(p.life<=0){p.active=false;p.mesh.visible=false;continue;}
    p.mesh.position.set(p.x,p.y,p.z);
    p.mesh.material.opacity=Math.max(0,Math.min(1,p.life/p.maxLife*1.3));
  }
}

let audioCtx=null;
function ensureAudio(){if(!audioCtx){try{audioCtx=new(window.AudioContext||window.webkitAudioContext)();}catch(e){}}}
function beep(freq,dur,vol,type){
  if(!audioCtx)return;
  const o=audioCtx.createOscillator(),g=audioCtx.createGain();
  o.type=type||'sine';o.frequency.value=freq;
  g.gain.value=vol;g.gain.exponentialRampToValueAtTime(0.001,audioCtx.currentTime+dur);
  o.connect(g);g.connect(audioCtx.destination);o.start();o.stop(audioCtx.currentTime+dur);
}

function playFanfare(big){
  if(!audioCtx)return;
  const notes=big?[523.25,659.25,783.99,1046.50,1318.51,1567.98]:[523.25,659.25,783.99,1046.50];
  const step=big?0.085:0.1;
  notes.forEach((f,i)=>setTimeout(()=>beep(f,big?0.4:0.3,big?0.15:0.12,'triangle'),i*step*1000));
  setTimeout(()=>{
    beep(notes[notes.length-1],0.6,0.1,'sine');
    beep(notes[notes.length-1]*1.25,0.6,0.08,'sine');
    if(big)beep(notes[notes.length-1]*1.5,0.8,0.07,'sine');
  },notes.length*step*1000);
}

const bgMusic=document.getElementById('bg-music');
const musicBtn=document.getElementById('music-btn');
bgMusic.volume=0.15;
function startMusic(){
  bgMusic.play().then(()=>{musicBtn.textContent='🔊';musicBtn.classList.add('active');}).catch(()=>{});
}
musicBtn.textContent='🔊';musicBtn.classList.add('active');
function unlockAudio(){startMusic();document.removeEventListener('click',unlockAudio);document.removeEventListener('touchstart',unlockAudio);}
document.addEventListener('click',unlockAudio);document.addEventListener('touchstart',unlockAudio);
startMusic();
musicBtn.addEventListener('click',()=>{
  if(bgMusic.paused){startMusic();}else{bgMusic.pause();musicBtn.textContent='🔇';musicBtn.classList.remove('active');}
});

let balance=0, bet=50, maxBet=100;
let sims=[];
const GRAVITY=15, FRICTION=1.0, BOUNCE=0.5;

function simulateLandingSlot(dropX){
  let x=dropX,y=BOARD_TOP+0.5,vx=0,vy=0;
  for(let s=0;s<600;s++){
    vy-=GRAVITY*0.016;
    vx*=Math.pow(FRICTION,0.016*60);
    vy*=Math.pow(FRICTION,0.016*60);
    x+=vx*0.016;
    y+=vy*0.016;
    const spd=Math.sqrt(vx*vx+vy*vy);
    if(spd>15){vx=vx/spd*15;vy=vy/spd*15;}
    const wl=BOARD_LEFT+BALL_R,wr=BOARD_RIGHT-BALL_R;
    if(x<wl){x=wl;vx=Math.abs(vx)*BOUNCE;}
    if(x>wr){x=wr;vx=-Math.abs(vx)*BOUNCE;}
    if(y>BOARD_TOP+0.7){y=BOARD_TOP+0.7;vy=0;}
    const dTop=BOARD_BOTTOM-0.15+DIVIDER_H,dBot=BOARD_BOTTOM-0.15;
    if(y>dBot&&y<dTop){
      for(let i=1;i<dividerXs.length-1;i++){
        const dx=dividerXs[i],halfW=0.04;
        if(Math.abs(x-dx)<halfW){x=dx+Math.sign(x-dx)*halfW;vx=-vx*BOUNCE*0.6;break;}
      }
    }
    for(let i=0;i<pegs.length;i++){
      const pg=pegs[i];
      const dx=x-pg.x,dy=y-pg.y,dist=Math.sqrt(dx*dx+dy*dy);
      if(dist<BALL_R+PEG_R&&dist>0.001){
        const nx=dx/dist,ny=dy/dist;
        x+=nx*(BALL_R+PEG_R-dist);y+=ny*(BALL_R+PEG_R-dist);
        const dot=vx*nx+vy*ny;
        vx-=1.6*dot*nx;vy-=1.6*dot*ny;
        break;
      }
    }
    if(y<=BOARD_BOTTOM+BALL_R){
      const slot=Math.floor((x-BOARD_LEFT)/SLOT_WIDTH);
      return Math.max(0,Math.min(SLOT_COUNT-1,slot));
    }
  }
  return -1;
}

function findDropX(targetSlot){
  const cx=BOARD_LEFT+(targetSlot+0.5)*SLOT_WIDTH;
  for(let off=-1.5;off<=1.5;off+=0.02){
    if(simulateLandingSlot(cx+off)===targetSlot)return cx+off;
  }
  return cx;
}

const balanceEl=document.getElementById('balance');
const betValueEl=document.getElementById('bet-value');
const dropBtn=document.getElementById('drop-btn');
const historyEl=document.getElementById('history');
const resultPop=document.getElementById('result-pop');
const resultMult=document.getElementById('result-mult');
const resultAmt=document.getElementById('result-amt');
const warnEl=document.getElementById('balance-warning');
const flashEl=document.getElementById('screen-flash');
const quickBetsEl=document.getElementById('quick-bets');

function fmt(n){return '₱ '+Number(n).toLocaleString('en-PH',{minimumFractionDigits:2,maximumFractionDigits:2});}
function updateHUD(){
  balanceEl.textContent=fmt(balance);
  betValueEl.textContent='₱ '+Math.round(bet);
}

function clampBet(){bet=Math.max(5,Math.min(bet,maxBet));}
function flashWarning(){warnEl.classList.add('show');setTimeout(()=>warnEl.classList.remove('show'),1400);}

document.getElementById('bet-minus').addEventListener('click',()=>{bet=Math.max(5,bet-5);updateHUD();});
document.getElementById('bet-plus').addEventListener('click',()=>{bet=Math.min(maxBet,bet+5);updateHUD();});

function addHistory(mult,payout){
  const d=document.createElement('div');
  d.className='hist-dot'+(payout>0?' win':' lose');
  d.textContent=payout>0?mult+'x':'0';
  historyEl.insertBefore(d,historyEl.firstChild);
  while(historyEl.children.length>15)historyEl.removeChild(historyEl.lastChild);
}

function showResult(mult,payout,isBig){
  resultMult.textContent=mult+'x';
  const ci='#'+slotColor(mult).toString(16).padStart(6,'0');
  resultMult.style.color=ci;
  resultAmt.textContent=payout>0?'+'+fmt(payout):'-'+fmt(Math.abs(payout));
  resultAmt.style.color=payout>0?'#ffcb3d':'#7a6f96';
  resultPop.classList.remove('win-pop','big-win');
  if(payout>0)resultPop.classList.add(isBig?'big-win':'win-pop');
  void resultPop.offsetWidth;
  resultPop.classList.add('show');
  setTimeout(()=>resultPop.classList.remove('show'),1600);
}

const CSRF_TOKEN='{{ csrf_token('pachinko_bet') }}';
const STATE_URL='{{ path('app_play_pachinko_state') }}';
const BET_URL='{{ path('app_play_pachinko_bet') }}';


function loadState(){
  fetch(STATE_URL).then(r=>r.json()).then(d=>{
    if(d.error)return;
    balance=parseFloat(d.walletBalance);
    maxBet=parseFloat(d.maxBetAmount)||999999;
    updateHUD();
    d.recentBets.forEach(b=>addHistory(parseFloat(b.multiplier),parseFloat(b.payout)));
    if(d.slotMults)Object.assign(SLOT_MULTS,d.slotMults);
  }).catch(()=>{});
}

const pkHowtoLink=document.getElementById('howto-link');
const pkHowtoOverlay=document.getElementById('howto-overlay');
const pkHowtoClose=document.getElementById('pk-howto-close');
pkHowtoLink.addEventListener('click',()=>{pkHowtoOverlay.classList.remove('hidden');requestAnimationFrame(()=>{requestAnimationFrame(()=>{pkHowtoOverlay.classList.add('show');});});});
pkHowtoClose.addEventListener('click',()=>{pkHowtoOverlay.classList.remove('show');setTimeout(()=>{pkHowtoOverlay.classList.add('hidden');},220);});

let lastDrop=0;
let autoOn=false;
const autoBtn=document.getElementById('auto-btn');
autoBtn.addEventListener('click',()=>{
  autoOn=!autoOn;
  autoBtn.classList.toggle('active',autoOn);
  autoBtn.textContent=autoOn?'STOP':'AUTO DROP';
  if(autoOn)autoTick();
});
function autoTick(){
  if(!autoOn)return;
  if(bet>balance+0.001){
    autoOn=false;autoBtn.classList.remove('active');autoBtn.textContent='AUTO DROP';
    return;
  }
  if(sims.length>=MAX_BALLS||pendingFetch){
    setTimeout(autoTick,200);
    return;
  }
  dropBtn.click();
  setTimeout(autoTick,500);
}

let pendingFetch=false;
dropBtn.addEventListener('click',()=>{
  if(pendingFetch)return;
  ensureAudio();startMusic();
  clampBet();
  if(bet>balance+0.001){if(!autoOn)flashWarning();return;}
  let meshIdx=-1;
  for(let i=0;i<MAX_BALLS;i++){if(!ballMeshes[i].visible){meshIdx=i;break;}}
  if(meshIdx===-1){flashWarning();return;}
  pendingFetch=true;
  const formData=new FormData();
  formData.set('amount',String(bet));
  formData.set('_token',CSRF_TOKEN);
  fetch(BET_URL,{method:'POST',body:formData})
    .then(r=>r.json())
    .then(d=>{
      pendingFetch=false;
      if(d.error){flashWarning();return;}
      balance-=bet;updateHUD();
      const slotIdx=d.slotIndex;
      let sx;
      try{sx=findDropX(slotIdx);}catch(e){sx=null;}
      if(!isFinite(sx))sx=BOARD_LEFT+(slotIdx+0.5)*SLOT_WIDTH;
      const mesh=ballMeshes[meshIdx];
      mesh.visible=true;
      mesh.position.set(sx,BOARD_TOP+0.5,0.18);
      sims.push({
        x:sx,y:BOARD_TOP+0.5,vx:0,vy:0,
        targetSlotIdx:slotIdx,
        multiplier:parseFloat(d.multiplier),
        payout:parseFloat(d.payout),
        meshIdx,done:false
      });
    })
    .catch(()=>{pendingFetch=false;flashWarning();});
});

let simAccs=[];
function updateSims(dt){
  let allDone=true;
  for(let s=0;s<sims.length;s++){
    const sim=sims[s];if(sim.done)continue;
    allDone=false;
    if(simAccs[s]===undefined)simAccs[s]=0;
    simAccs[s]+=dt;
    while(simAccs[s]>=0.016){
      simAccs[s]-=0.016;
      sim.vy-=GRAVITY*0.016;
      sim.vx*=Math.pow(FRICTION,0.016*60);
      sim.vy*=Math.pow(FRICTION,0.016*60);
      sim.x+=sim.vx*0.016;
      sim.y+=sim.vy*0.016;
      const spd=Math.sqrt(sim.vx*sim.vx+sim.vy*sim.vy);
      if(spd>15){sim.vx=sim.vx/spd*15;sim.vy=sim.vy/spd*15;}
      const wl=BOARD_LEFT+BALL_R,wr=BOARD_RIGHT-BALL_R;
      if(sim.x<wl){sim.x=wl;sim.vx=Math.abs(sim.vx)*BOUNCE;}
      if(sim.x>wr){sim.x=wr;sim.vx=-Math.abs(sim.vx)*BOUNCE;}
      if(sim.y>BOARD_TOP+0.7){sim.y=BOARD_TOP+0.7;sim.vy=0;}
      if(!isFinite(sim.x)||!isFinite(sim.y)){sim.x=0;sim.y=BOARD_TOP+0.5;sim.vx=0;sim.vy=0;}
      const dTop=BOARD_BOTTOM-0.15+DIVIDER_H,dBot=BOARD_BOTTOM-0.15;
      if(sim.y>dBot&&sim.y<dTop){
        for(let i=1;i<dividerXs.length-1;i++){
          const dx=dividerXs[i],halfW=0.04;
          if(Math.abs(sim.x-dx)<halfW){sim.x=dx+Math.sign(sim.x-dx)*halfW;sim.vx=-sim.vx*BOUNCE*0.6;break;}
        }
      }
      for(let i=0;i<pegs.length;i++){
        const pg=pegs[i],dx=sim.x-pg.x,dy=sim.y-pg.y,dist=Math.sqrt(dx*dx+dy*dy);
        if(dist<BALL_R+PEG_R&&dist>0.001){
          const nx=dx/dist,ny=dy/dist,ov=BALL_R+PEG_R-dist;
          sim.x+=nx*ov;sim.y+=ny*ov;
          const dot=sim.vx*nx+sim.vy*ny;
          sim.vx-=1.6*dot*nx;sim.vy-=1.6*dot*ny;
          pg.glow=0.6;
          if(Math.random()<0.2)beep(500+Math.random()*500,0.035,0.03,'sine');
          break;
        }
      }
      if(sim.y<=BOARD_BOTTOM+BALL_R){
        sim.y=BOARD_BOTTOM+BALL_R;sim.done=true;
        const mesh=ballMeshes[sim.meshIdx];
        mesh.position.set(sim.x,sim.y,0.18);
        if(sim.payout>0){
          balance+=sim.payout;updateHUD();
          playFanfare(sim.multiplier>=2.5);
          spawnConfetti(sim.x,BOARD_BOTTOM+0.4,sim.multiplier>=2.5?55:28,sim.multiplier>=2.5);
          flashEl.classList.remove('flash');void flashEl.offsetWidth;flashEl.classList.add('flash');
          balanceEl.classList.remove('pulse');void balanceEl.offsetWidth;balanceEl.classList.add('pulse');
        }else{beep(220,0.35,0.16,'sine');}
        addHistory(sim.multiplier,sim.payout);
        showResult(sim.multiplier,sim.payout,sim.multiplier>=2.5);
        mesh.visible=false;
        simAccs[s]=0;
      }
    }
    const mesh=ballMeshes[sim.meshIdx];
    if(!isFinite(sim.x)||!isFinite(sim.y)||sim.x<BOARD_LEFT-2||sim.x>BOARD_RIGHT+2||sim.y<BOARD_BOTTOM-2){sim.done=true;mesh.visible=false;simAccs[s]=0;continue;}
    mesh.position.set(sim.x,sim.y,0.18);
  }
  if(allDone&&sims.length>0){
    sims=[];simAccs=[];loadState();
  }
}

const clock=new THREE.Clock();
function animate(){
  requestAnimationFrame(animate);
  const dt=Math.min(clock.getDelta(),0.033);
  if(sims.length>0)updateSims(dt);
  updateConfetti(dt);
  camera.position.x=0;camera.lookAt(0,SCENE_CENTER_Y,0);
  for(let i=0;i<pegs.length;i++){
    const p=pegs[i];
    if(p.glow>0.01){p.mesh.material.emissiveIntensity=0.9+p.glow;p.glow*=0.95;}
    else if(p.glow!==0){p.glow=0;p.mesh.material.emissiveIntensity=0.9;}
  }
  const t=performance.now()*0.001;
  kL.intensity=2.0+Math.sin(t*1.3)*0.3;
  kL2.intensity=1.8+Math.cos(t*1.1)*0.3;
  renderer.render(scene,camera);
}

document.addEventListener('visibilitychange',()=>{if(!document.hidden)clock.start();});
fitCamera();animate();
window.addEventListener('resize',fitCamera);
window.addEventListener('orientationchange',fitCamera);
if(window.ResizeObserver)new ResizeObserver(fitCamera).observe(wrap);
updateHUD();loadState();
})();
</script>
{% endblock %}