// Doubling cube 3D display widget
export function renderCubeDisplay(container, cubeValue, cubeOwner, myColor) {
  let existing = container.querySelector('.bgg-cube-display');
  if (!existing) {
    existing = document.createElement('div');
    existing.className = 'bgg-cube-display';
    container.appendChild(existing);
  }

  if (!cubeValue || cubeValue === 1) {
    existing.style.display = 'none';
    return;
  }

  existing.style.display = '';
  const position = cubeOwner === null ? 'center' : cubeOwner === myColor ? 'bottom' : 'top';

  existing.innerHTML = `
    <div class="bgg-cube bgg-cube-${position}">
      <div class="bgg-cube-face">
        <span class="bgg-cube-val">${cubeValue}</span>
      </div>
    </div>
  `;
}

export function createCubeStyles() {
  return `
    .bgg-cube-display { position:absolute;z-index:4;pointer-events:none; }
    .bgg-cube-center { top:50%;right:8px;transform:translateY(-50%); }
    .bgg-cube-top { top:8px;right:8px; }
    .bgg-cube-bottom { bottom:8px;right:8px; }
    .bgg-cube-face {
      width:32px;height:32px;border-radius:6px;
      background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(139,92,246,0.05));
      border:1.5px solid rgba(139,92,246,0.4);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 2px 8px rgba(139,92,246,0.2);
    }
    .bgg-cube-val { font-size:14px;font-weight:900;color:var(--purple-light); }
  `;
}
