<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$CUE — 入袋即入账</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root {
  --green: #1a5c1a;
  --felt: #2d7a2d;
  --felt-light: #3a9a3a;
  --gold: #ffd700;
  --gold-dark: #b8960c;
  --white: #f5f5f5;
  --bg: #0d1f0d;
  --pocket: #0a0a0a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Noto Sans SC', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* HEADER */
.header {
  text-align: center;
  padding: 32px 20px 16px;
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 15vw, 120px);
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255,215,0,0.4), 4px 4px 0 var(--gold-dark);
  letter-spacing: 6px;
  line-height: 1;
}

.tagline {
  font-size: clamp(14px, 3vw, 20px);
  color: rgba(255,255,255,0.7);
  letter-spacing: 4px;
  margin-top: 6px;
  font-weight: 700;
}

.event-badge {
  display: inline-block;
  background: var(--gold);
  color: #000;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 14px;
  letter-spacing: 3px;
  margin-top: 12px;
  border-radius: 2px;
}

/* GAME SECTION */
.game-section {
  max-width: 700px;
  margin: 20px auto;
  padding: 0 16px;
}

.game-instruction {
  text-align: center;
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.game-instruction span {
  color: var(--gold);
  font-weight: 700;
}

/* TABLE */
.table-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 8px #3d2b0a, 0 0 0 16px #1a0f00, 0 20px 60px rgba(0,0,0,0.8);
}

canvas#gameCanvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

/* SHOT POWER */
.power-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
}

.power-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  white-space: nowrap;
  min-width: 60px;
}

.power-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.power-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d7a2d, var(--gold));
  border-radius: 4px;
  width: 60%;
  transition: width 0.1s;
}

/* RESULT OVERLAY */
.result-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  flex-direction: column;
  text-align: center;
  padding: 20px;
}

.result-overlay.show {
  display: flex;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.result-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.result-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 10vw, 80px);
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,215,0,0.5);
  letter-spacing: 4px;
}

.result-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  margin-top: 8px;
  letter-spacing: 2px;
}

.ca-box {
  margin: 24px 0;
  background: rgba(255,215,0,0.1);
  border: 1px solid var(--gold);
  padding: 16px 32px;
  border-radius: 4px;
}

.ca-label {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: 8px;
}

.ca-value {
  font-family: 'Bebas Neue', monospace;
  font-size: 22px;
  color: var(--white);
  letter-spacing: 2px;
}

.result-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.btn {
  padding: 14px 28px;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-gold {
  background: var(--gold);
  color: #000;
}

.btn-gold:hover {
  background: #fff;
  transform: scale(1.03);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* MISS overlay */
.miss-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(200,0,0,0.85);
  color: white;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
  padding: 16px 40px;
  border-radius: 4px;
  display: none;
  z-index: 99;
  animation: fadeOut 1.5s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

/* INFO SECTION */
.info-section {
  max-width: 700px;
  margin: 32px auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.info-card {
  border: 1px solid rgba(255,215,0,0.2);
  padding: 18px;
  text-align: center;
  border-radius: 4px;
  background: rgba(255,215,0,0.03);
  transition: border-color 0.2s;
}

.info-card:hover { border-color: var(--gold); }

.info-card-label {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 3px;
  margin-bottom: 8px;
}

.info-card-value {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 2px;
}

/* FOOTER */
.footer {
  text-align: center;
  padding: 24px 16px 40px;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 2px;
  line-height: 2;
}

.footer a {
  color: rgba(255,215,0,0.5);
  text-decoration: none;
}
.footer a:hover { color: var(--gold); }

/* CONFETTI */
.confetti-container {
  position: fixed;
  top: 0; left: 0; right: 0;
  pointer-events: none;
  z-index: 101;
  overflow: hidden;
  height: 100vh;
}

@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
</style>
</head>
<body>

<div class="confetti-container" id="confetti"></div>

<div class="header">
  <div class="logo">$CUE</div>
  <div class="tagline">入袋即入账 · BSC</div>
  <div class="event-badge">🎱 赵心童夺冠纪念币 · 2026.04.06</div>
</div>

<div class="game-section">
  <p class="game-instruction">
    <span>瞄准球袋</span>，点击出杆，让BNB入袋 🎱
  </p>

  <div class="table-wrap">
    <canvas id="gameCanvas" width="660" height="380"></canvas>
  </div>

  <div class="power-bar-wrap">
    <span class="power-label">力度</span>
    <div class="power-bar">
      <div class="power-fill" id="powerFill"></div>
    </div>
    <span class="power-label" id="powerPct">60%</span>
  </div>
</div>

<div class="info-section">
  <div class="info-card">
    <div class="info-card-label">NETWORK</div>
    <div class="info-card-value">BSC</div>
  </div>
  <div class="info-card">
    <div class="info-card-label">SYMBOL</div>
    <div class="info-card-value">$CUE</div>
  </div>
  <div class="info-card">
    <div class="info-card-label">TAX</div>
    <div class="info-card-value">0/0</div>
  </div>
  <div class="info-card">
    <div class="info-card-label">SUPPLY</div>
    <div class="info-card-value">1B</div>
  </div>
</div>

<div class="footer">
  <div>$CUE IS A MEME COIN ON BSC · NOT FINANCIAL ADVICE</div>
  <div>赵心童入袋，你也能入账 🎱</div>
  <div style="margin-top:10px;">
    <a href="https://x.com/cue_bnb" target="_blank">[ TWITTER/X ]</a>
  </div>
</div>

<!-- Result overlay -->
<div class="result-overlay" id="resultOverlay">
  <div class="result-icon">🎱</div>
  <div class="result-title">入袋了！</div>
  <div class="result-sub">BNB已到账 · 赵心童认证</div>
  <div class="ca-box">
    <div class="ca-label">CONTRACT ADDRESS</div>
    <div class="ca-value">DEPLOYING SOON · CA: TBA</div>
  </div>
  <div class="result-buttons">
    <a id="shareBtn" href="#" target="_blank" class="btn btn-gold">🐦 分享战绩</a>
    <button class="btn btn-outline" onclick="resetGame()">再打一杆</button>
  </div>
</div>

<div class="miss-toast" id="missToast">偏了！再来</div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = 660, H = 380;

// Game state
let ballX = 165, ballY = 190;
let ballVX = 0, ballVY = 0;
let isMoving = false;
let mouseX = 0, mouseY = 0;
let shots = 3;
let gameOver = false;
let animFrame;
let power = 0.6;
let powerDir = 1;
let isPowerCharging = false;

// Table pockets (corners + midpoints)
const pockets = [
  {x: 24, y: 24, r: 18},
  {x: W/2, y: 16, r: 16},
  {x: W-24, y: 24, r: 18},
  {x: 24, y: H-24, r: 18},
  {x: W/2, y: H-16, r: 16},
  {x: W-24, y: H-24, r: 18},
];

// BNB target ball position
let targetX = W - 160, targetY = H / 2;
let targetPocketed = false;

function drawTable() {
  // Felt background
  ctx.fillStyle = '#2d7a2d';
  ctx.fillRect(0, 0, W, H);

  // Felt texture lines (subtle)
  ctx.strokeStyle = 'rgba(255,255,255,0.03)';
  ctx.lineWidth = 1;
  for (let i = 0; i < W; i += 20) {
    ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, H); ctx.stroke();
  }
  for (let j = 0; j < H; j += 20) {
    ctx.beginPath(); ctx.moveTo(0, j); ctx.lineTo(W, j); ctx.stroke();
  }

  // Cushions
  ctx.fillStyle = '#1a5c1a';
  ctx.fillRect(0, 0, W, 14);
  ctx.fillRect(0, H-14, W, 14);
  ctx.fillRect(0, 0, 14, H);
  ctx.fillRect(W-14, 0, 14, H);

  // Pockets
  pockets.forEach(p => {
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
    ctx.fillStyle = '#050505';
    ctx.fill();
    ctx.strokeStyle = '#111';
    ctx.lineWidth = 2;
    ctx.stroke();
  });

  // Baulk line
  ctx.strokeStyle = 'rgba(255,255,255,0.15)';
  ctx.lineWidth = 1;
  ctx.setLineDash([4,4]);
  ctx.beginPath();
  ctx.moveTo(W*0.25, 14); ctx.lineTo(W*0.25, H-14);
  ctx.stroke();
  ctx.setLineDash([]);

  // D semi-circle
  ctx.beginPath();
  ctx.arc(W*0.25, H/2, 40, -Math.PI/2, Math.PI/2);
  ctx.strokeStyle = 'rgba(255,255,255,0.15)';
  ctx.lineWidth = 1;
  ctx.stroke();
}

function drawCueAimLine() {
  if (isMoving || gameOver) return;
  const dx = mouseX - ballX;
  const dy = mouseY - ballY;
  const len = Math.sqrt(dx*dx + dy*dy);
  if (len < 5) return;
  const nx = dx/len, ny = dy/len;

  // Dotted aim line
  ctx.setLineDash([6, 6]);
  ctx.strokeStyle = 'rgba(255,255,255,0.25)';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(ballX, ballY);
  ctx.lineTo(ballX + nx*200, ballY + ny*200);
  ctx.stroke();
  ctx.setLineDash([]);

  // Cue stick
  ctx.strokeStyle = '#c8a050';
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(ballX - nx*40, ballY - ny*40);
  ctx.lineTo(ballX - nx*140, ballY - ny*140);
  ctx.stroke();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#a08040';
  ctx.beginPath();
  ctx.moveTo(ballX - nx*140, ballY - ny*140);
  ctx.lineTo(ballX - nx*220, ballY - ny*220);
  ctx.stroke();
}

function drawBall(x, y, isTarget) {
  if (isTarget && targetPocketed) return;

  const gradient = ctx.createRadialGradient(x-4, y-4, 2, x, y, 16);
  if (isTarget) {
    // BNB gold coin
    gradient.addColorStop(0, '#fff3a0');
    gradient.addColorStop(0.4, '#ffd700');
    gradient.addColorStop(1, '#8b6200');
  } else {
    // White cue ball
    gradient.addColorStop(0, '#ffffff');
    gradient.addColorStop(0.5, '#e0e0e0');
    gradient.addColorStop(1, '#aaaaaa');
  }

  ctx.beginPath();
  ctx.arc(x, y, 14, 0, Math.PI*2);
  ctx.fillStyle = gradient;
  ctx.fill();
  ctx.strokeStyle = isTarget ? '#8b6200' : '#999';
  ctx.lineWidth = 1;
  ctx.stroke();

  if (isTarget) {
    // BNB diamond logo
    ctx.save();
    ctx.translate(x, y);
    ctx.fillStyle = '#8b4000';
    ctx.beginPath();
    ctx.moveTo(0, -8); ctx.lineTo(7, 0); ctx.lineTo(0, 8); ctx.lineTo(-7, 0);
    ctx.closePath(); ctx.fill();
    ctx.fillStyle = '#ffd700';
    ctx.beginPath();
    ctx.moveTo(0, -4); ctx.lineTo(3.5, 0); ctx.lineTo(0, 4); ctx.lineTo(-3.5, 0);
    ctx.closePath(); ctx.fill();
    ctx.restore();
  }
}

function drawShotsLeft() {
  ctx.font = 'bold 13px Noto Sans SC';
  ctx.fillStyle = 'rgba(255,255,255,0.5)';
  ctx.textAlign = 'right';
  ctx.fillText(`剩余杆数: ${shots}`, W - 20, H - 20);
}

function gameLoop() {
  ctx.clearRect(0, 0, W, H);
  drawTable();

  if (isMoving) {
    ballX += ballVX;
    ballY += ballVY;

    // Wall bouncing
    if (ballX < 28) { ballX = 28; ballVX *= -0.75; }
    if (ballX > W-28) { ballX = W-28; ballVX *= -0.75; }
    if (ballY < 28) { ballY = 28; ballVY *= -0.75; }
    if (ballY > H-28) { ballY = H-28; ballVY *= -0.75; }

    // Friction
    ballVX *= 0.985;
    ballVY *= 0.985;

    // Hit target ball
    if (!targetPocketed) {
      const dx = ballX - targetX;
      const dy = ballY - targetY;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < 28) {
        const nx = dx/dist, ny = dy/dist;
        const dot = ballVX*nx + ballVY*ny;
        targetX += ballVX * 0.8;
        targetY += ballVY * 0.8;
        ballVX -= 2*dot*nx * 0.6;
        ballVY -= 2*dot*ny * 0.6;
      }
    }

    // Target ball pocketed?
    if (!targetPocketed) {
      for (const p of pockets) {
        const dx = targetX - p.x, dy = targetY - p.y;
        if (Math.sqrt(dx*dx + dy*dy) < p.r + 10) {
          targetPocketed = true;
          setTimeout(showWin, 400);
          break;
        }
      }
    }

    // Cue ball pocketed (scratch)
    for (const p of pockets) {
      const dx = ballX - p.x, dy = ballY - p.y;
      if (Math.sqrt(dx*dx + dy*dy) < p.r + 8) {
        // reset cue ball
        ballX = 165; ballY = H/2;
        ballVX = 0; ballVY = 0;
        isMoving = false;
        break;
      }
    }

    // Stop if slow
    if (Math.abs(ballVX) < 0.1 && Math.abs(ballVY) < 0.1 && !targetPocketed) {
      isMoving = false;
      ballVX = 0; ballVY = 0;
      shots--;
      if (shots <= 0) {
        gameOver = true;
        showMiss(true);
      } else {
        showMiss(false);
      }
    }
  }

  // Move target ball with friction
  if (!targetPocketed) {
    drawBall(targetX, targetY, true);
  }
  drawBall(ballX, ballY, false);
  if (!isMoving) drawCueAimLine();
  drawShotsLeft();

  animFrame = requestAnimationFrame(gameLoop);
}

function shoot() {
  if (isMoving || gameOver) return;
  const dx = mouseX - ballX;
  const dy = mouseY - ballY;
  const len = Math.sqrt(dx*dx + dy*dy);
  if (len < 5) return;

  const speed = 12 * power;
  ballVX = (dx/len) * speed;
  ballVY = (dy/len) * speed;
  isMoving = true;
}

function showWin() {
  cancelAnimationFrame(animFrame);
  spawnConfetti();
  const tweet = encodeURIComponent(
    '🎱 我把BNB打进袋了！\n\n入袋即入账\n\n$CUE — 赵心童夺冠BSC纪念meme币\n\n#CUE #BSC #BNB'
  );
  document.getElementById('shareBtn').href =
    'https://twitter.com/intent/tweet?text=' + tweet;
  document.getElementById('resultOverlay').classList.add('show');
}

function showMiss(final) {
  const toast = document.getElementById('missToast');
  toast.textContent = final ? '没球了！刷新重试' : '偏了！再来 (' + shots + '杆剩余)';
  toast.style.display = 'block';
  toast.style.animation = 'none';
  toast.offsetHeight; // reflow
  toast.style.animation = 'fadeOut 1.5s forwards';
  setTimeout(() => { toast.style.display = 'none'; }, 1500);
  if (final) { setTimeout(() => { gameOver = false; resetGame(); }, 2000); }
}

function resetGame() {
  document.getElementById('resultOverlay').classList.remove('show');
  ballX = 165; ballY = H/2;
  ballVX = 0; ballVY = 0;
  targetX = W - 160; targetY = H/2;
  targetPocketed = false;
  isMoving = false;
  shots = 3;
  gameOver = false;
  cancelAnimationFrame(animFrame);
  gameLoop();
}

function spawnConfetti() {
  const container = document.getElementById('confetti');
  container.innerHTML = '';
  const colors = ['#ffd700', '#ff4444', '#44ff44', '#4444ff', '#ff44ff'];
  for (let i = 0; i < 60; i++) {
    const el = document.createElement('div');
    const color = colors[Math.floor(Math.random() * colors.length)];
    const size = Math.random() * 10 + 6;
    el.style.cssText = `
      position:absolute;
      left:${Math.random()*100}%;
      top:0;
      width:${size}px;
      height:${size}px;
      background:${color};
      border-radius:${Math.random()>0.5?'50%':'2px'};
      animation: confettiFall ${1.5+Math.random()*2}s ${Math.random()*0.5}s ease-in forwards;
    `;
    container.appendChild(el);
  }
}

// Power charging
canvas.addEventListener('mousedown', () => { isPowerCharging = true; });
canvas.addEventListener('mouseup', (e) => {
  if (isPowerCharging) { isPowerCharging = false; shoot(); }
});

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width;
  const scaleY = H / rect.height;
  mouseX = (e.clientX - rect.left) * scaleX;
  mouseY = (e.clientY - rect.top) * scaleY;
});

canvas.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width;
  const scaleY = H / rect.height;
  mouseX = (e.touches[0].clientX - rect.left) * scaleX;
  mouseY = (e.touches[0].clientY - rect.top) * scaleY;
}, {passive: false});

canvas.addEventListener('touchend', (e) => {
  e.preventDefault();
  shoot();
}, {passive: false});

// Power bar animation
setInterval(() => {
  if (!isMoving) {
    power += 0.015 * powerDir;
    if (power >= 1) { power = 1; powerDir = -1; }
    if (power <= 0.2) { power = 0.2; powerDir = 1; }
    document.getElementById('powerFill').style.width = (power*100) + '%';
    document.getElementById('powerPct').textContent = Math.round(power*100) + '%';
  }
}, 50);

gameLoop();
</script>
</body>
</html>