@layer components {
  /* Scene */
  .dice-scene{
    width: var(--dice-scene-size);
    height: var(--dice-scene-size);
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Cube */
  .dice{
    width: var(--dice-size);
    height: var(--dice-size);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s;
  }

  /* Faces */
  .dice-face{
    position: absolute;
    width: var(--dice-size);
    height: var(--dice-size);
    background: radial-gradient(circle at 30% 30%, var(--surface-white), var(--surface-gray-1) 70%, var(--surface-gray-2) 100%);
    border: 2px solid var(--edge-gray);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    padding: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* Position each face in 3D space (by side) */
  .dice-face[data-side="front"]  { transform: rotateY(0deg)   translateZ(calc(var(--dice-size) / 2)); }
  .dice-face[data-side="back"]   { transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); }
  .dice-face[data-side="right"]  { transform: rotateY(90deg)  translateZ(calc(var(--dice-size) / 2)); }
  .dice-face[data-side="left"]   { transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); }
  .dice-face[data-side="top"]    { transform: rotateX(90deg)  translateZ(calc(var(--dice-size) / 2)); }
  .dice-face[data-side="bottom"] { transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); }

  /* 3D cube-specific fixes: avoid corner artefacts during transforms */
  .dice .dice-face {
    box-sizing: border-box;
    overflow: hidden;
    background-clip: padding-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, filter;
    /* slightly reduce inset shadow for animated faces */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    /* use block as base so per-face layouts are explicit and predictable */
    display: block;
  }

  /* Make face-6 layout explicit for the cube using a 2x3 grid */
  .dice .dice-face[data-face="6"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
  }
  .dice .dice-face[data-face="6"] .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dice .dice-face[data-face="6"] .dot:nth-child(2) { grid-column: 1; grid-row: 2; }
  .dice .dice-face[data-face="6"] .dot:nth-child(3) { grid-column: 1; grid-row: 3; }
  .dice .dice-face[data-face="6"] .dot:nth-child(4) { grid-column: 2; grid-row: 1; }
  .dice .dice-face[data-face="6"] .dot:nth-child(5) { grid-column: 2; grid-row: 2; }
  .dice .dice-face[data-face="6"] .dot:nth-child(6) { grid-column: 2; grid-row: 3; }

  /* Render dots crisply on cube faces */
  .dice .dot {
    box-shadow: none;
    background: #333;
    z-index: 2;
    transform: translateZ(1px);
  }

  /* Ensure cube faces have the rounded border and consistent border color */
  .dice .dice-face {
    border-radius: 12px;
    border: 2px solid var(--edge-gray);
  }

  /* Dot styling */
  .dot{
    width: var(--dice-dot-size);
    height: var(--dice-dot-size);
    background: #333;
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* Dot layouts for each face (by face value) */
  /* Face 1: center dot */
  .dice-face[data-face="1"] {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
  }

  /* Face 2: two diagonal dots */
  .dice-face[data-face="2"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 12px;
  }
  .dice-face[data-face="2"] .dot:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
  .dice-face[data-face="2"] .dot:nth-child(2) { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }

  /* Face 3: three diagonal dots */
  .dice-face[data-face="3"] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 12px;
  }
  .dice-face[data-face="3"] .dot:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
  .dice-face[data-face="3"] .dot:nth-child(2) { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; }
  .dice-face[data-face="3"] .dot:nth-child(3) { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; }

  /* Face 4: four corner dots - 2x2 grid */
  .dice-face[data-face="4"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 12px;
    gap: 0;
  }
  .dice-face[data-face="4"] .dot:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
  .dice-face[data-face="4"] .dot:nth-child(2) { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
  .dice-face[data-face="4"] .dot:nth-child(3) { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; }
  .dice-face[data-face="4"] .dot:nth-child(4) { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }

  /* Face 5: five dots (corners + center) */
  .dice-face[data-face="5"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 12px;
    gap: 0;
  }
  .dice-face[data-face="5"] .dot:nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; }
  .dice-face[data-face="5"] .dot:nth-child(2) { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
  .dice-face[data-face="5"] .dot:nth-child(3) { grid-column: 1 / 3; grid-row: 1 / 3; align-self: center; justify-self: center; z-index: 1; }
  .dice-face[data-face="5"] .dot:nth-child(4) { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; }
  .dice-face[data-face="5"] .dot:nth-child(5) { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }

  /* Face 6: preview uses the same 2x3 grid for consistency */
  .dice-preview .dice-face[data-face="6"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
  }
  .dice-preview .dice-face[data-face="6"] .dot:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dice-preview .dice-face[data-face="6"] .dot:nth-child(2) { grid-column: 1; grid-row: 2; }
  .dice-preview .dice-face[data-face="6"] .dot:nth-child(3) { grid-column: 1; grid-row: 3; }
  .dice-preview .dice-face[data-face="6"] .dot:nth-child(4) { grid-column: 2; grid-row: 1; }
  .dice-preview .dice-face[data-face="6"] .dot:nth-child(5) { grid-column: 2; grid-row: 2; }
  .dice-preview .dice-face[data-face="6"] .dot:nth-child(6) { grid-column: 2; grid-row: 3; }

  /* Resting states */
  .dice.rest-1 { transform: rotateX(0deg) rotateY(0deg); }
  .dice.rest-2 { transform: rotateX(-90deg) rotateY(0deg); }
  .dice.rest-3 { transform: rotateX(0deg) rotateY(90deg); }
  .dice.rest-4 { transform: rotateX(0deg) rotateY(-90deg); }
  .dice.rest-5 { transform: rotateX(90deg) rotateY(0deg); }
  .dice.rest-6 { transform: rotateX(0deg) rotateY(180deg); }

  /* Roll animation */
  .dice.is-rolling { animation: diceRoll 1200ms cubic-bezier(.18,.75,.18,1.02) both; }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) { .dice.is-rolling { animation: none; } }

  /* Result display */
  .dice-result {
    text-align: center;
    margin-top: 2rem;
    font-size: 1.3rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .dice-result.show { opacity: 1; }
}