/**
 * SkinScene.js
 * Tank skin gallery — military-tech themed UI.
 * Players can preview, purchase, and equip cosmetic tank skins.
 */

const {
  SCREEN_WIDTH,
  SCREEN_HEIGHT,
  COLORS,
  SCENE,
} = require('../base/GameGlobal');
const { t } = require('../i18n/I18n');
const { drawTankSkin } = require('../entities/TankSkinRenderer');

// ============================================================
// Layout
// ============================================================
const COLS = 2;
const CARD_GAP = 12;
const SIDE_PAD = Math.max(16, (SCREEN_WIDTH - 320) / 2);
const GRID_W = SCREEN_WIDTH - SIDE_PAD * 2;
const CARD_W = (GRID_W - CARD_GAP) / COLS;
const CARD_H = 108;
const HEADER_H = SCREEN_HEIGHT * 0.15;
const CARDS_START_Y = HEADER_H + 8;
const BACK_BTN_W = 110;
const BACK_BTN_H = 38;

// ============================================================
// Colors & Style
// ============================================================
const C = {
  BG_TOP: '#0b0e17',
  BG_BOT: '#141b2d',
  HEADER_LINE: '#e94560',
  CARD_BG: 'rgba(22, 33, 62, 0.85)',
  CARD_BORDER: '#1e3054',
  CARD_EQUIPPED_BG: 'rgba(46, 125, 50, 0.18)',
  CARD_EQUIPPED_BORDER: '#4CAF50',
  CARD_LOCKED_BG: 'rgba(15, 20, 35, 0.9)',
  CARD_LOCKED_BORDER: '#2a2a3a',
  GOLD: '#FFD700',
  GOLD_DIM: '#B8860B',
  TEXT_PRIMARY: '#E8E8E8',
  TEXT_SECONDARY: '#8899AA',
  TEXT_MUTED: '#556677',
  GREEN: '#4CAF50',
  RED: '#FF4444',
  ORANGE: '#FF9800',
  BACK_BTN: '#1a2744',
  BACK_BTN_BORDER: '#2a4060',
  TOAST_BG: 'rgba(0,0,0,0.82)',
};

// ============================================================
// Scene
// ============================================================
const SkinScene = {
  _buttons: {},
  _skinCards: [],
  _message: '',
  _messageTimer: 0,
  _animTimer: 0,
  // Scroll state
  _scrollY: 0,
  _maxScrollY: 0,
  _touchStartY: 0,
  _touchLastY: 0,
  _isDragging: false,
  _scrollVelocity: 0,

  enter() {
    this._message = '';
    this._messageTimer = 0;
    this._animTimer = 0;
    this._scrollY = 0;
    this._scrollVelocity = 0;
    this._isDragging = false;
    this._calculateLayout();
  },

  exit() {},

  _calculateLayout() {
    const sm = GameGlobal.skinManager;
    if (!sm) return;

    const skins = sm.getAllSkins();
    this._skinCards = [];

    for (let i = 0; i < skins.length; i++) {
      const col = i % COLS;
      const row = Math.floor(i / COLS);
      const x = SIDE_PAD + col * (CARD_W + CARD_GAP);
      const y = CARDS_START_Y + row * (CARD_H + CARD_GAP);

      this._skinCards.push({
        ...skins[i],
        rect: { x, y, w: CARD_W, h: CARD_H },
      });
    }

    // Back button — fixed at bottom of screen (not scrollable)
    const BACK_BTN_BOTTOM_PAD = 12;
    this._buttons = {
      back: {
        x: (SCREEN_WIDTH - BACK_BTN_W) / 2,
        y: SCREEN_HEIGHT - BACK_BTN_H - BACK_BTN_BOTTOM_PAD,
        w: BACK_BTN_W,
        h: BACK_BTN_H,
      },
    };

    // Calculate max scroll: total content height vs visible area
    // Visible area ends where the fixed back button starts
    const visibleBottom = SCREEN_HEIGHT - BACK_BTN_H - BACK_BTN_BOTTOM_PAD - 8;
    const lastRow = Math.ceil(skins.length / COLS);
    const contentBottom = CARDS_START_Y + lastRow * (CARD_H + CARD_GAP);
    this._maxScrollY = Math.max(0, contentBottom - visibleBottom);
    // Clamp current scroll
    this._scrollY = Math.min(this._scrollY, this._maxScrollY);
  },

  update(dt) {
    this._animTimer += dt;
    if (this._messageTimer > 0) {
      this._messageTimer -= dt;
      if (this._messageTimer <= 0) {
        this._message = '';
      }
    }
    // Inertia scrolling
    if (!this._isDragging && Math.abs(this._scrollVelocity) > 0.5) {
      this._scrollY += this._scrollVelocity * dt;
      this._scrollVelocity *= 0.92; // friction
      // Clamp
      if (this._scrollY < 0) {
        this._scrollY = 0;
        this._scrollVelocity = 0;
      } else if (this._scrollY > this._maxScrollY) {
        this._scrollY = this._maxScrollY;
        this._scrollVelocity = 0;
      }
    } else if (!this._isDragging) {
      this._scrollVelocity = 0;
    }
  },

  // ============================================================
  // Render
  // ============================================================
  render(ctx) {
    this._drawBackground(ctx);

    const sm = GameGlobal.skinManager;
    if (!sm) return;
    const equippedId = sm.getEquippedSkinId();

    // Header (fixed, not affected by scroll)
    this._drawHeader(ctx);

    // Clip scrollable area (between header and back button)
    const clipTop = HEADER_H;
    const clipBottom = this._buttons.back.y - 4;
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, clipTop, SCREEN_WIDTH, clipBottom - clipTop);
    ctx.clip();

    // Apply scroll offset for cards
    ctx.save();
    ctx.translate(0, -this._scrollY);

    // Cards
    for (const card of this._skinCards) {
      // Skip cards that are completely off-screen (optimization)
      const cardScreenY = card.rect.y - this._scrollY;
      if (cardScreenY + card.rect.h < clipTop - 10 || cardScreenY > clipBottom + 10) continue;
      this._renderSkinCard(ctx, card, sm.isUnlocked(card.id), equippedId === card.id);
    }

    ctx.restore(); // scroll translate
    ctx.restore(); // clip

    // Back button (fixed at bottom, not affected by scroll)
    this._drawBackButton(ctx);

    // Toast (fixed position, not affected by scroll)
    this._drawToast(ctx);
  },

  // ---- Background ----
  _drawBackground(ctx) {
    // Gradient background
    const grad = ctx.createLinearGradient(0, 0, 0, SCREEN_HEIGHT);
    grad.addColorStop(0, C.BG_TOP);
    grad.addColorStop(1, C.BG_BOT);
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    // Subtle horizontal scan-lines
    ctx.globalAlpha = 0.03;
    ctx.fillStyle = '#FFFFFF';
    for (let sy = 0; sy < SCREEN_HEIGHT; sy += 4) {
      ctx.fillRect(0, sy, SCREEN_WIDTH, 1);
    }
    ctx.globalAlpha = 1;
  },

  // ---- Header ----
  _drawHeader(ctx) {
    // Accent line
    const lineGrad = ctx.createLinearGradient(0, 0, SCREEN_WIDTH, 0);
    lineGrad.addColorStop(0, 'transparent');
    lineGrad.addColorStop(0.3, C.HEADER_LINE);
    lineGrad.addColorStop(0.7, C.HEADER_LINE);
    lineGrad.addColorStop(1, 'transparent');
    ctx.fillStyle = lineGrad;
    ctx.fillRect(0, 0, SCREEN_WIDTH, 3);

    // Title
    ctx.fillStyle = C.GOLD;
    ctx.font = 'bold 20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const titleY = HEADER_H * 0.38;
    ctx.fillText(t('skin.title') || 'Tank Skins', SCREEN_WIDTH / 2, titleY);

    // Decorative dashes beside title
    const tw = ctx.measureText(t('skin.title') || 'Tank Skins').width;
    ctx.strokeStyle = C.GOLD_DIM;
    ctx.lineWidth = 1;
    ctx.globalAlpha = 0.5;
    const dashW = 30;
    const dashY = titleY;
    // left
    ctx.beginPath();
    ctx.moveTo(SCREEN_WIDTH / 2 - tw / 2 - 12, dashY);
    ctx.lineTo(SCREEN_WIDTH / 2 - tw / 2 - 12 - dashW, dashY);
    ctx.stroke();
    // right
    ctx.beginPath();
    ctx.moveTo(SCREEN_WIDTH / 2 + tw / 2 + 12, dashY);
    ctx.lineTo(SCREEN_WIDTH / 2 + tw / 2 + 12 + dashW, dashY);
    ctx.stroke();
    ctx.globalAlpha = 1;

    // Gold balance — pill badge
    const gold = GameGlobal.currencyManager ? GameGlobal.currencyManager.getGold() : 0;
    const goldText = `🪙 ${gold}`;
    ctx.font = 'bold 13px Arial';
    const gtw = ctx.measureText(goldText).width;
    const pillW = gtw + 20;
    const pillH = 22;
    const pillX = (SCREEN_WIDTH - pillW) / 2;
    const pillY = HEADER_H * 0.7 - pillH / 2;

    // Pill background
    ctx.fillStyle = 'rgba(255, 215, 0, 0.1)';
    ctx.strokeStyle = 'rgba(255, 215, 0, 0.35)';
    ctx.lineWidth = 1;
    this._roundRect(ctx, pillX, pillY, pillW, pillH, pillH / 2);
    ctx.fill();
    ctx.stroke();

    ctx.fillStyle = C.GOLD;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(goldText, SCREEN_WIDTH / 2, HEADER_H * 0.7);
  },

  // ---- Skin Card ----
  _renderSkinCard(ctx, card, isUnlocked, isEquipped) {
    const { rect } = card;
    const r = 10;

    // Card shadow
    ctx.fillStyle = 'rgba(0,0,0,0.3)';
    this._roundRect(ctx, rect.x + 2, rect.y + 2, rect.w, rect.h, r);
    ctx.fill();

    // Card background
    if (isEquipped) {
      ctx.fillStyle = C.CARD_EQUIPPED_BG;
      ctx.strokeStyle = C.CARD_EQUIPPED_BORDER;
      ctx.lineWidth = 2;
    } else if (isUnlocked) {
      ctx.fillStyle = C.CARD_BG;
      ctx.strokeStyle = C.CARD_BORDER;
      ctx.lineWidth = 1.5;
    } else {
      ctx.fillStyle = C.CARD_LOCKED_BG;
      ctx.strokeStyle = C.CARD_LOCKED_BORDER;
      ctx.lineWidth = 1;
    }

    this._roundRect(ctx, rect.x, rect.y, rect.w, rect.h, r);
    ctx.fill();
    ctx.stroke();

    // Equipped glow pulse
    if (isEquipped) {
      const pulse = 0.12 + Math.sin(this._animTimer * 3) * 0.08;
      ctx.save();
      ctx.shadowColor = C.GREEN;
      ctx.shadowBlur = 12;
      ctx.globalAlpha = pulse;
      ctx.strokeStyle = C.GREEN;
      ctx.lineWidth = 2;
      this._roundRect(ctx, rect.x, rect.y, rect.w, rect.h, r);
      ctx.stroke();
      ctx.restore();
    }

    const cx = rect.x + rect.w / 2;

    // Tank preview area — subtle dark circle backdrop
    const previewY = rect.y + 34;
    ctx.fillStyle = 'rgba(0,0,0,0.25)';
    ctx.beginPath();
    ctx.arc(cx, previewY, 20, 0, Math.PI * 2);
    ctx.fill();

    // Mini tank
    this._drawMiniTank(ctx, cx, previewY, card, isUnlocked);

    // Locked overlay icon
    if (!isUnlocked) {
      ctx.fillStyle = 'rgba(0,0,0,0.35)';
      ctx.beginPath();
      ctx.arc(cx, previewY, 20, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = C.TEXT_MUTED;
      ctx.font = '16px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText('🔒', cx, previewY);
    }

    // Skin name
    ctx.fillStyle = isUnlocked ? C.TEXT_PRIMARY : C.TEXT_SECONDARY;
    ctx.font = 'bold 12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(t(card.nameKey) || card.id, cx, rect.y + 62);

    // Status / price tag
    const tagY = rect.y + rect.h - 18;
    if (isEquipped) {
      // Green badge
      const badgeText = t('skin.equipped') || '✓ Equipped';
      ctx.font = 'bold 10px Arial';
      const bw = ctx.measureText(badgeText).width + 14;
      const bh = 18;
      const bx = cx - bw / 2;
      ctx.fillStyle = 'rgba(76, 175, 80, 0.2)';
      ctx.strokeStyle = C.GREEN;
      ctx.lineWidth = 1;
      this._roundRect(ctx, bx, tagY - bh / 2, bw, bh, bh / 2);
      ctx.fill();
      ctx.stroke();
      ctx.fillStyle = C.GREEN;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(badgeText, cx, tagY);
    } else if (isUnlocked) {
      ctx.fillStyle = C.TEXT_MUTED;
      ctx.font = '10px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(t('skin.owned') || 'Owned', cx, tagY);
    } else {
      // Price tag
      const canAfford = GameGlobal.currencyManager && GameGlobal.currencyManager.hasGold(card.cost);
      const priceText = `🪙 ${card.cost}`;
      ctx.font = 'bold 11px Arial';
      const pw = ctx.measureText(priceText).width + 14;
      const ph = 18;
      const px = cx - pw / 2;
      ctx.fillStyle = canAfford ? 'rgba(255, 215, 0, 0.12)' : 'rgba(255, 68, 68, 0.12)';
      ctx.strokeStyle = canAfford ? C.GOLD_DIM : C.RED;
      ctx.lineWidth = 1;
      this._roundRect(ctx, px, tagY - ph / 2, pw, ph, ph / 2);
      ctx.fill();
      ctx.stroke();
      ctx.fillStyle = canAfford ? C.GOLD : C.RED;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(priceText, cx, tagY);
    }
  },

  // ---- Mini Tank (dispatcher) ----
  // ★ Delegates to the shared TankSkinRenderer — SAME drawing code as the
  //   in-game Tank.render() path, so preview and battle look identical.
  _drawMiniTank(ctx, cx, cy, card, isUnlocked) {
    ctx.save();
    ctx.translate(cx, cy);
    if (!isUnlocked) ctx.globalAlpha = 0.35;

    drawTankSkin(ctx, card.id, card.colors, this._animTimer || 0);

    ctx.restore();
  },

  // ======== DEFAULT — Classic rounded tank ========
  _tankDefault(ctx, bc, tc, kc) {
    const s = 12;
    // Tracks
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 4, -s + 1, 4, s * 2 - 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s + 1, 4, s * 2 - 2, 2); ctx.fill();
    // Body
    ctx.fillStyle = bc;
    this._roundRect(ctx, -s, -s, s * 2, s * 2, 3); ctx.fill();
    // Highlight
    ctx.fillStyle = 'rgba(255,255,255,0.15)';
    ctx.fillRect(-s + 2, -s + 2, s - 2, 3);
    // Turret base
    ctx.fillStyle = tc;
    ctx.beginPath(); ctx.arc(0, 0, s * 0.4, 0, Math.PI * 2); ctx.fill();
    // Barrel
    ctx.fillStyle = tc;
    this._roundRect(ctx, -2.5, -s - 8, 5, s - 2, 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.2)';
    ctx.fillRect(-1.5, -s - 8, 3, 3);
  },

  // ======== ARCTIC — Ice-crystal armor with snowflake detail ========
  _tankArctic(ctx, bc, tc, kc) {
    const s = 12;
    // Wide icy tracks with tread marks
    ctx.fillStyle = kc;
    ctx.fillRect(-s - 5, -s, 5, s * 2);
    ctx.fillRect(s, -s, 5, s * 2);
    // Tread lines
    ctx.strokeStyle = 'rgba(255,255,255,0.25)';
    ctx.lineWidth = 0.8;
    for (let ty = -s + 3; ty < s; ty += 4) {
      ctx.beginPath(); ctx.moveTo(-s - 5, ty); ctx.lineTo(-s, ty); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(s, ty); ctx.lineTo(s + 5, ty); ctx.stroke();
    }
    // Body — hexagonal ice shape
    ctx.fillStyle = bc;
    ctx.beginPath();
    ctx.moveTo(0, -s - 2);
    ctx.lineTo(s - 1, -s + 4);
    ctx.lineTo(s - 1, s - 4);
    ctx.lineTo(0, s + 2);
    ctx.lineTo(-s + 1, s - 4);
    ctx.lineTo(-s + 1, -s + 4);
    ctx.closePath();
    ctx.fill();
    // Ice shimmer
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    ctx.beginPath();
    ctx.moveTo(-s + 3, -s + 4);
    ctx.lineTo(0, -s - 1);
    ctx.lineTo(2, -s + 5);
    ctx.closePath();
    ctx.fill();
    // Snowflake center detail (cross + diagonals)
    ctx.strokeStyle = 'rgba(255,255,255,0.5)';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(0, -4); ctx.lineTo(0, 4); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-4, 0); ctx.lineTo(4, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-3, -3); ctx.lineTo(3, 3); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(3, -3); ctx.lineTo(-3, 3); ctx.stroke();
    // Turret — diamond shape
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(0, -5); ctx.lineTo(5, 0); ctx.lineTo(0, 5); ctx.lineTo(-5, 0);
    ctx.closePath();
    ctx.fill();
    // Barrel — tapered
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(-3, -s + 3); ctx.lineTo(3, -s + 3);
    ctx.lineTo(2, -s - 9); ctx.lineTo(-2, -s - 9);
    ctx.closePath();
    ctx.fill();
    // Ice tip glow
    ctx.fillStyle = 'rgba(176,224,230,0.6)';
    ctx.beginPath(); ctx.arc(0, -s - 9, 2, 0, Math.PI * 2); ctx.fill();
  },

  // ======== INFERNO — Aggressive angular flame tank ========
  _tankInferno(ctx, bc, tc, kc) {
    const s = 12;
    // Spiked tracks
    ctx.fillStyle = kc;
    ctx.fillRect(-s - 4, -s, 4, s * 2);
    ctx.fillRect(s, -s, 4, s * 2);
    // Track spikes
    for (let ty = -s + 2; ty < s - 2; ty += 5) {
      ctx.fillStyle = kc;
      ctx.beginPath();
      ctx.moveTo(-s - 4, ty); ctx.lineTo(-s - 7, ty + 2.5); ctx.lineTo(-s - 4, ty + 5);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(s + 4, ty); ctx.lineTo(s + 7, ty + 2.5); ctx.lineTo(s + 4, ty + 5);
      ctx.fill();
    }
    // Body — angular/aggressive shape
    ctx.fillStyle = bc;
    ctx.beginPath();
    ctx.moveTo(-s + 2, -s - 1);
    ctx.lineTo(s - 2, -s - 1);
    ctx.lineTo(s + 1, -s + 4);
    ctx.lineTo(s + 1, s - 2);
    ctx.lineTo(s - 3, s + 1);
    ctx.lineTo(-s + 3, s + 1);
    ctx.lineTo(-s - 1, s - 2);
    ctx.lineTo(-s - 1, -s + 4);
    ctx.closePath();
    ctx.fill();
    // Flame stripes on body
    ctx.fillStyle = 'rgba(255,165,0,0.5)';
    ctx.beginPath();
    ctx.moveTo(-s + 3, s); ctx.lineTo(-s + 6, 0); ctx.lineTo(-s + 3, -2);
    ctx.lineTo(-s + 1, s - 2);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(s - 3, s); ctx.lineTo(s - 6, 0); ctx.lineTo(s - 3, -2);
    ctx.lineTo(s + 1, s - 2);
    ctx.closePath();
    ctx.fill();
    // Hot glow center
    ctx.fillStyle = 'rgba(255,69,0,0.3)';
    ctx.beginPath(); ctx.arc(0, 0, 5, 0, Math.PI * 2); ctx.fill();
    // Turret — angular pentagon
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(0, -5); ctx.lineTo(5, -2); ctx.lineTo(4, 4);
    ctx.lineTo(-4, 4); ctx.lineTo(-5, -2);
    ctx.closePath();
    ctx.fill();
    // Barrel — dual cannon
    ctx.fillStyle = tc;
    this._roundRect(ctx, -4, -s - 10, 3, s - 1, 1); ctx.fill();
    this._roundRect(ctx, 1, -s - 10, 3, s - 1, 1); ctx.fill();
    // Muzzle flash dots
    ctx.fillStyle = 'rgba(255,100,0,0.7)';
    ctx.beginPath(); ctx.arc(-2.5, -s - 10, 2, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(2.5, -s - 10, 2, 0, Math.PI * 2); ctx.fill();
  },

  // ======== PHANTOM — Ghostly translucent stealth tank ========
  _tankPhantom(ctx, bc, tc, kc) {
    const s = 12;
    const t = this._animTimer || 0;
    const flicker = 0.6 + Math.sin(t * 5) * 0.15;
    ctx.globalAlpha = ctx.globalAlpha * flicker;
    // Slim tracks
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 3, -s + 2, 3, s * 2 - 4, 1.5); ctx.fill();
    this._roundRect(ctx, s, -s + 2, 3, s * 2 - 4, 1.5); ctx.fill();
    // Body — sleek elliptical
    ctx.fillStyle = bc;
    ctx.beginPath();
    ctx.ellipse(0, 0, s - 1, s + 1, 0, 0, Math.PI * 2);
    ctx.fill();
    // Ghost aura rings
    ctx.strokeStyle = 'rgba(147,112,219,0.3)';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.ellipse(0, 0, s + 2, s + 4, 0, 0, Math.PI * 2); ctx.stroke();
    ctx.strokeStyle = 'rgba(147,112,219,0.15)';
    ctx.beginPath(); ctx.ellipse(0, 0, s + 5, s + 7, 0, 0, Math.PI * 2); ctx.stroke();
    // Inner glow
    ctx.fillStyle = 'rgba(200,180,255,0.2)';
    ctx.beginPath(); ctx.ellipse(0, -2, s * 0.5, s * 0.6, 0, 0, Math.PI * 2); ctx.fill();
    // Turret — crescent shape
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.arc(0, 0, 5, Math.PI * 0.2, Math.PI * 1.8);
    ctx.closePath();
    ctx.fill();
    // Barrel — thin and long
    ctx.fillStyle = tc;
    ctx.fillRect(-1.5, -s - 10, 3, s);
    // Phantom tip — glowing orb
    ctx.fillStyle = 'rgba(147,112,219,0.8)';
    ctx.beginPath(); ctx.arc(0, -s - 11, 2.5, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.4)';
    ctx.beginPath(); ctx.arc(0, -s - 11, 1, 0, Math.PI * 2); ctx.fill();
  },

  // ======== JUNGLE — Camo-patterned heavy tank with wide tracks ========
  _tankJungle(ctx, bc, tc, kc) {
    const s = 13;
    // Extra-wide tracks with tread pattern
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 6, -s, 6, s * 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s, 6, s * 2, 2); ctx.fill();
    // Tread chevrons
    ctx.strokeStyle = 'rgba(0,100,0,0.4)';
    ctx.lineWidth = 1;
    for (let ty = -s + 2; ty < s - 2; ty += 4) {
      ctx.beginPath(); ctx.moveTo(-s - 6, ty); ctx.lineTo(-s - 3, ty + 2); ctx.lineTo(-s - 6, ty + 4); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(s + 6, ty); ctx.lineTo(s + 3, ty + 2); ctx.lineTo(s + 6, ty + 4); ctx.stroke();
    }
    // Body — boxy heavy tank
    ctx.fillStyle = bc;
    this._roundRect(ctx, -s, -s, s * 2, s * 2, 2); ctx.fill();
    // Camo patches
    ctx.fillStyle = 'rgba(0,80,0,0.35)';
    ctx.beginPath(); ctx.arc(-4, -4, 5, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(34,60,20,0.3)';
    ctx.beginPath(); ctx.arc(5, 3, 4, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(0,50,0,0.25)';
    ctx.beginPath(); ctx.arc(-2, 6, 3.5, 0, Math.PI * 2); ctx.fill();
    // Leaf detail
    ctx.strokeStyle = 'rgba(0,100,0,0.4)';
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.moveTo(6, -8); ctx.quadraticCurveTo(10, -6, 7, -3); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(8, -7); ctx.quadraticCurveTo(11, -8, 9, -4); ctx.stroke();
    // Turret — square with rounded corners
    ctx.fillStyle = tc;
    this._roundRect(ctx, -5, -5, 10, 10, 3); ctx.fill();
    // Turret camo dot
    ctx.fillStyle = 'rgba(0,50,0,0.3)';
    ctx.beginPath(); ctx.arc(0, 0, 3, 0, Math.PI * 2); ctx.fill();
    // Barrel — thick and short
    ctx.fillStyle = tc;
    this._roundRect(ctx, -3, -s - 7, 6, s - 3, 2); ctx.fill();
    // Muzzle brake
    ctx.fillStyle = kc;
    ctx.fillRect(-4, -s - 7, 8, 2);
  },

  // ======== NEON — Glowing wireframe sci-fi tank ========
  _tankNeon(ctx, bc, tc, kc) {
    const s = 12;
    const t = this._animTimer || 0;
    const glow = 0.6 + Math.sin(t * 4) * 0.4;

    // Neon glow aura
    ctx.save();
    ctx.shadowColor = bc;
    ctx.shadowBlur = 8 * glow;

    // Tracks — glowing lines
    ctx.strokeStyle = kc;
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(-s - 3, -s); ctx.lineTo(-s - 3, s); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 3, -s); ctx.lineTo(s + 3, s); ctx.stroke();
    // Track end caps
    ctx.fillStyle = kc;
    ctx.beginPath(); ctx.arc(-s - 3, -s, 2, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(-s - 3, s, 2, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(s + 3, -s, 2, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(s + 3, s, 2, 0, Math.PI * 2); ctx.fill();

    // Body — wireframe rectangle with glow
    ctx.strokeStyle = bc;
    ctx.lineWidth = 1.5;
    ctx.strokeRect(-s, -s, s * 2, s * 2);
    // Diagonal cross wires
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.moveTo(-s, -s); ctx.lineTo(s, s); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s, -s); ctx.lineTo(-s, s); ctx.stroke();
    // Inner fill (very subtle)
    ctx.fillStyle = 'rgba(0,255,127,0.08)';
    ctx.fillRect(-s, -s, s * 2, s * 2);

    // Circuit lines
    ctx.strokeStyle = bc;
    ctx.lineWidth = 0.6;
    ctx.beginPath(); ctx.moveTo(-s, 0); ctx.lineTo(-3, 0); ctx.lineTo(-3, -5); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s, 0); ctx.lineTo(3, 0); ctx.lineTo(3, 5); ctx.stroke();

    // Turret — glowing ring
    ctx.strokeStyle = tc;
    ctx.lineWidth = 1.5;
    ctx.beginPath(); ctx.arc(0, 0, 5, 0, Math.PI * 2); ctx.stroke();
    // Center dot
    ctx.fillStyle = bc;
    ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill();

    // Barrel — energy beam line
    ctx.strokeStyle = tc;
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(0, -5); ctx.lineTo(0, -s - 10); ctx.stroke();
    // Barrel energy nodes
    ctx.fillStyle = bc;
    ctx.beginPath(); ctx.arc(0, -s - 2, 1.5, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(0, -s - 6, 1.5, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(0, -s - 10, 2.5, 0, Math.PI * 2); ctx.fill();

    ctx.restore();
  },

  // ======== NEBULA — Cosmic purple tank with starfield and magenta energy ========
  _tankNebula(ctx, bc, tc, kc) {
    const s = 12;
    const t = this._animTimer || 0;
    const pulse = 0.7 + Math.sin(t * 3) * 0.3;

    // Cosmic tracks with star dust
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 4, -s + 1, 4, s * 2 - 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s + 1, 4, s * 2 - 2, 2); ctx.fill();
    // Magenta trim on tracks
    ctx.strokeStyle = 'rgba(255,0,255,0.45)';
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.moveTo(-s - 4, -s + 1); ctx.lineTo(-s - 4, s - 1); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 4, -s + 1); ctx.lineTo(s + 4, s - 1); ctx.stroke();

    // Body — rounded cosmic hull
    ctx.fillStyle = bc;
    this._roundRect(ctx, -s, -s, s * 2, s * 2, 5); ctx.fill();

    // Nebula gradient overlay (top-left bright, bottom-right dark)
    ctx.fillStyle = 'rgba(180,0,255,0.15)';
    ctx.beginPath();
    ctx.moveTo(-s, -s); ctx.lineTo(s, -s); ctx.lineTo(-s, s);
    ctx.closePath();
    ctx.fill();

    // Starfield particles (twinkling)
    ctx.save();
    const stars = [
      { x: -7, y: -8, size: 1.2, phase: 0 },
      { x: 5, y: -6, size: 0.9, phase: 1.2 },
      { x: -4, y: 3, size: 1.0, phase: 2.4 },
      { x: 8, y: 5, size: 0.8, phase: 3.6 },
      { x: -2, y: -3, size: 1.1, phase: 4.8 },
      { x: 6, y: -1, size: 0.7, phase: 0.8 },
      { x: -8, y: 6, size: 0.9, phase: 2.0 },
      { x: 3, y: 7, size: 1.0, phase: 3.2 },
    ];
    for (const star of stars) {
      const twinkle = 0.4 + Math.sin(t * 5 + star.phase) * 0.6;
      ctx.globalAlpha = Math.max(0, twinkle);
      ctx.fillStyle = '#FFFFFF';
      ctx.beginPath();
      ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
      ctx.fill();
      // Star cross sparkle for larger stars
      if (star.size > 0.9 && twinkle > 0.7) {
        ctx.strokeStyle = 'rgba(255,255,255,0.5)';
        ctx.lineWidth = 0.4;
        ctx.beginPath(); ctx.moveTo(star.x - 2, star.y); ctx.lineTo(star.x + 2, star.y); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(star.x, star.y - 2); ctx.lineTo(star.x, star.y + 2); ctx.stroke();
      }
    }
    ctx.restore();

    // Cosmic swirl (subtle rotating nebula cloud)
    ctx.save();
    ctx.globalAlpha = 0.2;
    ctx.strokeStyle = '#FF00FF';
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (let a = 0; a < Math.PI * 4; a += 0.15) {
      const r = 2 + a * 1.2;
      const sx = Math.cos(a + t * 0.5) * r;
      const sy = Math.sin(a + t * 0.5) * r;
      if (a === 0) ctx.moveTo(sx, sy);
      else ctx.lineTo(sx, sy);
      if (r > s - 2) break;
    }
    ctx.stroke();
    ctx.restore();

    // Turret — glowing magenta orb
    ctx.save();
    ctx.shadowColor = '#FF00FF';
    ctx.shadowBlur = 6 * pulse;
    ctx.fillStyle = tc;
    ctx.beginPath(); ctx.arc(0, 0, 5.5, 0, Math.PI * 2); ctx.fill();
    ctx.restore();

    // Turret inner ring
    ctx.strokeStyle = 'rgba(255,255,255,0.3)';
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.arc(0, 0, 3.5, 0, Math.PI * 2); ctx.stroke();

    // Turret core — bright white-magenta
    ctx.fillStyle = `rgba(255,200,255,${0.5 + pulse * 0.3})`;
    ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.7)';
    ctx.beginPath(); ctx.arc(0, 0, 0.8, 0, Math.PI * 2); ctx.fill();

    // Barrel — cosmic energy beam
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(-3, -5); ctx.lineTo(3, -5);
    ctx.lineTo(2, -s - 9); ctx.lineTo(-2, -s - 9);
    ctx.closePath();
    ctx.fill();

    // Barrel energy rings
    ctx.strokeStyle = `rgba(255,0,255,${pulse * 0.6})`;
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(-3.5, -s); ctx.lineTo(3.5, -s); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-3, -s - 4); ctx.lineTo(3, -s - 4); ctx.stroke();

    // Barrel tip — bright cosmic flare
    ctx.save();
    ctx.shadowColor = '#FF00FF';
    ctx.shadowBlur = 8 * pulse;
    ctx.fillStyle = '#FF00FF';
    ctx.beginPath(); ctx.arc(0, -s - 9, 2.8, 0, Math.PI * 2); ctx.fill();
    ctx.restore();
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.beginPath(); ctx.arc(0, -s - 9, 1.2, 0, Math.PI * 2); ctx.fill();
  },

  // ======== ROYAL — Ornate golden tank with crown ========
  _tankRoyal(ctx, bc, tc, kc) {
    const s = 12;
    // Ornate tracks with gold trim
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 5, -s + 1, 5, s * 2 - 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s + 1, 5, s * 2 - 2, 2); ctx.fill();
    // Gold trim lines on tracks
    ctx.strokeStyle = 'rgba(255,215,0,0.5)';
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.moveTo(-s - 5, -s + 1); ctx.lineTo(-s - 5, s - 1); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 5, -s + 1); ctx.lineTo(s + 5, s - 1); ctx.stroke();

    // Body — rounded luxury shape
    ctx.fillStyle = bc;
    this._roundRect(ctx, -s, -s, s * 2, s * 2, 5); ctx.fill();

    // Royal emblem — shield shape in center
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(-4, -5);
    ctx.lineTo(4, -5);
    ctx.lineTo(4, 1);
    ctx.quadraticCurveTo(4, 5, 0, 7);
    ctx.quadraticCurveTo(-4, 5, -4, 1);
    ctx.closePath();
    ctx.fill();
    // Emblem inner
    ctx.fillStyle = 'rgba(255,215,0,0.6)';
    ctx.beginPath();
    ctx.moveTo(-2, -3);
    ctx.lineTo(2, -3);
    ctx.lineTo(2, 0);
    ctx.quadraticCurveTo(2, 3, 0, 4);
    ctx.quadraticCurveTo(-2, 3, -2, 0);
    ctx.closePath();
    ctx.fill();

    // Crown on top of turret
    ctx.fillStyle = '#FFD700';
    ctx.beginPath();
    ctx.moveTo(-6, -s + 2);
    ctx.lineTo(-5, -s - 2);
    ctx.lineTo(-3, -s + 1);
    ctx.lineTo(0, -s - 4);
    ctx.lineTo(3, -s + 1);
    ctx.lineTo(5, -s - 2);
    ctx.lineTo(6, -s + 2);
    ctx.closePath();
    ctx.fill();
    // Crown jewels
    ctx.fillStyle = '#FF0000';
    ctx.beginPath(); ctx.arc(0, -s - 2, 1.2, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = '#0066FF';
    ctx.beginPath(); ctx.arc(-4, -s, 0.8, 0, Math.PI * 2); ctx.fill();
    ctx.beginPath(); ctx.arc(4, -s, 0.8, 0, Math.PI * 2); ctx.fill();

    // Barrel — ornate with rings
    ctx.fillStyle = tc;
    this._roundRect(ctx, -2.5, -s - 10, 5, s - 4, 2); ctx.fill();
    // Barrel rings
    ctx.strokeStyle = '#FFD700';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(-3, -s - 3); ctx.lineTo(3, -s - 3); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-3, -s - 7); ctx.lineTo(3, -s - 7); ctx.stroke();
    // Royal tip
    ctx.fillStyle = '#FFD700';
    ctx.beginPath(); ctx.arc(0, -s - 10, 2.5, 0, Math.PI * 2); ctx.fill();
  },

  // ======== SAKURA — Elegant cherry-blossom tank with petal details ========
  _tankSakura(ctx, bc, tc, kc) {
    const s = 12;
    const t = this._animTimer || 0;

    // Soft rounded tracks with petal-pink trim
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 4, -s + 1, 4, s * 2 - 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s + 1, 4, s * 2 - 2, 2); ctx.fill();
    // Pink trim highlights
    ctx.strokeStyle = 'rgba(255,105,180,0.4)';
    ctx.lineWidth = 0.7;
    ctx.beginPath(); ctx.moveTo(-s - 4, -s + 1); ctx.lineTo(-s - 4, s - 1); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 4, -s + 1); ctx.lineTo(s + 4, s - 1); ctx.stroke();

    // Body — soft rounded rectangle
    ctx.fillStyle = bc;
    this._roundRect(ctx, -s, -s, s * 2, s * 2, 6); ctx.fill();

    // Petal shimmer overlay
    ctx.fillStyle = 'rgba(255,255,255,0.18)';
    ctx.beginPath();
    ctx.moveTo(-s + 2, -s);
    ctx.lineTo(s - 2, -s);
    ctx.lineTo(-s + 2, -s + 8);
    ctx.closePath();
    ctx.fill();

    // Floating cherry blossom petals (animated)
    ctx.save();
    ctx.globalAlpha = 0.6;
    const petals = [
      { ox: -6, oy: -7, phase: 0 },
      { ox: 7, oy: -4, phase: 1.5 },
      { ox: -3, oy: 6, phase: 3 },
      { ox: 5, oy: 5, phase: 4.5 },
    ];
    for (const p of petals) {
      const drift = Math.sin(t * 2 + p.phase) * 1.5;
      const px = p.ox + drift;
      const py = p.oy;
      ctx.fillStyle = '#FF69B4';
      ctx.beginPath();
      // 5-petal flower shape
      for (let i = 0; i < 5; i++) {
        const angle = (i / 5) * Math.PI * 2 - Math.PI / 2;
        const pr = 2.2;
        const fx = px + Math.cos(angle) * pr;
        const fy = py + Math.sin(angle) * pr;
        ctx.moveTo(fx, fy);
        ctx.arc(fx, fy, 1.2, 0, Math.PI * 2);
      }
      ctx.fill();
      // Flower center
      ctx.fillStyle = '#FFE4E1';
      ctx.beginPath(); ctx.arc(px, py, 0.8, 0, Math.PI * 2); ctx.fill();
    }
    ctx.restore();

    // Turret — circular with sakura emblem
    ctx.fillStyle = tc;
    ctx.beginPath(); ctx.arc(0, 0, 5.5, 0, Math.PI * 2); ctx.fill();
    // Inner petal ring
    ctx.strokeStyle = 'rgba(255,255,255,0.4)';
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.arc(0, 0, 3.5, 0, Math.PI * 2); ctx.stroke();
    // Center dot
    ctx.fillStyle = '#FFE4E1';
    ctx.beginPath(); ctx.arc(0, 0, 1.5, 0, Math.PI * 2); ctx.fill();

    // Barrel — elegant tapered with pink glow
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(-3, -5); ctx.lineTo(3, -5);
    ctx.lineTo(2, -s - 9); ctx.lineTo(-2, -s - 9);
    ctx.closePath();
    ctx.fill();
    // Barrel tip glow
    ctx.fillStyle = 'rgba(255,183,197,0.7)';
    ctx.beginPath(); ctx.arc(0, -s - 9, 2.5, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.beginPath(); ctx.arc(0, -s - 9, 1.2, 0, Math.PI * 2); ctx.fill();
  },

  // ======== THUNDER — Electric-blue lightning tank with arc effects ========
  _tankThunder(ctx, bc, tc, kc) {
    const s = 12;
    const t = this._animTimer || 0;
    const flash = 0.7 + Math.sin(t * 8) * 0.3;

    // Heavy electrified tracks
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 5, -s, 5, s * 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s, 5, s * 2, 2); ctx.fill();
    // Electric sparks on tracks
    ctx.save();
    ctx.globalAlpha = flash * 0.6;
    ctx.strokeStyle = '#00BFFF';
    ctx.lineWidth = 0.8;
    for (let ty = -s + 2; ty < s - 2; ty += 5) {
      // Left track spark
      ctx.beginPath();
      ctx.moveTo(-s - 5, ty);
      ctx.lineTo(-s - 3, ty + 1.5);
      ctx.lineTo(-s - 5, ty + 3);
      ctx.stroke();
      // Right track spark
      ctx.beginPath();
      ctx.moveTo(s + 5, ty);
      ctx.lineTo(s + 3, ty + 1.5);
      ctx.lineTo(s + 5, ty + 3);
      ctx.stroke();
    }
    ctx.restore();

    // Body — angular armored shape
    ctx.fillStyle = bc;
    ctx.beginPath();
    ctx.moveTo(-s + 1, -s - 2);
    ctx.lineTo(s - 1, -s - 2);
    ctx.lineTo(s + 2, -s + 3);
    ctx.lineTo(s + 2, s - 3);
    ctx.lineTo(s - 1, s + 2);
    ctx.lineTo(-s + 1, s + 2);
    ctx.lineTo(-s - 2, s - 3);
    ctx.lineTo(-s - 2, -s + 3);
    ctx.closePath();
    ctx.fill();

    // Lightning bolt emblem on body
    ctx.fillStyle = 'rgba(0,191,255,0.5)';
    ctx.beginPath();
    ctx.moveTo(-1, -7);
    ctx.lineTo(3, -7);
    ctx.lineTo(0, -1);
    ctx.lineTo(4, -1);
    ctx.lineTo(-2, 8);
    ctx.lineTo(0, 2);
    ctx.lineTo(-3, 2);
    ctx.closePath();
    ctx.fill();

    // Electric aura glow (pulsing)
    ctx.save();
    ctx.shadowColor = '#00BFFF';
    ctx.shadowBlur = 6 * flash;

    // Body edge glow
    ctx.strokeStyle = 'rgba(0,191,255,0.35)';
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(-s + 1, -s - 2);
    ctx.lineTo(s - 1, -s - 2);
    ctx.lineTo(s + 2, -s + 3);
    ctx.lineTo(s + 2, s - 3);
    ctx.lineTo(s - 1, s + 2);
    ctx.lineTo(-s + 1, s + 2);
    ctx.lineTo(-s - 2, s - 3);
    ctx.lineTo(-s - 2, -s + 3);
    ctx.closePath();
    ctx.stroke();

    // Turret — hexagonal with energy core
    ctx.fillStyle = tc;
    ctx.beginPath();
    for (let i = 0; i < 6; i++) {
      const angle = (i / 6) * Math.PI * 2 - Math.PI / 6;
      const hx = Math.cos(angle) * 5.5;
      const hy = Math.sin(angle) * 5.5;
      if (i === 0) ctx.moveTo(hx, hy);
      else ctx.lineTo(hx, hy);
    }
    ctx.closePath();
    ctx.fill();

    // Energy core (pulsing bright center)
    ctx.fillStyle = `rgba(0,191,255,${0.4 + flash * 0.3})`;
    ctx.beginPath(); ctx.arc(0, 0, 3, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = `rgba(255,255,255,${0.5 + flash * 0.3})`;
    ctx.beginPath(); ctx.arc(0, 0, 1.5, 0, Math.PI * 2); ctx.fill();

    // Barrel — energy cannon with lightning nodes
    ctx.fillStyle = tc;
    this._roundRect(ctx, -2.5, -s - 10, 5, s - 3, 2); ctx.fill();

    // Lightning arcs along barrel
    ctx.strokeStyle = `rgba(0,191,255,${flash * 0.8})`;
    ctx.lineWidth = 1;
    // Left arc
    ctx.beginPath();
    ctx.moveTo(-2.5, -s); ctx.lineTo(-5, -s - 3);
    ctx.lineTo(-2.5, -s - 5); ctx.lineTo(-5, -s - 8);
    ctx.stroke();
    // Right arc
    ctx.beginPath();
    ctx.moveTo(2.5, -s - 1); ctx.lineTo(5, -s - 4);
    ctx.lineTo(2.5, -s - 6); ctx.lineTo(5, -s - 9);
    ctx.stroke();

    // Barrel tip — bright energy ball
    ctx.fillStyle = '#00BFFF';
    ctx.beginPath(); ctx.arc(0, -s - 10, 3, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.beginPath(); ctx.arc(0, -s - 10, 1.5, 0, Math.PI * 2); ctx.fill();

    ctx.restore();
  },

  // ======== DIAMOND — Ultra-luxurious brilliant-cut crystalline tank ========
  // Design: Multi-layered prismatic facets with rainbow fire dispersion,
  // rotating spectral rays, breathing aurora glow, and diamond dust particles.
  // ======== DIAMOND 💎 — Elegant brilliant-cut gem tank ========
  // Inspired by the 💎 emoji: clean geometric facets, ice-blue tones,
  // gentle luxurious glow — NOT frantic flashing. Slow, elegant, premium.
  _tankDiamond(ctx, bc, tc, kc) {
    const s = 12;
    const t = this._animTimer || 0;
    // ★ All animation speeds deliberately slow for elegance
    const breathe = 0.5 + Math.sin(t * 0.8) * 0.5;        // very slow breathing (~8s cycle)
    const shimmer = 0.7 + Math.sin(t * 1.2) * 0.3;         // gentle shimmer (~5s cycle)
    const rotPhase = t * 0.15;                               // ultra-slow rotation

    // ── SOFT OUTER GLOW (subtle ice-blue aura) ──
    ctx.save();
    ctx.globalAlpha = 0.06 + breathe * 0.04;
    ctx.fillStyle = 'rgba(125, 249, 255, 0.2)';
    ctx.beginPath(); ctx.arc(0, -2, 20, 0, Math.PI * 2); ctx.fill();
    ctx.fillStyle = 'rgba(180, 220, 255, 0.15)';
    ctx.beginPath(); ctx.arc(0, -2, 16, 0, Math.PI * 2); ctx.fill();
    ctx.restore();

    // ── SLOW ROTATING PRISMATIC RAYS (very subtle, 6 rays) ──
    ctx.save();
    ctx.globalAlpha = 0.04 + breathe * 0.03;
    const rayColors = ['#FF9AA2', '#FFD6A5', '#CAFFBF', '#9BF6FF', '#BDB2FF', '#FFC6FF'];
    for (let i = 0; i < 6; i++) {
      const angle = rotPhase + (i / 6) * Math.PI * 2;
      const rayLen = 15 + Math.sin(t * 0.5 + i * 1.0) * 3;
      ctx.strokeStyle = rayColors[i];
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(Math.cos(angle) * 4, Math.sin(angle) * 4 - 2);
      ctx.lineTo(Math.cos(angle) * rayLen, Math.sin(angle) * rayLen - 2);
      ctx.stroke();
    }
    ctx.restore();

    // ── CRYSTAL TRACKS ──
    ctx.fillStyle = kc;
    this._roundRect(ctx, -s - 5, -s + 1, 5, s * 2 - 2, 2); ctx.fill();
    this._roundRect(ctx, s, -s + 1, 5, s * 2 - 2, 2); ctx.fill();
    // Gentle edge highlight (steady ice-blue, barely pulsing)
    ctx.strokeStyle = `rgba(125, 249, 255, ${0.25 + breathe * 0.1})`;
    ctx.lineWidth = 0.8;
    ctx.beginPath(); ctx.moveTo(-s - 5, -s + 1); ctx.lineTo(-s - 5, s - 1); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-s, -s + 1); ctx.lineTo(-s, s - 1); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 5, -s + 1); ctx.lineTo(s + 5, s - 1); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s, -s + 1); ctx.lineTo(s, s - 1); ctx.stroke();
    // Track crystal segments
    ctx.strokeStyle = 'rgba(255,255,255,0.12)';
    ctx.lineWidth = 0.5;
    for (let ty = -s + 4; ty < s - 2; ty += 4) {
      ctx.beginPath(); ctx.moveTo(-s - 5, ty); ctx.lineTo(-s, ty); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(s, ty); ctx.lineTo(s + 5, ty); ctx.stroke();
    }

    // ── BODY — 💎 Brilliant-cut gem shape (12-sided) ──
    ctx.fillStyle = bc;
    ctx.beginPath();
    ctx.moveTo(-s + 4, -s - 2);
    ctx.lineTo(s - 4, -s - 2);
    ctx.lineTo(s, -s + 2);
    ctx.lineTo(s + 2, -s + 6);
    ctx.lineTo(s + 2, s - 6);
    ctx.lineTo(s, s - 2);
    ctx.lineTo(s - 4, s + 2);
    ctx.lineTo(-s + 4, s + 2);
    ctx.lineTo(-s, s - 2);
    ctx.lineTo(-s - 2, s - 6);
    ctx.lineTo(-s - 2, -s + 6);
    ctx.lineTo(-s, -s + 2);
    ctx.closePath();
    ctx.fill();

    // ── FACET STRUCTURE (static crystal lines — no animation) ──
    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
    ctx.lineWidth = 0.5;
    // Girdle line
    ctx.beginPath(); ctx.moveTo(-s - 2, 0); ctx.lineTo(s + 2, 0); ctx.stroke();
    // Crown facets
    ctx.beginPath(); ctx.moveTo(-s + 4, -s - 2); ctx.lineTo(0, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s - 4, -s - 2); ctx.lineTo(0, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-s - 2, -s + 6); ctx.lineTo(0, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 2, -s + 6); ctx.lineTo(0, 0); ctx.stroke();
    // Pavilion facets
    ctx.beginPath(); ctx.moveTo(-s + 4, s + 2); ctx.lineTo(0, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s - 4, s + 2); ctx.lineTo(0, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-s - 2, s - 6); ctx.lineTo(0, 0); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s + 2, s - 6); ctx.lineTo(0, 0); ctx.stroke();
    // Secondary facets
    ctx.strokeStyle = 'rgba(255,255,255,0.08)';
    ctx.beginPath(); ctx.moveTo(-s, -s + 2); ctx.lineTo(0, -4); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s, -s + 2); ctx.lineTo(0, -4); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-s, s - 2); ctx.lineTo(0, 4); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(s, s - 2); ctx.lineTo(0, 4); ctx.stroke();

    // ── FACET COLOR FILLS (very slow spectral drift — like real diamond fire) ──
    ctx.save();
    const facetData = [
      { pts: [[-s + 4, -s - 2], [s - 4, -s - 2], [0, 0]], hueBase: 200 },
      { pts: [[-s + 4, -s - 2], [-s, -s + 2], [0, 0]], hueBase: 220 },
      { pts: [[s - 4, -s - 2], [s, -s + 2], [0, 0]], hueBase: 180 },
      { pts: [[-s, -s + 2], [-s - 2, -s + 6], [0, 0]], hueBase: 240 },
      { pts: [[s, -s + 2], [s + 2, -s + 6], [0, 0]], hueBase: 160 },
      { pts: [[-s + 4, s + 2], [s - 4, s + 2], [0, 0]], hueBase: 260 },
      { pts: [[-s + 4, s + 2], [-s, s - 2], [0, 0]], hueBase: 280 },
      { pts: [[s - 4, s + 2], [s, s - 2], [0, 0]], hueBase: 300 },
      { pts: [[-s, s - 2], [-s - 2, s - 6], [0, 0]], hueBase: 320 },
      { pts: [[s, s - 2], [s + 2, s - 6], [0, 0]], hueBase: 340 },
    ];
    for (const facet of facetData) {
      // ★ Very slow hue drift: t * 8 (was t * 40)
      const hue = (facet.hueBase + t * 8) % 360;
      // ★ Very slow alpha pulse: t * 0.6 (was t * 3)
      const facetAlpha = 0.05 + Math.sin(t * 0.6 + facet.hueBase * 0.01) * 0.03;
      ctx.globalAlpha = facetAlpha;
      ctx.fillStyle = `hsla(${hue}, 70%, 75%, 1)`;
      ctx.beginPath();
      ctx.moveTo(facet.pts[0][0], facet.pts[0][1]);
      ctx.lineTo(facet.pts[1][0], facet.pts[1][1]);
      ctx.lineTo(facet.pts[2][0], facet.pts[2][1]);
      ctx.closePath();
      ctx.fill();
    }
    ctx.restore();

    // ── TOP CROWN HIGHLIGHT (the "table" — gentle breathing) ──
    ctx.save();
    ctx.globalAlpha = 0.15 + breathe * 0.1;
    ctx.fillStyle = '#FFFFFF';
    ctx.beginPath();
    ctx.moveTo(-s + 4, -s - 2);
    ctx.lineTo(s - 4, -s - 2);
    ctx.lineTo(s * 0.3, -s * 0.3);
    ctx.lineTo(-s * 0.3, -s * 0.3);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    // ── DIAMOND DUST PARTICLES (slow, sparse twinkle) ──
    ctx.save();
    const dustParticles = [
      { x: -8, y: -9, size: 0.7, speed: 1.5, phase: 0 },
      { x: 9, y: -6, size: 0.5, speed: 1.2, phase: 1.5 },
      { x: -6, y: 7, size: 0.6, speed: 1.0, phase: 3.0 },
      { x: 7, y: 8, size: 0.5, speed: 1.3, phase: 4.5 },
      { x: -10, y: 0, size: 0.5, speed: 0.8, phase: 6.0 },
      { x: 10, y: -2, size: 0.6, speed: 1.1, phase: 2.0 },
    ];
    for (const d of dustParticles) {
      // ★ Slow twinkle with long visible duration
      const twinkle = Math.max(0, Math.sin(t * d.speed + d.phase));
      if (twinkle > 0.4) {
        ctx.globalAlpha = (twinkle - 0.4) * 1.2;
        ctx.fillStyle = '#FFFFFF';
        ctx.beginPath(); ctx.arc(d.x, d.y, d.size, 0, Math.PI * 2); ctx.fill();
      }
    }
    ctx.restore();

    // ── SPARKLE STARS (slow, elegant cross flares — only 4, staggered) ──
    ctx.save();
    const flares = [
      { x: -5, y: -7, phase: 0, len: 2.5 },
      { x: 7, y: -4, phase: 2.5, len: 2 },
      { x: -3, y: 6, phase: 5.0, len: 2.2 },
      { x: 6, y: 5, phase: 7.5, len: 1.8 },
    ];
    for (const fl of flares) {
      // ★ Very slow twinkle: t * 0.8 (was t * 4)
      const twinkle = Math.max(0, Math.sin(t * 0.8 + fl.phase));
      if (twinkle > 0.6) {
        const alpha = (twinkle - 0.6) * 2.5;
        const color = `rgba(200, 240, 255, ${alpha * 0.8})`;
        ctx.strokeStyle = color;
        ctx.fillStyle = color;
        ctx.lineWidth = 0.5;
        // 4-point star cross
        ctx.beginPath(); ctx.moveTo(fl.x - fl.len, fl.y); ctx.lineTo(fl.x + fl.len, fl.y); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(fl.x, fl.y - fl.len); ctx.lineTo(fl.x, fl.y + fl.len); ctx.stroke();
        // Center dot
        ctx.beginPath(); ctx.arc(fl.x, fl.y, 0.6, 0, Math.PI * 2); ctx.fill();
      }
    }
    ctx.restore();

    // ── BODY EDGE GLOW (gentle ice-blue border) ──
    ctx.save();
    ctx.shadowColor = '#7DF9FF';
    ctx.shadowBlur = 6 + breathe * 4;
    ctx.strokeStyle = `rgba(125, 249, 255, ${0.2 + breathe * 0.15})`;
    ctx.lineWidth = 1.2;
    ctx.beginPath();
    ctx.moveTo(-s + 4, -s - 2); ctx.lineTo(s - 4, -s - 2);
    ctx.lineTo(s, -s + 2); ctx.lineTo(s + 2, -s + 6);
    ctx.lineTo(s + 2, s - 6); ctx.lineTo(s, s - 2);
    ctx.lineTo(s - 4, s + 2); ctx.lineTo(-s + 4, s + 2);
    ctx.lineTo(-s, s - 2); ctx.lineTo(-s - 2, s - 6);
    ctx.lineTo(-s - 2, -s + 6); ctx.lineTo(-s, -s + 2);
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
    // Inner crisp edge
    ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 + shimmer * 0.05})`;
    ctx.lineWidth = 0.4;
    ctx.beginPath();
    ctx.moveTo(-s + 4, -s - 2); ctx.lineTo(s - 4, -s - 2);
    ctx.lineTo(s, -s + 2); ctx.lineTo(s + 2, -s + 6);
    ctx.lineTo(s + 2, s - 6); ctx.lineTo(s, s - 2);
    ctx.lineTo(s - 4, s + 2); ctx.lineTo(-s + 4, s + 2);
    ctx.lineTo(-s, s - 2); ctx.lineTo(-s - 2, s - 6);
    ctx.lineTo(-s - 2, -s + 6); ctx.lineTo(-s, -s + 2);
    ctx.closePath();
    ctx.stroke();

    // ── TURRET — 💎 Gem top view (10-pointed star) ──
    ctx.save();
    ctx.shadowColor = '#7DF9FF';
    ctx.shadowBlur = 5 + breathe * 3;
    ctx.fillStyle = tc;
    ctx.beginPath();
    for (let i = 0; i < 10; i++) {
      const angle = (i / 10) * Math.PI * 2 - Math.PI / 2;
      const r = i % 2 === 0 ? 7 : 4;
      const hx = Math.cos(angle) * r;
      const hy = Math.sin(angle) * r;
      if (i === 0) ctx.moveTo(hx, hy);
      else ctx.lineTo(hx, hy);
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    // Turret facet lines
    ctx.strokeStyle = 'rgba(255,255,255,0.25)';
    ctx.lineWidth = 0.4;
    for (let i = 0; i < 10; i += 2) {
      const angle = (i / 10) * Math.PI * 2 - Math.PI / 2;
      const hx = Math.cos(angle) * 7;
      const hy = Math.sin(angle) * 7;
      ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(hx, hy); ctx.stroke();
    }

    // Turret edge — gentle ice-blue tint (steady, not rainbow)
    ctx.save();
    ctx.strokeStyle = `rgba(125, 249, 255, ${0.2 + breathe * 0.1})`;
    ctx.lineWidth = 1;
    ctx.beginPath();
    for (let i = 0; i < 10; i++) {
      const angle = (i / 10) * Math.PI * 2 - Math.PI / 2;
      const r = i % 2 === 0 ? 7 : 4;
      const hx = Math.cos(angle) * r;
      const hy = Math.sin(angle) * r;
      if (i === 0) ctx.moveTo(hx, hy);
      else ctx.lineTo(hx, hy);
    }
    ctx.closePath();
    ctx.stroke();
    ctx.restore();

    // Turret center — white core
    ctx.save();
    ctx.shadowColor = '#FFFFFF';
    ctx.shadowBlur = 4 + breathe * 2;
    ctx.fillStyle = `rgba(255,255,255,${0.5 + breathe * 0.2})`;
    ctx.beginPath(); ctx.arc(0, 0, 2.5, 0, Math.PI * 2); ctx.fill();
    ctx.restore();
    ctx.fillStyle = '#FFFFFF';
    ctx.beginPath(); ctx.arc(0, 0, 1.2, 0, Math.PI * 2); ctx.fill();

    // ── BARREL — Clean crystalline cannon ──
    ctx.fillStyle = tc;
    ctx.beginPath();
    ctx.moveTo(-3.5, -7); ctx.lineTo(3.5, -7);
    ctx.lineTo(2.5, -s - 11); ctx.lineTo(-2.5, -s - 11);
    ctx.closePath();
    ctx.fill();

    // Barrel center line
    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
    ctx.lineWidth = 0.5;
    ctx.beginPath(); ctx.moveTo(0, -7); ctx.lineTo(0, -s - 11); ctx.stroke();

    // Barrel rings (steady ice-blue, gentle pulse)
    const ringPositions = [-s + 1, -s - 3, -s - 7];
    for (let ri = 0; ri < ringPositions.length; ri++) {
      const ry = ringPositions[ri];
      // ★ Slow pulse: t * 1.0 (was t * 5)
      const ringAlpha = 0.3 + Math.sin(t * 1.0 + ri * 2.0) * 0.15;
      ctx.strokeStyle = `rgba(125, 249, 255, ${ringAlpha})`;
      ctx.lineWidth = 1;
      const halfW = 3.5 - ri * 0.3;
      ctx.beginPath(); ctx.moveTo(-halfW, ry); ctx.lineTo(halfW, ry); ctx.stroke();
    }

    // ── BARREL TIP — 💎 Diamond shape muzzle ──
    ctx.save();
    ctx.shadowColor = '#7DF9FF';
    ctx.shadowBlur = 8 + breathe * 4;
    ctx.fillStyle = `rgba(125, 249, 255, ${0.6 + breathe * 0.2})`;
    ctx.beginPath();
    ctx.moveTo(0, -s - 15); ctx.lineTo(4, -s - 11);
    ctx.lineTo(0, -s - 7); ctx.lineTo(-4, -s - 11);
    ctx.closePath();
    ctx.fill();
    ctx.restore();

    // Tip facet lines
    ctx.strokeStyle = 'rgba(255,255,255,0.35)';
    ctx.lineWidth = 0.4;
    ctx.beginPath(); ctx.moveTo(0, -s - 15); ctx.lineTo(0, -s - 7); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(-4, -s - 11); ctx.lineTo(4, -s - 11); ctx.stroke();

    // Tip center — white core
    ctx.save();
    ctx.shadowColor = '#FFFFFF';
    ctx.shadowBlur = 4 + shimmer * 2;
    ctx.fillStyle = '#FFFFFF';
    ctx.beginPath(); ctx.arc(0, -s - 11, 1.2, 0, Math.PI * 2); ctx.fill();
    ctx.restore();

    // ── SUBTLE SPECTRAL BEAMS from tip (very faint) ──
    ctx.save();
    ctx.globalAlpha = 0.06 + breathe * 0.04;
    const beamColors = ['#FF9AA2', '#CAFFBF', '#9BF6FF', '#BDB2FF', '#FFC6FF'];
    for (let bi = 0; bi < beamColors.length; bi++) {
      const spread = (bi - 2) * 2;
      ctx.strokeStyle = beamColors[bi];
      ctx.lineWidth = 0.6;
      ctx.beginPath();
      ctx.moveTo(0, -s - 15);
      ctx.lineTo(spread, -s - 19);
      ctx.stroke();
    }
    ctx.restore();
  },

  // ---- Back Button ----
  _drawBackButton(ctx) {
    const btn = this._buttons.back;
    if (!btn) return;

    const r = btn.h / 2;

    // Shadow
    ctx.fillStyle = 'rgba(0,0,0,0.3)';
    this._roundRect(ctx, btn.x + 1, btn.y + 2, btn.w, btn.h, r);
    ctx.fill();

    // Button body
    ctx.fillStyle = C.BACK_BTN;
    ctx.strokeStyle = C.BACK_BTN_BORDER;
    ctx.lineWidth = 1.5;
    this._roundRect(ctx, btn.x, btn.y, btn.w, btn.h, r);
    ctx.fill();
    ctx.stroke();

    // Label
    ctx.fillStyle = C.TEXT_SECONDARY;
    ctx.font = 'bold 13px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(
      t('common.back') || '← Back',
      btn.x + btn.w / 2,
      btn.y + btn.h / 2
    );
  },

  // ---- Toast ----
  _drawToast(ctx) {
    if (!this._message) return;

    // Fade calculation
    const alpha = Math.min(1, this._messageTimer / 0.3);
    ctx.globalAlpha = alpha;

    const msgW = 200;
    const msgH = 32;
    const msgX = (SCREEN_WIDTH - msgW) / 2;
    const msgY = SCREEN_HEIGHT * 0.9;

    // Toast background
    ctx.fillStyle = C.TOAST_BG;
    this._roundRect(ctx, msgX, msgY, msgW, msgH, msgH / 2);
    ctx.fill();

    // Toast border
    ctx.strokeStyle = 'rgba(255,255,255,0.1)';
    ctx.lineWidth = 1;
    this._roundRect(ctx, msgX, msgY, msgW, msgH, msgH / 2);
    ctx.stroke();

    // Toast text
    ctx.fillStyle = '#FFFFFF';
    ctx.font = '12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(this._message, SCREEN_WIDTH / 2, msgY + msgH / 2);

    ctx.globalAlpha = 1;
  },

  // ---- Utility: Rounded Rect ----
  _roundRect(ctx, x, y, w, h, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.arcTo(x + w, y, x + w, y + r, r);
    ctx.lineTo(x + w, y + h - r);
    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
    ctx.lineTo(x + r, y + h);
    ctx.arcTo(x, y + h, x, y + h - r, r);
    ctx.lineTo(x, y + r);
    ctx.arcTo(x, y, x + r, y, r);
    ctx.closePath();
  },

  // ============================================================
  // Touch
  // ============================================================
  _hitTest(tx, ty, rect) {
    if (!rect) return false;
    return tx >= rect.x && tx <= rect.x + rect.w && ty >= rect.y && ty <= rect.y + rect.h;
  },

  _showMessage(msg) {
    this._message = msg;
    this._messageTimer = 2;
  },

  handleTouch(eventType, e) {
    const sm = GameGlobal.skinManager;
    if (!sm) return;

    if (eventType === 'touchstart') {
      const touch = e.touches[0];
      this._touchStartY = touch.clientY;
      this._touchLastY = touch.clientY;
      this._isDragging = false;
      this._scrollVelocity = 0;
      this._touchStartTime = Date.now();
      return;
    }

    if (eventType === 'touchmove') {
      const touch = e.touches[0];
      const dy = this._touchLastY - touch.clientY;
      const totalDy = Math.abs(touch.clientY - this._touchStartY);

      // Start dragging if moved more than 5px
      if (totalDy > 5) {
        this._isDragging = true;
      }

      if (this._isDragging) {
        this._scrollY += dy;
        // Clamp with elastic overscroll feel
        if (this._scrollY < 0) this._scrollY = 0;
        if (this._scrollY > this._maxScrollY) this._scrollY = this._maxScrollY;

        // Track velocity for inertia
        const now = Date.now();
        const elapsed = now - (this._touchMoveTime || now);
        if (elapsed > 0) {
          this._scrollVelocity = (dy / elapsed) * 1000; // px per second
        }
        this._touchMoveTime = now;
      }

      this._touchLastY = touch.clientY;
      return;
    }

    if (eventType === 'touchend') {
      // If was dragging, just release with inertia
      if (this._isDragging) {
        this._isDragging = false;
        // Velocity is already set from touchmove
        return;
      }

      // Not dragging — treat as tap
      this._isDragging = false;
      const touch = e.changedTouches[0];
      const tx = touch.clientX;
      const rawTy = touch.clientY;

      // Back button uses screen coordinates (fixed position)
      if (this._hitTest(tx, rawTy, this._buttons.back)) {
        GameGlobal.sceneManager.switchTo(SCENE.MENU);
        return;
      }

      // Adjust tap Y by scroll offset for scrollable content
      const ty = rawTy + this._scrollY;

      // Check skin cards
      for (const card of this._skinCards) {
        if (this._hitTest(tx, ty, card.rect)) {
          if (sm.isUnlocked(card.id)) {
            // Equip
            if (sm.getEquippedSkinId() !== card.id) {
              const result = sm.equipSkin(card.id);
              if (result.success) {
                this._showMessage(t('skin.equipSuccess') || '✓ Skin equipped!');
              }
            }
          } else {
            // Purchase
            const result = sm.purchaseSkin(card.id);
            if (result.success) {
              this._showMessage(t('skin.purchaseSuccess') || '✓ Skin unlocked!');
              sm.equipSkin(card.id);
            } else if (result.error === 'Insufficient gold') {
              this._showMessage(t('currency.insufficient') || 'Insufficient Gold');
            }
          }
          return;
        }
      }
    }
  },
};

module.exports = SkinScene;