/*
 * Flow Game Dice — front-end widget styles.
 * Everything is scoped under .fgd-dice so it never touches the host theme.
 */

.fgd-dice {
  --fgd-east: #006da3;
  --fgd-ink: #2b2f33;
  --fgd-ink-strong: #1f2326;
  --fgd-text-soft: rgba(43, 47, 51, 0.66);
  --fgd-bg: #faf8f3;
  --fgd-surface: #ffffff;
  --fgd-line: rgba(43, 47, 51, 0.12);
  --fgd-focus: rgba(0, 109, 163, 0.4);
  --fgd-radius-card: 16px;
  --fgd-radius-control: 10px;
  --fgd-shadow-card: 0 10px 30px rgba(43, 47, 51, 0.1);

  box-sizing: border-box;
  width: min(100%, 920px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2.2vw, 22px);
  border: 1px solid var(--fgd-line);
  border-radius: var(--fgd-radius-card);
  background: var(--fgd-surface);
  box-shadow: var(--fgd-shadow-card);
  color: var(--fgd-ink);
  font-family: inherit;
  line-height: 1.5;
}

.fgd-dice *,
.fgd-dice *::before,
.fgd-dice *::after {
  box-sizing: border-box;
}

/*
 * "Bare" skin: drop the card chrome and the framed stage so the die floats on a
 * transparent background with the controls below. The die keeps its real 3D
 * contact shadow, so it still reads as grounded.
 */
.fgd-dice--bare {
  width: min(100%, 600px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/*
 * Full alignment: useful for Shortcode blocks that do not expose WordPress'
 * native full-width alignment control. In block themes with global padding,
 * this breaks out to the padded content edges without requiring theme CSS.
 */
.fgd-dice.fgd-dice--align-full {
  width: 100%;
  max-width: none;
}

:where(.has-global-padding) > .fgd-dice.fgd-dice--align-full {
  width: calc(100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px));
  margin-left: calc(0px - var(--wp--style--root--padding-left, 0px));
  margin-right: calc(0px - var(--wp--style--root--padding-right, 0px));
}

.fgd-dice--bare .fgd-dice__stage {
  height: clamp(330px, 48vh, 480px);
  border: 0;
  border-radius: 0;
  background: none;
}

/*
 * Bare skin always stacks: Roll + reset on the first row, result below. The
 * controls stay compact and centered under the die rather than stretching to
 * the full stage width.
 */
.fgd-dice--bare .fgd-dice__controls {
  grid-template-columns: minmax(0, 1fr) 46px;
  width: 100%;
  max-width: 240px;
  margin-inline: auto;
}

.fgd-dice--bare .fgd-dice__roll {
  width: 100%;
}

.fgd-dice--bare .fgd-dice__result {
  grid-column: 1 / -1;
  width: 100%;
}

.fgd-dice button:focus-visible,
.fgd-dice [tabindex]:focus-visible {
  outline: 3px solid var(--fgd-focus);
  outline-offset: 3px;
}

.fgd-dice__title {
  margin: 0;
  color: var(--fgd-ink-strong);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
}

.fgd-dice__stage {
  position: relative;
  height: clamp(380px, 64vh, 620px);
  overflow: hidden;
  border: 1px solid var(--fgd-line);
  border-radius: var(--fgd-radius-control);
  background:
    radial-gradient(circle at 50% 74%, rgba(43, 47, 51, 0.12), rgba(43, 47, 51, 0) 34%),
    linear-gradient(180deg, #ffffff, #f5f2ea);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.fgd-dice__stage:focus {
  outline: none;
}

.fgd-dice__stage.is-dragging {
  cursor: grabbing;
}

.fgd-dice__stage.is-rolling {
  cursor: default;
}

.fgd-dice__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fgd-dice__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--fgd-text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fgd-dice__loading::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--fgd-line);
  border-top-color: var(--fgd-east);
  animation: fgd-dice-spin 0.8s linear infinite;
}

.fgd-dice__loading[hidden] {
  display: none;
}

@keyframes fgd-dice-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fgd-dice__loading::before {
    animation: none;
  }
}

@media (max-width: 680px) {
  .fgd-dice--bare.fgd-dice--align-full {
    --fgd-stage-overscan: clamp(16px, 6vw, 28px);
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    .fgd-dice--bare.fgd-dice--align-full {
      overflow-x: clip;
    }
  }

  .fgd-dice--bare.fgd-dice--align-full .fgd-dice__stage {
    width: calc(100% + var(--fgd-stage-overscan) + var(--fgd-stage-overscan));
    margin-left: calc(0px - var(--fgd-stage-overscan));
    margin-right: calc(0px - var(--fgd-stage-overscan));
  }
}

.fgd-dice__controls {
  display: grid;
  grid-template-columns: minmax(120px, auto) 46px minmax(96px, 1fr);
  align-items: center;
  gap: 12px;
}

.fgd-dice__roll,
.fgd-dice__reset {
  min-width: 120px;
  min-height: 46px;
  border: 1px solid var(--fgd-ink-strong);
  border-radius: var(--fgd-radius-control);
  background: var(--fgd-ink-strong);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.fgd-dice__reset {
  min-width: 46px;
  width: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fgd-surface);
  color: var(--fgd-ink-strong);
}

.fgd-dice__reset-icon {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.35;
}

.fgd-dice__roll:hover,
.fgd-dice__reset:hover {
  border-color: var(--fgd-east);
}

.fgd-dice__roll:hover {
  background: var(--fgd-east);
}

.fgd-dice__reset:hover {
  color: var(--fgd-east);
}

.fgd-dice__roll:active,
.fgd-dice__reset:active {
  transform: translateY(1px);
}

.fgd-dice__roll:disabled {
  cursor: wait;
  opacity: 0.62;
}

.fgd-dice__reset:disabled {
  border-color: var(--fgd-line);
  color: var(--fgd-text-soft);
  cursor: default;
  opacity: 0.46;
}

.fgd-dice__reset:disabled:hover {
  border-color: var(--fgd-line);
  color: var(--fgd-text-soft);
}

.fgd-dice__reset:disabled:active {
  transform: none;
}

.fgd-dice__result {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fgd-line);
  border-radius: var(--fgd-radius-control);
  background: var(--fgd-bg);
  color: var(--fgd-ink-strong);
  font-size: 0.94rem;
  font-weight: 700;
}

.fgd-dice__result.is-hidden {
  visibility: hidden;
}

@media (max-width: 680px) {
  .fgd-dice {
    width: 100%;
    padding: 0;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }

  .fgd-dice--bare {
    width: 100%;
  }

  .fgd-dice__stage {
    border-radius: 0;
    border-inline: 0;
  }
}

@media (max-width: 440px) {
  .fgd-dice__controls {
    grid-template-columns: minmax(0, 1fr) 46px;
  }

  .fgd-dice__result {
    grid-column: 1 / -1;
    width: 100%;
  }

  .fgd-dice__roll {
    width: 100%;
  }
}