let trail = [];
let velocities = [];
let particles = [];
let flashAlpha = 0;
let score = 0;
let bgBlue = 0;


let beachImg;
let moanaFont;
let beachSound, sliceSound;

let charFrames = [];
let slotChars = new Array(10).fill(-1);
let slotOffsets = new Array(10).fill(0);
const ANI_FPS = 18;

const CHAR_SCALES = [0.9, 1.5, 1.2, 1.5, 1.5, 1.5, 1.5];

let charOrder = [];
let charOrderIdx = 0;

// ====== GAME STATE ======
let gameState = 'name'; // 'name' | 'intro' | 'playing' | 'departure'
let playerName = '';
let nameInput, nameConfirmBtn;
const COCONUT_TIME_MS = 5000;
let coconutTimerEnd = 0;   // millis() when current coconut expires
let slotPowers = [];       // 0–100, speed bonus per slot

let coconut = {
  x: 0, y: 0,
  r: 0,
  state: 0,
  slices: 0,
  shakeX: 0, shakeY: 0,
  shakeTimer: 0,
  baseAngle: 0,
  flying: false,
  flyVX: 0, flyVY: 0,
  flyAlpha: 255,
  flyRotation: 0, flyRotSpeed: 0,
  entering: false,
  enterT: 0,
  enterFromX: 0, enterFromY: 0
};

let coconutImgs = [];
let flyingKakamoraList = [];
let knifeImg;
let effectImgs = [];
let imgParticles = [];
let slashLingerAlpha = 0;
let lingerTrail = [];
let lingerVelocities = [];

// ====== PRELOAD ======
function preload() {
  for (let i = 0; i < 5; i++) {
    coconutImgs[i] = loadImage(`assets/coconut/coconut_${i}.png`);
  }

  // char1
  charFrames[0] = [];
  for (let i = 1; i <= 5; i++) charFrames[0].push(loadImage(`assets/kakamora-characters/char1/co_ani_${i}.png`));
  // char2–7: Frame N.png
  const charRanges = [[6,10],[11,15],[16,21],[22,26],[27,31],[32,36]];
  for (let c = 0; c < charRanges.length; c++) {
    let [start, end] = charRanges[c];
    charFrames[c + 1] = [];
    for (let n = start; n <= end; n++) charFrames[c + 1].push(loadImage(`assets/kakamora-characters/char${c + 2}/Frame ${n}.png`));
  }

  beachImg  = loadImage('assets/beach.png');
  moanaFont = loadFont('assets/fonts/Moanas.ttf');
  knifeImg  = loadImage('assets/knife.png');
  for (let i = 0; i < 3; i++) effectImgs.push(loadImage(`assets/effect/particles${i}.png`));

}

// ====== SETUP ======
function setup() {
  createCanvas(windowWidth, windowHeight);
  resetCoconutHome();

  world.gravity.y = 0;
  shuffleCharOrder();

  beachSound = new Howl({
    src: ['assets/sound/beach%20sound.wav'],
    loop: true,
    volume: 0.45,
    fade: true
  });
  sliceSound = new Howl({
    src: ['assets/sound/slice.wav'],
    volume: 0.75
  });

  // HTML name input
  nameInput = createInput('');
  nameInput.attribute('placeholder', 'Enter your name...');
  nameInput.attribute('maxlength', '16');
  nameInput.style('font-size', '18px');
  nameInput.style('font-family', 'Google Sans, Nunito, sans-serif');
  nameInput.style('background', 'rgba(14, 20, 36, 0.92)');
  nameInput.style('color', '#e8f4ff');
  nameInput.style('border', '2px solid rgba(90, 185, 255, 0.55)');
  nameInput.style('border-radius', '2px');
  nameInput.style('padding', '10px 16px');
  nameInput.style('width', '260px');
  nameInput.style('outline', 'none');
  nameInput.style('letter-spacing', '1px');
  nameInput.style('position', 'absolute');
  nameInput.elt.addEventListener('keydown', e => { if (e.key === 'Enter') confirmName(); });

  nameConfirmBtn = createButton('CONFIRM');
  nameConfirmBtn.style('font-size', '16px');
  nameConfirmBtn.style('font-family', 'Google Sans, Nunito, sans-serif');
  nameConfirmBtn.style('font-weight', '700');
  nameConfirmBtn.style('letter-spacing', '2px');
  nameConfirmBtn.style('background', 'rgba(18, 80, 150, 0.95)');
  nameConfirmBtn.style('color', '#cce8ff');
  nameConfirmBtn.style('border', '2px solid rgba(90, 185, 255, 0.7)');
  nameConfirmBtn.style('border-radius', '2px');
  nameConfirmBtn.style('padding', '10px 36px');
  nameConfirmBtn.style('cursor', 'pointer');
  nameConfirmBtn.style('position', 'absolute');
  nameConfirmBtn.mousePressed(confirmName);

  positionNameUI();
}

function positionNameUI() {
  let pw = min(windowWidth * 0.5, 440);
  let ph = 240;
  let px = (windowWidth - pw) / 2;
  let py = (windowHeight - ph) / 2;
  let inputW = pw * 0.65;
  let inputX = px + (pw - inputW) / 2;
  nameInput.position(inputX, py + 104);
  nameInput.style('width', inputW + 'px');
  nameConfirmBtn.position(px + pw / 2 - 80, py + 164);
}

function shuffleCharOrder() {
  charOrder = [0, 1, 2, 3, 4, 5, 6];
  for (let i = charOrder.length - 1; i > 0; i--) {
    let j = floor(random(i + 1));
    [charOrder[i], charOrder[j]] = [charOrder[j], charOrder[i]];
  }
  charOrderIdx = 0;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  resetCoconutHome();
  if (gameState === 'name') positionNameUI();
}


function resetCoconutHome() {
  coconut.r = min(windowWidth, windowHeight) * 0.13;
  coconut.x = width / 2;
  coconut.y = height * 0.42;
}

// ====== DRAW ======
function draw() {
  imageMode(CORNER);
  image(beachImg, 0, 0, width, height);
  if (bgBlue > 0) {
    fill(25, 90, 200, bgBlue * 0.4);
    noStroke();
    rect(0, 0, width, height);
    bgBlue = max(0, bgBlue - 4);
  }

  if (gameState === 'name') { drawNameEntry(); return; }

  if (gameState === 'playing') {
    checkCoconutTimer();
    updateShake();
    updateEnter();
    updateFlyAway();
    drawCoconut();
    drawCoconutTimer();
    drawTrail();
    updateImgParticles();
    drawImgParticles();
  }

  drawParticles();
  drawFlash();
  if (gameState !== 'intro' && gameState !== 'name') {
    drawKakamoraSlots();
    updateFlyingKakamoraList();
    drawFlyingKakamoraList();
  }

  if (gameState === 'intro')     drawIntroQuest();
  if (gameState === 'departure') drawDepartureQuest();
}


// ====== COCONUT ======
function drawCoconut() {
  imageMode(CENTER);
  if (coconut.flying) {
    push();
    translate(coconut.x, coconut.y);
    rotate(coconut.flyRotation);
    tint(255, coconut.flyAlpha);
    image(coconutImgs[coconut.state], 0, 0, coconut.r * 2, coconut.r * 2);
    noTint();
    pop();
  } else {
    let alpha = coconut.entering ? lerp(40, 255, min(coconut.enterT * 1.8, 1)) : 255;
    tint(255, alpha);
    push();
    translate(coconut.x + coconut.shakeX, coconut.y + coconut.shakeY);
    rotate(coconut.baseAngle);
    imageMode(CENTER);
    image(coconutImgs[coconut.state], 0, 0, coconut.r * 2, coconut.r * 2);
    pop();
    noTint();
  }
}

function updateEnter() {
  if (!coconut.entering) return;
  coconut.enterT += 0.038;
  let ease = 1 - pow(1 - min(coconut.enterT, 1), 3);
  coconut.x = lerp(coconut.enterFromX, width / 2, ease);
  coconut.y = lerp(coconut.enterFromY, height * 0.42, ease);
  if (coconut.enterT >= 1) {
    coconut.entering = false;
    coconut.x = width / 2;
    coconut.y = height * 0.42;
  }
}

function startCoconutEntrance() {
  coconut.entering = true;
  coconut.enterT = 0;
  coconut.enterFromX = width - 100;
  coconut.enterFromY = 100;
  coconut.x = width - 100;
  coconut.y = 100;
  coconut.baseAngle = random(TWO_PI);
}

function updateShake() {
  if (coconut.shakeTimer > 0) {
    coconut.shakeX = sin(coconut.shakeTimer * 2.4) * coconut.shakeTimer * 0.7;
    coconut.shakeY = cos(coconut.shakeTimer * 3.1) * coconut.shakeTimer * 0.4;
    coconut.shakeTimer--;
  } else {
    coconut.shakeX = 0;
    coconut.shakeY = 0;
  }
}

function updateFlyAway() {
  if (!coconut.flying) return;

  coconut.x += coconut.flyVX;
  coconut.y += coconut.flyVY;
  coconut.flyVY += 0.55;
  coconut.flyRotation += coconut.flyRotSpeed;
  coconut.flyAlpha -= 7;

  if (coconut.flyAlpha <= 0 || coconut.y > height + 100) {
    if (score < 10) launchKakamoraToSlot(score);
    score++;
    coconut.state = 0;
    coconut.slices = 0;
    coconut.flying = false;
    coconut.flyAlpha = 255;
    coconut.flyRotation = 0;
    coconut.shakeX = 0;
    coconut.shakeY = 0;
    coconut.shakeTimer = 0;
    coconutTimerEnd = millis() + COCONUT_TIME_MS;

    if (score >= 7 && gameState === 'playing') {
      gameState = 'departure';
    } else {
      startCoconutEntrance();
    }
  }
}

// ====== TRAIL INPUT ======
function mouseDragged() {
  if (gameState !== 'playing') return;
  let pos = createVector(mouseX, mouseY);
  trail.push(pos);

  let dx = 0, dy = 0;
  if (trail.length > 1) {
    let prev = trail[trail.length - 2];
    dx = pos.x - prev.x;
    dy = pos.y - prev.y;
    velocities.push(sqrt(dx * dx + dy * dy));
  } else {
    velocities.push(0);
  }

  if (dist(mouseX, mouseY, coconut.x, coconut.y) < coconut.r && !coconut.flying) {
    spawnParticles(mouseX, mouseY);
    spawnImgParticles(mouseX, mouseY, dx, dy);
    coconut.shakeTimer = max(coconut.shakeTimer, 18);
  }

  if (trail.length > 22) trail.shift();
  if (velocities.length > 22) velocities.shift();
}

function mouseReleased() {
  if (gameState !== 'playing') { trail = []; velocities = []; return; }

  let hits = trail.filter(p => dist(p.x, p.y, coconut.x, coconut.y) < coconut.r).length;

  if (hits >= 2 && !coconut.flying) {
    sliceSound.play();
    coconut.slices++;
    coconut.state = floor(coconut.slices / 2);
    flashAlpha = 25;
    if (coconut.slices >= 8) {
      let power = floor(max(0, (coconutTimerEnd - millis()) / COCONUT_TIME_MS) * 100);
      slotPowers[score] = power;
      coconut.flying = true;
      coconut.flyVX = random([-1, 1]) * random(3, 6);
      coconut.flyVY = random(-6, -2);
      coconut.flyRotSpeed = random() > 0.5 ? random(0.07, 0.13) : random(-0.13, -0.07);
      bgBlue = 255;
    }
  }

  // linger the slash line briefly
  lingerTrail = trail.slice();
  lingerVelocities = velocities.slice();
  slashLingerAlpha = 255;
  trail = [];
  velocities = [];
}

// ====== TRAIL DRAW ======
function drawSlashSegments(pts, vels, masterAlpha) {
  if (pts.length < 2) return;
  noFill();
  for (let i = 1; i < pts.length; i++) {
    let t = i / pts.length; // 0=tail, 1=head
    let speed = vels[i] || 0;
    let a = t * masterAlpha;

    // Outer glow
    strokeWeight(map(speed, 0, 40, 6, 22));
    stroke(255, 240, 180, a * 0.18);
    line(pts[i-1].x, pts[i-1].y, pts[i].x, pts[i].y);

    // Mid glow
    strokeWeight(map(speed, 0, 40, 3, 12));
    stroke(255, 255, 220, a * 0.45);
    line(pts[i-1].x, pts[i-1].y, pts[i].x, pts[i].y);

    // Sharp core
    strokeWeight(map(speed, 0, 40, 1, 4));
    stroke(255, 255, 255, a);
    line(pts[i-1].x, pts[i-1].y, pts[i].x, pts[i].y);
  }
  noStroke();
}

function drawTrail() {
  drawSlashSegments(trail, velocities, 255);

  // Linger fade after release
  if (slashLingerAlpha > 0) {
    drawSlashSegments(lingerTrail, lingerVelocities, slashLingerAlpha);
    slashLingerAlpha -= 28;
    if (slashLingerAlpha <= 0) { lingerTrail = []; lingerVelocities = []; }
  }
}



// ====== SLOT LAYOUT (horizontal top-left) ======
const S_MARGIN = 14;
const S_HDRH   = 30;
const S_PAD    = 12;
const S_GAP    = 10;

function getSlotSize() {
  // fit 7 slots between left margin and timer area (right ~220px)
  let available = width - S_MARGIN * 2 - S_PAD * 2 - 6 * S_GAP - 220;
  return constrain(floor(available / 7), 60, 92);
}

function getSlotPos(i) {
  let sz = getSlotSize();
  return {
    x: S_MARGIN + S_PAD + sz / 2 + i * (sz + S_GAP),
    y: S_MARGIN + S_HDRH + S_PAD + sz / 2,
    size: sz
  };
}

// ====== KAKAMORA SLOTS ======
function drawKakamoraSlots() {
  let sz     = getSlotSize();
  let panelW = S_PAD * 2 + 7 * sz + 6 * S_GAP;
  let pwrH   = 20;
  let panelH = S_HDRH + S_PAD + sz + pwrH + S_PAD;
  let px     = S_MARGIN;
  let py     = S_MARGIN;

  // Panel background
  fill(12, 16, 26, 210);
  noStroke();
  rect(px, py, panelW, panelH, 2);

  // Header bar
  fill(35, 42, 60, 255);
  noStroke();
  rect(px, py, panelW, S_HDRH, 2, 2, 0, 0);
  fill(255, 195, 55);
  textAlign(LEFT, CENTER);
  textFont(moanaFont);
  textSize(13);
  text('WARRIOR CREW', px + S_PAD, py + S_HDRH / 2);
  // score counter right side
  textAlign(RIGHT, CENTER);
  fill(200, 210, 230);
  textSize(12);
  text(`${score} / 7`, px + panelW - S_PAD, py + S_HDRH / 2);
  textFont('sans-serif');

  for (let i = 0; i < 7; i++) {
    let { x, y, size } = getSlotPos(i);
    let filled = i < score;

    if (filled && slotChars[i] >= 0) {
      let frames = charFrames[slotChars[i]];
      let frameIdx = floor((frameCount + slotOffsets[i]) / ANI_FPS) % frames.length;
      let img = frames[frameIdx];
      let sc = min(size / img.width, size / img.height) * CHAR_SCALES[slotChars[i]];
      drawingContext.save();
      drawingContext.beginPath();
      drawingContext.arc(x, y, size / 2, 0, Math.PI * 2);
      drawingContext.clip();
      imageMode(CENTER);
      image(img, x, y, img.width * sc, img.height * sc);
      drawingContext.restore();

      // Power display — threshold at 55: pwr >= 55 = full green
      let pwr = slotPowers[i] !== undefined ? slotPowers[i] : 0;
      let pwrT = min(pwr / 55, 1);
      let pwrCol = lerpColor(color(220, 50, 50), color(50, 215, 85), pwrT);

      // Glow ring (outer) — pulses slightly based on power
      noFill();
      strokeWeight(7);
      stroke(red(pwrCol), green(pwrCol), blue(pwrCol), 55 + pwrT * 50);
      ellipse(x, y, size + 11, size + 11);
      // Sharp ring (inner)
      strokeWeight(2.5);
      stroke(pwrCol);
      ellipse(x, y, size + 2, size + 2);
      noStroke();

      // Power badge below circle
      let pillW = floor(size * 0.86);
      let pillH = 23;
      let pillX = x - pillW / 2;
      let pillY = y + size / 2 + 6;
      // shadow
      fill(0, 0, 0, 150);
      rect(pillX + 1, pillY + 1, pillW, pillH, 12);
      // dark background
      fill(8, 10, 20, 240);
      rect(pillX, pillY, pillW, pillH, 12);
      // progress fill — bar shows true pwr/100, color uses lowered threshold
      fill(red(pwrCol), green(pwrCol), blue(pwrCol), 210);
      let barW = max(0, (pillW - 4) * (pwr / 100));
      if (barW > 0) rect(pillX + 2, pillY + 2, barW, pillH - 4, 10);
      // label: "PWR XX"
      fill(255, 255, 255, 245);
      textAlign(CENTER, CENTER);
      textFont('Google Sans, Nunito, sans-serif');
      textStyle(BOLD);
      textSize(12);
      text(`PWR ${pwr}`, x, pillY + pillH / 2);
      textStyle(NORMAL);
      textFont('sans-serif');
    } else {
      fill(22, 28, 42);
      noStroke();
      ellipse(x, y, size, size);
      stroke(50, 58, 78);
      strokeWeight(1.5);
      noFill();
      ellipse(x, y, size, size);
      fill(55, 65, 88);
      noStroke();
      textAlign(CENTER, CENTER);
      textSize(13);
      text(i + 1, x, y);
    }
  }
}

// ====== FLYING KAKAMORA ======
function launchKakamoraToSlot(slotIdx) {
  let { x: tx, y: ty, size } = getSlotPos(slotIdx);
  let charIdx = charOrder[charOrderIdx % 7];
  charOrderIdx++;
  slotChars[slotIdx] = charIdx;
  slotOffsets[slotIdx] = floor(random(1000));
  flyingKakamoraList.push({
    startX: width / 2,
    startY: height * 0.42,
    targetX: tx,
    targetY: ty,
    t: 0,
    charIdx,
    questShown: false,
    size
  });
}

function updateFlyingKakamoraList() {
  for (let k of flyingKakamoraList) k.t += 0.032;
  flyingKakamoraList = flyingKakamoraList.filter(k => k.t <= 1);
}

function drawFlyingKakamoraList() {
  for (let k of flyingKakamoraList) {
    let ease = 1 - pow(1 - min(k.t, 1), 2);
    let x = lerp(k.startX, k.targetX, ease);
    let y = lerp(k.startY, k.targetY, ease) - sin(k.t * PI) * height * 0.3;
    let sz = lerp(k.size * 1.8, k.size, ease);

    let frames = charFrames[k.charIdx];
    let frameIdx = floor(frameCount / ANI_FPS) % frames.length;
    let img = frames[frameIdx];
    let sc = min(sz / img.width, sz / img.height) * CHAR_SCALES[k.charIdx];
    drawingContext.save();
    drawingContext.beginPath();
    drawingContext.arc(x, y, sz / 2, 0, Math.PI * 2);
    drawingContext.clip();
    imageMode(CENTER);
    image(img, x, y, img.width * sc, img.height * sc);
    drawingContext.restore();
  }
}

// ====== PARTICLES ======
class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    // 전방향 랜덤 퍼짐 (드래그 방향 편향 없이 360도)
    let baseAngle = random(TWO_PI);
    let spd = random(2, 6);
    this.vel = createVector(cos(baseAngle) * spd, sin(baseAngle) * spd);
    this.life = 255;
    this.r = random(1.5, 3.5);
    this.isHusk = random() > 0.4;
  }

  update() {
    this.pos.add(this.vel);
    this.vel.y += 0.22;
    this.vel.mult(0.91);
    this.life -= 9;
  }

  draw() {
    noStroke();
    if (this.isHusk) fill(158, 108, 52, this.life);
    else fill(242, 224, 188, this.life);
    ellipse(this.pos.x, this.pos.y, this.r, this.r * 0.55);
  }
}

function spawnParticles(x, y) {
  for (let i = 0; i < 12; i++) particles.push(new Particle(x, y));
}

function drawParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].draw();
    if (particles[i].life <= 0) particles.splice(i, 1);
  }
}

// ====== FLASH ======
function drawFlash() {
  if (flashAlpha > 0) {
    fill(255, flashAlpha);
    rect(0, 0, width, height);
    flashAlpha -= 20;
  }
}

// ====== COCONUT TIMER ======
function checkCoconutTimer() {
  if (coconut.flying || coconutTimerEnd === 0) return;
  if (millis() > coconutTimerEnd) {
    coconut.state = 0;
    coconut.slices = 0;
    coconutTimerEnd = millis() + COCONUT_TIME_MS;
  }
}

function drawCoconutTimer() {
  if (coconut.flying || coconutTimerEnd === 0) return;
  let fraction = max(0, (coconutTimerEnd - millis()) / COCONUT_TIME_MS);
  let secs = (fraction * (COCONUT_TIME_MS / 1000)).toFixed(1);
  let c = lerpColor(color(255, 60, 60), color(80, 220, 100), fraction);

  // Top-right pill
  let tx = width - 18;
  let ty = 18;
  let label = `TIME  ${secs}s`;
  textFont('Google Sans, Nunito, sans-serif');
  textSize(26);
  let tw = textWidth(label) + 36;
  let th = 54;

  fill(12, 16, 26, 220);
  noStroke();
  rect(tx - tw, ty, tw, th, 2);

  // Progress bar
  fill(30, 37, 54);
  rect(tx - tw + 8, ty + th - 12, tw - 16, 6, 2);
  fill(c);
  rect(tx - tw + 8, ty + th - 12, (tw - 16) * fraction, 6, 2);

  fill(c);
  textAlign(RIGHT, TOP);
  text(label, tx - 10, ty + 10);
  textFont('sans-serif');

}

// ====== SHARED DIALOG HELPER ======
function drawDialogBox(dx, dy, dw, dh, speakerName, lines, btnLabel) {
  fill(0, 0, 0, 90);
  noStroke();
  rect(0, 0, width, height);

  fill(28, 32, 45, 185);
  noStroke();
  rect(dx, dy, dw, dh, 2);

  // Name banner — sharp corners
  textFont(moanaFont);
  textSize(20);
  let bw = textWidth(speakerName) + 44;
  let bh = 36;
  fill(210, 105, 20);
  stroke(255, 175, 70);
  strokeWeight(2);
  rect(dx + 22, dy - bh / 2, bw, bh, 2);
  noStroke();
  fill(255);
  textAlign(LEFT, CENTER);
  text(speakerName, dx + 34, dy + 2);

  // Quest lines — system font for readability
  textFont('sans-serif');
  textSize(14);
  fill(210, 210, 215);
  textAlign(LEFT, TOP);
  for (let i = 0; i < lines.length; i++) {
    text(`• ${lines[i]}`, dx + 28, dy + 46 + i * 34);
  }

  // Button row — Moana font
  let btnW = 180;
  let btnH = 36;
  let btnX = dx + dw / 2 - btnW / 2;
  let btnY = dy + dh - btnH - 16;
  fill(18, 80, 150);
  noStroke();
  rect(btnX, btnY, btnW, btnH, 2);
  stroke(90, 185, 255);
  strokeWeight(1.5);
  noFill();
  rect(btnX, btnY, btnW, btnH, 2);
  noStroke();
  fill(210, 240, 255);
  textFont(moanaFont);
  textAlign(CENTER, CENTER);
  textSize(18);
  text(btnLabel, dx + dw / 2, btnY + btnH / 2);
  textFont('sans-serif');
}

// ====== INTRO QUEST ======
function drawIntroQuest() {
  let dw = min(width * 0.54, 580);
  let dh = 230;
  let dx = (width - dw) / 2;
  let dy = (height - dh) / 2;
  drawDialogBox(dx, dy, dw, dh, 'Chief Tamatoa', [
    'You have 5 seconds to crack each coconut and claim a warrior.',
    'Strike fast. The quicker the slash, the stronger they become.',
    'Recruit all 7 warriors before we head into battle.'
  ], 'BEGIN');
}

// ====== DEPARTURE QUEST ======
function drawDepartureQuest() {
  let dw = min(width * 0.54, 580);
  let dh = 190;
  let dx = (width - dw) / 2;
  let dy = height - dh - 28;
  drawDialogBox(dx, dy, dw, dh, 'Chief Tamatoa', [
    'Seven warriors stand ready. The crew is assembled.',
    'The enemy will not hold back. Neither will we.',
    'The tide is turning. Now we sail and fight.'
  ], 'SET SAIL');
}

// ====== NAME ENTRY ======
function drawNameEntry() {
  fill(0, 0, 0, 130);
  noStroke();
  rect(0, 0, width, height);

  let pw = min(width * 0.5, 440);
  let ph = 240;
  let px = (width - pw) / 2;
  let py = (height - ph) / 2;

  fill(14, 20, 36, 225);
  noStroke();
  rect(px, py, pw, ph, 2);

  // Header bar
  fill(24, 35, 58);
  rect(px, py, pw, 42, 2, 2, 0, 0);
  textFont(moanaFont);
  textAlign(CENTER, CENTER);
  textSize(18);
  fill(255, 215, 80);
  text('KAKAMORA WARRIOR', width / 2, py + 21);
  textFont('sans-serif');

  // Prompt
  fill(160, 185, 220);
  textAlign(CENTER, CENTER);
  textSize(13);
  text('Enter your name to join the crew.', width / 2, py + 72);
  text('Your score will be saved to the leaderboard.', width / 2, py + 90);
}

function confirmName() {
  let val = nameInput.value().trim();
  if (val.length === 0) return;
  playerName = val;
  nameInput.hide();
  nameConfirmBtn.hide();
  gameState = 'intro';
}


// ====== IMAGE PARTICLES ======
class ImgParticle {
  constructor(x, y, dx, dy) {
    this.pos = createVector(x, y);
    let baseAngle = (dx !== 0 || dy !== 0)
      ? atan2(dy, dx) + PI + random(-0.6, 0.6)
      : random(TWO_PI);
    let spd = random(1.5, 4.5);
    this.vel = createVector(cos(baseAngle) * spd, sin(baseAngle) * spd);
    this.life = 255;
    this.size = random(20, 40);
    this.img = random(effectImgs);
    this.rot = random(TWO_PI);
    this.rotSpeed = random(-0.18, 0.18);
  }

  update() {
    this.pos.add(this.vel);
    this.vel.y += 0.14;
    this.vel.mult(0.91);
    this.life -= 14;
    this.rot += this.rotSpeed;
  }

  draw() {
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.rot);
    tint(255, this.life);
    imageMode(CENTER);
    image(this.img, 0, 0, this.size, this.size);
    noTint();
    pop();
  }
}

function spawnImgParticles(x, y, dx, dy) {
  for (let i = 0; i < 4; i++) imgParticles.push(new ImgParticle(x, y, dx, dy));
}

function updateImgParticles() {
  for (let i = imgParticles.length - 1; i >= 0; i--) {
    imgParticles[i].update();
    if (imgParticles[i].life <= 0) imgParticles.splice(i, 1);
  }
}

function drawImgParticles() {
  for (let p of imgParticles) p.draw();
}

// ====== MOUSE HANDLER ======
function mousePressed() {
  if (gameState === 'name') return;
  if (gameState === 'intro') {
    gameState = 'playing';
    coconutTimerEnd = millis() + COCONUT_TIME_MS;
    startCoconutEntrance();
    beachSound.play();
    return;
  }
  if (gameState === 'departure') {
    // 출항 처리 (추후 배틀 씬으로 전환)
    return;
  }
}