.ludo-roll-panel {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 100%;
  margin: .85rem auto 0;
}

.ludo-roll-dice-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.ludo-roll-dice-row.is-overflowing {
  justify-content: flex-start;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.ludo-roll-card {
  display: grid;
  justify-items: center;
  align-content: center;
  border-radius: 1rem;
  width: 8.5rem;
  min-width: 8.5rem;
  min-height: 8.5rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.ludo-roll-die-card {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--cubiri-brand-purple) 46%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-purple) 38%, #17131f),
      color-mix(in srgb, var(--cubiri-brand-purple) 18%, #111217));
}

.ludo-roll-card-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}

.ludo-roll-die-face {
  display: grid;
  grid-template-columns: repeat(3, .58rem);
  grid-template-rows: repeat(3, .58rem);
  gap: .28rem;
  place-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-top: .7rem;
  border: 1px solid color-mix(in srgb, var(--cubiri-brand-purple) 64%, white 12%);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--cubiri-brand-purple) 14%, transparent);
}

.ludo-roll-pip {
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
}

.ludo-roll-pip.is-on {
  background: #fff;
  box-shadow: 0 0 .35rem rgba(255,255,255,.28);
}

.ludo-roll-summary-card {
  width: 8.5rem;
  min-width: 8.5rem;
  min-height: 8.5rem;
  padding: .95rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--cubiri-brand-orange) 58%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-orange) 28%, #21150f),
      color-mix(in srgb, var(--cubiri-brand-orange) 12%, #131313));
}

.ludo-roll-summary-card .ludo-roll-card-label,
.ludo-roll-summary-total,
.ludo-roll-summary-status {
  color: var(--cubiri-brand-orange);
}

.ludo-roll-summary-total {
  margin-top: .1rem;
  font-size: clamp(2.6rem, 10vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ludo-roll-summary-status {
  min-height: 1em;
  margin-top: .35rem;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.ludo-roll-empty {
  padding: .8rem 1rem;
  color: color-mix(in srgb, currentColor 58%, transparent);
  text-align: center;
}

@media (max-width: 560px) {
  .ludo-roll-panel {
    gap: .62rem;
    margin-top: .45rem;
  }

  .ludo-roll-dice-row {
    gap: .42rem;
  }

  .ludo-roll-card,
  .ludo-roll-summary-card {
    width: 6rem;
    min-width: 6rem;
    min-height: 6rem;
    border-radius: .85rem;
  }

  .ludo-roll-die-card {
    padding: .5rem .3rem;
  }

  .ludo-roll-card-label {
    font-size: clamp(.56rem, 2.3vw, .66rem);
  }

  .ludo-roll-die-face {
    grid-template-columns: repeat(3, .42rem);
    grid-template-rows: repeat(3, .42rem);
    gap: .2rem;
    width: 2.95rem;
    height: 2.95rem;
    margin-top: .42rem;
    border-radius: .65rem;
  }

  .ludo-roll-pip {
    width: .42rem;
    height: .42rem;
  }

  .ludo-roll-summary-card {
    padding: .5rem .7rem;
  }

  .ludo-roll-summary-total {
    font-size: clamp(2.05rem, 9vw, 2.65rem);
  }

  .ludo-roll-summary-status {
    margin-top: .12rem;
    font-size: .64rem;
  }
}

@media (max-width: 390px) {
  .ludo-roll-card,
  .ludo-roll-summary-card {
    width: 5.6rem;
    min-width: 5.6rem;
    min-height: 5.6rem;
  }

  .ludo-roll-die-face {
    width: 2.7rem;
    height: 2.7rem;
    grid-template-columns: repeat(3, .38rem);
    grid-template-rows: repeat(3, .38rem);
    gap: .17rem;
  }

  .ludo-roll-pip {
    width: .38rem;
    height: .38rem;
  }
}