/* ---------------- Board & Pieces Styles ---------------- */
 .board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 120px);  /* updated */
    grid-template-rows: repeat(5, 120px);     /* updated */
    gap: 2px;
    width: calc(5 * 120px + 4 * 2px);          /* updated */
    height: calc(5 * 120px + 4 * 2px);         /* updated */
    /* margin: 20px auto;*/
    margin: auto 5px;
    border: 2px solid #333;
    background: #ddd;
  }
  h1{
    text-align: center;
    font-size: 2em;
  }
  .cell {
    width: 120px;  /* updated */
    height: 120px; /* updated */
    background: #f0f0f0;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  .piece {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.5s ease;
  }
  /* Piece Colors */
  .red   { background: radial-gradient(circle at 30% 30%, #ff4d4d, #cc0000); }
  .blue  { background: radial-gradient(circle at 30% 30%, #4d94ff, #003399); }
  .green { background: radial-gradient(circle at 30% 30%, #66ff66, #009900); }
  .yellow{ background: radial-gradient(circle at 30% 30%, #ffff66, #cccc00); }
  
  /* ---------------- Tetrahedron Dice Styles ---------------- */
  :root {
    --size: 200px;
    /* Coordinates for an equilateral triangle inscribed in a 200px square */
    --triangle-top: 6.7%;
    --triangle-bottom: 93.3%;
    /* Centroid of the equilateral triangle */
    --centroid-y: 64.43%;
    --dot-size: 25px;
    --dot-margin: 5px;
    --animation-duration: 1s;
  }
  /* Basic reset for dice area */
  #dice-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Dice Container */
  #dice-container {
    text-align: center;
    margin: 20px auto 40px;
  }
  /* Dice Roll Controls */
  #roll-btn, #result-btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    margin: 10px;
  }
  #roll-btn {
    background: #4a90e2;
    color: white;
  }
  #roll-btn:hover {
    background: #357ab8;
  }
  #roll-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  #result-btn {
    background: #e67e22;
    color: white;
  }
  #result-btn:hover:enabled {
    background: #d35400;
  }
  #result-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* Tetrahedron Container & Faces */
  .tetrahedron {
    width: var(--size);
    height: var(--size);
    margin: 20px auto;
    transform-style: preserve-3d;
  }
  .face {
    position: absolute;
    width: var(--size);
    height: var(--size);
    clip-path: polygon(50% var(--triangle-top), 0% var(--triangle-bottom), 100% var(--triangle-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    border: 1px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  .face.face1 { 
    background: #e74c3c;
    transform: rotateY(0deg) translateZ(calc(var(--size) / 2));
  }
  .face.face2 { 
    background: #f1c40f;
    transform: rotateY(120deg) translateZ(calc(var(--size) / 2));
  }
  .face.face3 { 
    background: #2ecc71;
    transform: rotateY(-120deg) translateZ(calc(var(--size) / 2));
  }
  .face.face4 { 
    background: #3498db;
    transform: rotateX(90deg) translateZ(calc(var(--size) / 2));
  }
  /* After rolling, only show the front face */
  .tetrahedron.show-only-front .face:not(.face1) {
    opacity: 0;
  }
  /* Rolling animation */
  .rolling {
    animation: rollAnim var(--animation-duration) linear forwards;
  }
  @keyframes rollAnim {
    0%   { transform: rotateY(0deg) rotateX(0deg); }
    14.285% { transform: rotateY(360deg) rotateX(0deg); }
    28.57% { transform: rotateY(360deg) rotateX(360deg); }
    42.85% { transform: rotateY(0deg) rotateX(360deg); }
    57.14% { transform: rotateY(360deg) rotateX(360deg); }
    71.43% { transform: rotateY(360deg) rotateX(0deg); }
    85.71% { transform: rotateY(0deg) rotateX(0deg); }
    100% { transform: rotateY(360deg) rotateX(0deg); }
  }
  /* Dots for dice face */
  .dots {
    position: absolute;
    left: 50%;
    top: var(--centroid-y);
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    pointer-events: none;
  }
  .dot {
    width: var(--dot-size);
    height: var(--dot-size);
    background: black;
    border-radius: 50%;
    margin: auto 10px; /* increased margin between dots */
  }

  /* New styles for special board cells */
  .cell.red-home { background: #ffe5e5; }        /* Light Red */
  .cell.blue-home { background: #e5f0ff; }       /* Light Blue */
  .cell.green-home { background: #e5ffe5; }      /* Light Green */
  .cell.yellow-home { background: #ffffe5; }     /* Light Yellow */
  .cell.center-cell {
    /* Updated to use light colors as well */
    background: conic-gradient(#ffe5e5 0deg 90deg, #e5f0ff 90deg 180deg, #e5ffe5 180deg 270deg, #ffffe5 270deg 360deg);
  }

  /* New container to display board and dice side by side */
  .game-container {
    display: flex;
    justify-content: center;
    align-items: center; /* changed from flex-start */
    gap: 20px;
    margin: 20px;
  }
  /* Optionally adjust dice container */
  #dice-container {
    /* Ensure dice container fits its contents */
    width: 220px;
    /* Remove auto centering so it's aligned next to board */
    margin: 0;
  }