<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>🐠 Ocean Friend Builder</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&display=swap" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SKW4EL2R1F"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-SKW4EL2R1F');
</script>
<!-- game-meta
{
  "id": "ocean-friend-builder",
  "name": "Ocean Friend Builder",
  "file": "games/game-2026-08-22-14-ocean-friend-builder.html",
  "type_id": 904,
  "type_name": "Character Creator",
  "theme": "Ocean Adventure",
  "icon": "🐠",
  "description": "The ocean friends need a new pal! Tap to choose body, fins, tail, and decorations to build your own colorful fish. Make it shine!",
  "age_range": "4-6",
  "age_tier": "E",
  "edition": "D",
  "season": "ocean-adventure",
  "has_missions": true,
  "created": "2026-08-22T14:00:00Z"
}
-->
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(180deg, #0a4a6e 0%, #0e7a8a 40%, #12b5a0 100%);
    min-height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  #game-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }

  /* ---- HUD ---- */
  #hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    z-index: 20;
    pointer-events: none;
  }
  #mission-hud {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    max-width: 55%;
    line-height: 1.4;
    pointer-events: none;
  }
  #mission-hud .mis { opacity: 0.5; }
  #mission-hud .mis.done { opacity: 1; }
  #title-hud {
    font-size: 15px;
    color: #fff;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
  }

  /* ---- HINT BAR ---- */
  #hint-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    border-radius: 20px 20px 0 0;
    padding: 10px 16px 14px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 700;
    z-index: 20;
    pointer-events: none;
    letter-spacing: 0.3px;
  }

  /* ---- START SCREEN ---- */
  #start-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    background: linear-gradient(180deg, #0a4a6e 0%, #0e7a8a 40%, #12b5a0 100%);
    gap: 0;
  }
  #start-screen .ocean-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .wave {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 60px;
    background: rgba(255,255,255,0.08);
    border-radius: 50% 50% 0 0;
    animation: wave 3s ease-in-out infinite alternate;
  }
  .wave:nth-child(2) { bottom: 10px; animation-delay: -1s; opacity: 0.5; }
  .wave:nth-child(3) { bottom: 20px; animation-delay: -2s; opacity: 0.3; }
  @keyframes wave {
    0% { transform: translateX(-3%) translateY(0); }
    100% { transform: translateX(3%) translateY(-8px); }
  }
  #start-screen .fish-swim {
    font-size: 72px;
    animation: swim-bounce 2s ease-in-out infinite;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  }
  @keyframes swim-bounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
  }
  #start-screen h1 {
    font-size: clamp(26px, 7vw, 40px);
    color: #fff;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 3px 12px rgba(0,0,0,0.3);
    margin-bottom: 8px;
    z-index: 1;
  }
  #start-screen .subtitle {
    font-size: clamp(14px, 4vw, 18px);
    color: rgba(255,255,255,0.85);
    text-align: center;
    margin-bottom: 28px;
    z-index: 1;
    padding: 0 20px;
  }
  #start-screen .missions-preview {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 14px 20px;
    margin-bottom: 28px;
    z-index: 1;
    width: min(340px, 90vw);
  }
  #start-screen .missions-preview .mp-title {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  #start-screen .missions-preview .mp-mission {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .btn-play {
    background: linear-gradient(135deg, #ff6b9d, #ff8f6b);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 900;
    padding: 16px 52px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(255,107,157,0.5), 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .btn-play:active {
    transform: scale(0.95);
    box-shadow: 0 3px 12px rgba(255,107,157,0.4);
  }

  /* ---- BUILDER SCREEN ---- */
  #builder-screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0 80px;
    z-index: 10;
  }

  /* Fish display area */
  #fish-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
  }
  #fish-stage {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #fish-preview {
    font-size: 100px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
  }
  #fish-preview.bounce {
    animation: fish-bounce 0.4s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes fish-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
  }

  /* Decorations on the fish */
  .fish-deco {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
  }

  /* Part selector rows */
  #part-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
    pointer-events: auto;
  }
  .part-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 8px 12px;
  }
  .part-label {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    min-width: 56px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }
  .part-options {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
  }
  .part-options::-webkit-scrollbar { display: none; }
  .part-btn {
    font-size: 28px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 3px solid transparent;
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    touch-action: manipulation;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .part-btn:active { transform: scale(0.9); }
  .part-btn.selected {
    border-color: #ffd700;
    background: rgba(255,215,0,0.25);
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255,215,0,0.5);
  }

  /* Done button */
  #btn-done {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #5a3d00;
    border: none;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    font-weight: 900;
    padding: 14px 44px;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(255,215,0,0.4);
    transition: transform 0.15s;
    margin-top: 10px;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #btn-done:active { transform: scale(0.95); }

  /* ---- RESULT SCREEN ---- */
  #result-screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 40;
    background: linear-gradient(180deg, #0a4a6e 0%, #0e7a8a 40%, #12b5a0 100%);
    gap: 16px;
    padding: 20px;
  }
  #result-title {
    font-size: clamp(28px, 8vw, 42px);
    color: #fff;
    font-weight: 900;
    text-shadow: 0 3px 12px rgba(0,0,0,0.3);
    text-align: center;
    animation: pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1);
  }
  @keyframes pop-in {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  #result-fish {
    font-size: clamp(80px, 25vw, 120px);
    animation: swim-bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.3));
  }
  #result-name {
    font-size: clamp(18px, 5vw, 26px);
    color: #ffd700;
    font-weight: 900;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  #result-missions {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 14px 20px;
    width: min(360px, 90vw);
  }
  #result-missions .rm-title {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .result-mission {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .result-mission.done { color: #7dffb3; }
  .result-mission.miss { color: rgba(255,255,255,0.45); }
  #btn-replay {
    background: linear-gradient(135deg, #7dffb3, #3ddc97);
    color: #1a5c3a;
    border: none;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    font-weight: 900;
    padding: 16px 52px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(125,255,179,0.4);
    transition: transform 0.15s;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: pop-in 0.5s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  }
  #btn-replay:active { transform: scale(0.95); }

  /* ---- CONFETTI ---- */
  .confetto-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 60;
  }

  /* ---- PARTICLES ---- */
  .float-emoji {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
    z-index: 30;
    animation: float-up 1s ease-out forwards;
  }
  @keyframes float-up {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.7); }
  }

  /* ---- BUBBLES (background decoration) ---- */
  .bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.2);
    pointer-events: none;
    z-index: 1;
  }
</style>
</head>
<body>
<div id="game-container">

  <!-- HUD (visible during build) -->
  <div id="hud" style="display:none;">
    <div id="mission-hud"></div>
    <div id="title-hud">🐠 Ocean Friend Builder</div>
  </div>

  <!-- Hint bar -->
  <div id="hint-bar" style="display:none;">👆 Tap body, fins & tail → Pick colors → Make it yours!</div>

  <!-- START SCREEN -->
  <div id="start-screen">
    <div class="ocean-bg">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
    <div class="fish-swim">🐠</div>
    <h1>Ocean Friend<br>Builder</h1>
    <div class="subtitle">Make your own colorful fish friend!</div>
    <div class="missions-preview" id="start-missions"></div>
    <button class="btn-play" id="btn-play">Let's Go! 🌊</button>
  </div>

  <!-- BUILDER SCREEN -->
  <div id="builder-screen">
    <div id="fish-display">
      <div id="fish-stage">
        <div id="fish-preview">🐟</div>
      </div>
    </div>
    <div id="part-selector">
      <div class="part-row" id="row-body">
        <div class="part-label">Body</div>
        <div class="part-options" id="opts-body"></div>
      </div>
      <div class="part-row" id="row-tail">
        <div class="part-label">Tail</div>
        <div class="part-options" id="opts-tail"></div>
      </div>
      <div class="part-row" id="row-fin">
        <div class="part-label">Fin</div>
        <div class="part-options" id="opts-fin"></div>
      </div>
      <div class="part-row" id="row-color">
        <div class="part-label">Color</div>
        <div class="part-options" id="opts-color"></div>
      </div>
      <button id="btn-done">All Done! 🎉</button>
    </div>
  </div>

  <!-- RESULT SCREEN -->
  <div id="result-screen">
    <div id="result-title">You made it!</div>
    <div id="result-fish">🐠</div>
    <div id="result-name"></div>
    <div id="result-missions">
      <div class="rm-title">Missions Complete</div>
      <div id="result-missions-list"></div>
    </div>
    <button class="btn-replay" id="btn-replay">Make Another! 🐙</button>
  </div>

</div>

<script>
(function() {
  'use strict';

  /* ===== GA Safe ===== */
  var gtagSafe = (typeof gtag === 'function') ? gtag : function(){};
  function trackGA(event, params) {
    try { gtagSafe(event, params); } catch(e) {}
  }

  /* ===== DOM refs ===== */
  var startScreen    = document.getElementById('start-screen');
  var builderScreen  = document.getElementById('builder-screen');
  var resultScreen   = document.getElementById('result-screen');
  var btnPlay        = document.getElementById('btn-play');
  var btnDone        = document.getElementById('btn-done');
  var btnReplay      = document.getElementById('btn-replay');
  var fishPreview    = document.getElementById('fish-preview');
  var fishStage      = document.getElementById('fish-stage');
  var hud            = document.getElementById('hud');
  var hintBar        = document.getElementById('hint-bar');
  var missionHud     = document.getElementById('mission-hud');
  var startMissions  = document.getElementById('start-missions');
  var resultMissions = document.getElementById('result-missions-list');
  var resultFish     = document.getElementById('result-fish');
  var resultName     = document.getElementById('result-name');
  var resultTitle    = document.getElementById('result-title');

  /* ===== Fish part data ===== */
  var BODIES = ['🐟','🐠','🐡','🦈','🐙','�章'];
  var TAILS  = ['🐋','🐳','🐬','🦭',''];
  var FINS   = ['🦀','🦞','🦐','🐚','🦑',''];
  var COLORS = [
    { name:'🌈 Rainbow', bg:'linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff)', text:'#fff' },
    { name:'🧡 Orange',  bg:'linear-gradient(135deg,#ff8c42,#ffd93d)',                text:'#fff' },
    { name:'💜 Purple',  bg:'linear-gradient(135deg,#a855f7,#6366f1)',                text:'#fff' },
    { name:'💚 Green',   bg:'linear-gradient(135deg,#22c55e,#86efac)',                text:'#fff' },
    { name:'💙 Blue',    bg:'linear-gradient(135deg,#3b82f6,#93c5fd)',                text:'#fff' },
    { name:'💖 Pink',    bg:'linear-gradient(135deg,#ff6b9d,#fb7185)',                text:'#fff' },
    { name:'🤍 White',   bg:'linear-gradient(135deg,#f1f5f9,#e2e8f0)',                text:'#334' },
    { name:'🖤 Black',   bg:'linear-gradient(135deg,#334155,#1e293b)',                text:'#fff' },
  ];

  /* ===== Missions ===== */
  var daySeed = Math.floor(Date.now() / 86400000);
  function seededShuffle(arr, seed) {
    var a = arr.slice(), s = seed;
    for (var i = a.length - 1; i > 0; i--) {
      s = (s * 1664525 + 1013904223) & 0xffffffff;
      var j = Math.abs(s) % (i + 1);
      var t = a[i]; a[i] = a[j]; a[j] = t;
    }
    return a;
  }
  var MISSION_POOL = [
    { icon:'🎨', text:'Try 3 different bodies', check: function(s){ return s.bodyChanges >= 3; } },
    { icon:'🌈', text:'Pick a colorful fish',    check: function(s){ return s.colorChanges >= 1; } },
    { icon:'🐙', text:'Use the pink color',     check: function(s){ return s.pinkUsed; } },
    { icon:'🐬', text:'Add a tail fin',         check: function(s){ return s.tailSet; } },
    { icon:'🦀', text:'Add a top fin',          check: function(s){ return s.finSet; } },
    { icon:'🎉', text:'Tap Done to finish!',    check: function(s){ return s.finished; } },
    { icon:'✨', text:'Try 5 different parts',   check: function(s){ return s.totalChanges >= 5; } },
  ];
  var todayMissions = seededShuffle(MISSION_POOL, daySeed).slice(0, 3);

  /* ===== Game state ===== */
  var state = {
    phase: 'start',
    body: 0,
    tail: 0,
    fin: 0,
    color: 0,
    bodyChanges: 0,
    tailChanges: 0,
    finChanges: 0,
    colorChanges: 0,
    totalChanges: 0,
    tailSet: false,
    finSet: false,
    pinkUsed: false,
    finished: false,
    missions: todayMissions.map(function(m){ return {done:false}; }),
  };

  /* ===== Build fish display ===== */
  function buildFish() {
    var body = BODIES[state.body] || '🐟';
    var tail = TAILS[state.tail]   || '';
    var fin  = FINS[state.fin]     || '';
    var col  = COLORS[state.color] || COLORS[0];
    fishPreview.style.background = col.bg;
    fishPreview.style.webkitBackgroundClip = 'text';
    fishPreview.style.webkitTextFillColor = 'transparent';
    fishPreview.style.backgroundClip = 'text';

    // Combine parts: if body is 🐟, replace with combo
    var parts = [];
    if (tail) parts.push(tail);
    parts.push(body);
    if (fin) parts.push(fin);
    fishPreview.textContent = parts.join('');

    // Add sparkle overlay
    fishPreview.style.filter = 'drop-shadow(0 4px 16px rgba(0,0,0,0.3))';
  }

  /* ===== Build option buttons ===== */
  function buildOptions() {
    var optsBody   = document.getElementById('opts-body');
    var optsTail   = document.getElementById('opts-tail');
    var optsFin    = document.getElementById('opts-fin');
    var optsColor  = document.getElementById('opts-color');

    optsBody.innerHTML = '';
    BODIES.forEach(function(b, i) {
      var btn = makeBtn(b, 'body', i);
      if (i === state.body) btn.classList.add('selected');
      optsBody.appendChild(btn);
    });

    optsTail.innerHTML = '';
    TAILS.forEach(function(t, i) {
      var btn = makeBtn(t || '🚫', 'tail', i);
      if (i === state.tail) btn.classList.add('selected');
      optsTail.appendChild(btn);
    });

    optsFin.innerHTML = '';
    FINS.forEach(function(f, i) {
      var btn = makeBtn(f || '🚫', 'fin', i);
      if (i === state.fin) btn.classList.add('selected');
      optsFin.appendChild(btn);
    });

    optsColor.innerHTML = '';
    COLORS.forEach(function(c, i) {
      var btn = document.createElement('button');
      btn.className = 'part-btn' + (i === state.color ? ' selected' : '');
      btn.style.background = c.bg;
      btn.style.color = c.text;
      btn.textContent = c.name;
      btn.setAttribute('data-part', 'color');
      btn.setAttribute('data-index', i);
      addBtnListeners(btn, 'color', i);
      optsColor.appendChild(btn);
    });
  }

  function makeBtn(content, part, idx) {
    var btn = document.createElement('button');
    btn.className = 'part-btn' + (idx === getStateIdx(part) ? ' selected' : '');
    btn.textContent = content;
    btn.setAttribute('data-part', part);
    btn.setAttribute('data-index', idx);
    addBtnListeners(btn, part, idx);
    return btn;
  }

  function getStateIdx(part) {
    if (part === 'body')  return state.body;
    if (part === 'tail')  return state.tail;
    if (part === 'fin')   return state.fin;
    if (part === 'color') return state.color;
    return 0;
  }

  function setState(part, idx) {
    var prev = getStateIdx(part);
    if (part === 'body')  { state.body  = idx; if (idx !== prev) state.bodyChanges++; }
    if (part === 'tail')  { state.tail  = idx; if (idx !== prev) { state.tailChanges++; if (idx > 0) state.tailSet = true; } }
    if (part === 'fin')   { state.fin   = idx; if (idx !== prev) { state.finChanges++;  if (idx > 0) state.finSet = true; } }
    if (part === 'color') {
      state.color = idx;
      if (idx !== prev) {
        state.colorChanges++;
        if (idx === 5) state.pinkUsed = true; // 💖 Pink is index 5
      }
    }
    state.totalChanges = state.bodyChanges + state.tailChanges + state.finChanges + state.colorChanges;
  }

  function addBtnListeners(btn, part, idx) {
    function selectPart() {
      setState(part, idx);
      buildFish();
      buildOptions(); // rebuild to update selected state
      bounceFish();
      if (part === 'color') {
        spawnFloat('✨', fishStage, 0, -30);
      } else {
        spawnFloat('👆', fishStage, 0, -20);
      }
      checkMissions();
      updateHUDMissions();
    }
    btn.addEventListener('pointerdown', function(e) {
      e.preventDefault();
      selectPart();
    });
    btn.addEventListener('click', function() {
      selectPart();
    });
  }

  /* ===== Bounce animation ===== */
  function bounceFish() {
    fishPreview.classList.remove('bounce');
    void fishPreview.offsetWidth; // reflow
    fishPreview.classList.add('bounce');
    setTimeout(function() { fishPreview.classList.remove('bounce'); }, 400);
  }

  /* ===== Float emoji particles ===== */
  function spawnFloat(emoji, parent, ox, oy) {
    var el = document.createElement('div');
    el.className = 'float-emoji';
    el.textContent = emoji;
    var rect = parent.getBoundingClientRect();
    var containerRect = document.getElementById('game-container').getBoundingClientRect();
    el.style.left = (rect.left - containerRect.left + rect.width/2 - 14 + ox + (Math.random()-0.5)*30) + 'px';
    el.style.top  = (rect.top  - containerRect.top  + rect.height/2 - 14 + oy) + 'px';
    document.getElementById('game-container').appendChild(el);
    setTimeout(function() { el.remove(); }, 1000);
  }

  /* ===== Confetti burst ===== */
  function spawnConfetti() {
    var colors = ['#ff6b9d','#ffd93d','#6bcb77','#4d96ff','#a855f7','#ff8c42'];
    for (var i = 0; i < 40; i++) {
      (function(ii) {
        setTimeout(function() {
          var el = document.createElement('div');
          el.className = 'confetto-piece';
          var cx = Math.random() * window.innerWidth;
          el.style.left = cx + 'px';
          el.style.top  = '-10px';
          el.style.background = colors[Math.floor(Math.random() * colors.length)];
          el.style.width  = (6 + Math.random() * 8) + 'px';
          el.style.height = (6 + Math.random() * 8) + 'px';
          el.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
          el.style.transform = 'rotate(' + (Math.random()*360) + 'deg)';
          document.getElementById('game-container').appendChild(el);
          var startY = -10;
          var startX = cx;
          var vx = (Math.random() - 0.5) * 4;
          var vy = 2 + Math.random() * 4;
          var grav = 0.12;
          var rot = (Math.random() - 0.5) * 8;
          var angle = Math.random() * 360;
          function fall() {
            vy += grav;
            startY += vy;
            startX += vx;
            angle += rot;
            el.style.top  = startY + 'px';
            el.style.left = startX + 'px';
            el.style.transform = 'rotate(' + angle + 'deg)';
            el.style.opacity = Math.max(0, 1 - (startY / window.innerHeight));
            if (startY < window.innerHeight + 20) {
              requestAnimationFrame(fall);
            } else {
              el.remove();
            }
          }
          requestAnimationFrame(fall);
        }, ii * 25);
      })(i);
    }
  }

  /* ===== Background bubbles ===== */
  function spawnBubble() {
    var el = document.createElement('div');
    el.className = 'bubble';
    var size = 10 + Math.random() * 40;
    el.style.width  = size + 'px';
    el.style.height = size + 'px';
    el.style.left   = Math.random() * window.innerWidth + 'px';
    el.style.bottom = '-10px';
    document.getElementById('game-container').appendChild(el);
    var startY = window.innerHeight + 10;
    var startX = parseFloat(el.style.left);
    var vy = -(0.5 + Math.random() * 1.5);
    var vx = (Math.random() - 0.5) * 0.5;
    var wobble = 0;
    function rise() {
      startY += vy;
      wobble += 0.05;
      startX += vx + Math.sin(wobble) * 0.3;
      el.style.top  = startY + 'px';
      el.style.left = startX + 'px';
      if (startY > -size) {
        requestAnimationFrame(rise);
      } else {
        el.remove();
      }
    }
    requestAnimationFrame(rise);
  }

  var bubbleInterval = null;
  function startBubbles() {
    if (bubbleInterval) return;
    bubbleInterval = setInterval(spawnBubble, 600);
    spawnBubble();
  }
  function stopBubbles() {
    if (bubbleInterval) { clearInterval(bubbleInterval); bubbleInterval = null; }
  }

  /* ===== Mission system ===== */
  function checkMissions() {
    todayMissions.forEach(function(m, i) {
      if (!state.missions[i].done && m.check(state)) {
        state.missions[i].done = true;
        spawnFloat(m.icon, fishStage, 0, -40);
        trackGA('event', { event_category: 'mission', event_label: 'complete', mission_index: i });
      }
    });
  }

  function updateHUDMissions() {
    var html = todayMissions.map(function(m, i) {
      var done = state.missions[i].done;
      return '<div class="mis' + (done ? ' done' : '') + '">' + m.icon + ' ' + m.text + '</div>';
    }).join('');
    missionHud.innerHTML = html;
  }

  function showStartMissions() {
    var html = '<div class="mp-title">Today\'s Missions</div>';
    html += todayMissions.map(function(m) {
      return '<div class="mp-mission">' + m.icon + ' ' + m.text + '</div>';
    }).join('');
    startMissions.innerHTML = html;
  }

  function showResultMissions() {
    resultMissions.innerHTML = todayMissions.map(function(m, i) {
      var done = state.missions[i].done;
      return '<div class="result-mission ' + (done ? 'done' : 'miss') + '">' +
             (done ? '✅' : '⬜') + ' ' + m.icon + ' ' + m.text + '</div>';
    }).join('');
  }

  /* ===== Screen transitions ===== */
  function showScreen(name) {
    startScreen.style.display  = 'none';
    builderScreen.style.display = 'none';
    resultScreen.style.display = 'none';
    hud.style.display = 'none';
    hintBar.style.display = 'none';

    if (name === 'start') {
      startScreen.style.display = 'flex';
    } else if (name === 'builder') {
      builderScreen.style.display = 'flex';
      hud.style.display = 'flex';
      hintBar.style.display = 'block';
    } else if (name === 'result') {
      resultScreen.style.display = 'flex';
    }
  }

  /* ===== Game actions ===== */
  var playFired = false;
  function doPlay() {
    if (playFired) return;
    playFired = true;
    setTimeout(function() { playFired = false; }, 600);

    showScreen('builder');
    buildFish();
    buildOptions();
    updateHUDMissions();
    startBubbles();
    trackGA('event', { event_category: 'game', event_action: 'start', game_id: 'ocean-friend-builder', tier: 'E' });
  }

  var doneFired = false;
  function doDone() {
    if (doneFired) return;
    doneFired = true;
    setTimeout(function() { doneFired = false; }, 600);

    state.finished = true;
    checkMissions();
    stopBubbles();

    // Build result fish
    var parts = [];
    if (TAILS[state.tail]) parts.push(TAILS[state.tail]);
    parts.push(BODIES[state.body]);
    if (FINS[state.fin]) parts.push(FINS[state.fin]);
    resultFish.textContent = parts.join('');

    var col = COLORS[state.color];
    resultFish.style.background = col.bg;
    resultFish.style.webkitBackgroundClip = 'text';
    resultFish.style.webkitTextFillColor = 'transparent';
    resultFish.style.backgroundClip = 'text';
    resultFish.style.filter = 'drop-shadow(0 6px 20px rgba(0,0,0,0.3))';

    // Random cute name
    var names = ['Bubbles 🫧','Splash 💦','Finnley 🐬','Marina 🌊','Coral 🪸','Shelly 🐚','Nemo 🐠','Dory 💙','Sailor ⛵','Wavy 🌊'];
    var nameIdx = (daySeed + state.body * 3 + state.color * 7) % names.length;
    resultName.textContent = 'Meet ' + names[nameIdx] + '!';

    var completed = state.missions.filter(function(m){ return m.done; }).length;
    if (completed >= 2) {
      resultTitle.textContent = '🌟 Amazing!';
    } else if (completed >= 1) {
      resultTitle.textContent = '🎉 Great Job!';
    } else {
      resultTitle.textContent = '😊 Nice Work!';
    }

    showResultMissions();
    showScreen('result');
    spawnConfetti();
    trackGA('event', { event_category: 'game', event_action: 'game_over', game_id: 'ocean-friend-builder', score: completed, tier: 'E' });
  }

  var replayFired = false;
  function doReplay() {
    if (replayFired) return;
    replayFired = true;
    setTimeout(function() { replayFired = false; }, 600);

    // Reset state
    state.body = 0; state.tail = 0; state.fin = 0; state.color = 0;
    state.bodyChanges = 0; state.tailChanges = 0; state.finChanges = 0; state.colorChanges = 0;
    state.totalChanges = 0;
    state.tailSet = false; state.finSet = false; state.pinkUsed = false;
    state.finished = false;
    state.missions = todayMissions.map(function(){ return {done:false}; });

    showScreen('builder');
    buildFish();
    buildOptions();
    updateHUDMissions();
    startBubbles();
  }

  /* ===== Button wiring ===== */
  btnPlay.addEventListener('pointerdown', function(e) { e.preventDefault(); doPlay(); });
  btnPlay.addEventListener('click', function() { doPlay(); });

  btnDone.addEventListener('pointerdown', function(e) { e.preventDefault(); doDone(); });
  btnDone.addEventListener('click', function() { doDone(); });

  btnReplay.addEventListener('pointerdown', function(e) { e.preventDefault(); doReplay(); });
  btnReplay.addEventListener('click', function() { doReplay(); });

  /* ===== Ambient bubbles on start screen ===== */
  startBubbles();

  /* ===== Init ===== */
  showStartMissions();
  showScreen('start');

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