/* ===== Dice Tower: css/dice.css =====
   The "Roll the d20" section on the main page. Colors come from css/styles.css. */
.dice {
  background: var(--tower);
  color: var(--parchment);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.dice h2 {
  color: #fff;
}

.d20-stage {
  display: grid;
  justify-items: center;
  gap: .8rem;
}

.d20-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: min(280px, 72vw);
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.d20-btn:hover .d20-svg {
  filter: drop-shadow(0 0 14px rgba(240, 132, 44, .55));
}

.d20-btn:disabled {
  cursor: progress;
}

.d20-svg {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 52%;
  transition: filter .2s;
}

.d20-body {
  fill: var(--dragon);
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}

.d20-face {
  fill: var(--flame);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.d20-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.d20-num {
  font-family: var(--font-display);
  font-size: 46px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}

.rolling .d20-svg {
  animation: d20-tumble 1.3s cubic-bezier(.25, .7, .35, 1);
}

@keyframes d20-tumble {
  0% {
    transform: translateY(0) rotate(0) scale(1);
  }

  18% {
    transform: translateY(-46px) rotate(260deg) scale(1.1);
  }

  38% {
    transform: translateY(0) rotate(520deg) scale(.96);
  }

  52% {
    transform: translateY(-22px) rotate(690deg) scale(1.04);
  }

  68% {
    transform: translateY(0) rotate(820deg) scale(.98);
  }

  82% {
    transform: translateY(-8px) rotate(960deg) scale(1.01);
  }

  100% {
    transform: translateY(0) rotate(1080deg) scale(1);
  }
}

.d20-btn.crit .d20-body,
.d20-widget-btn.crit .d20-body {
  fill: var(--flame);
}

.d20-btn.crit .d20-svg,
.d20-widget-btn.crit .d20-svg {
  filter: drop-shadow(0 0 22px rgba(240, 132, 44, .9));
}

.d20-btn.fail .d20-body {
  fill: var(--steel);
}

.d20-result {
  margin: 0;
  min-height: 3.2em;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.d20-history {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .95rem;
  color: var(--blush);
}

.d20-history li {
  background: var(--tower-soft);
  border-radius: 999px;
  padding: .1rem .7rem;
}

.d20-widget {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 45;
  display: grid;
  justify-items: end;
  gap: .35rem;
}

.d20-widget-bubble {
  position: relative;
  max-width: min(270px, calc(100vw - 2rem));
  padding: .65rem 2rem .65rem .9rem;
  border: 3px solid var(--ink);
  border-radius: 1rem;
  background: #fff;
  color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  font-weight: 700;
  line-height: 1.25;
}

.d20-widget-bubble::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: -.65rem;
  width: .8rem;
  height: .8rem;
  background: #fff;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: skewY(35deg) rotate(18deg);
}

.d20-widget-bubble[hidden] {
  display: none;
}

.d20-widget-text {
  margin: 0;
}

.d20-widget-close {
  position: absolute;
  top: .15rem;
  right: .35rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font: 700 1.25rem/1 var(--font-body);
  cursor: pointer;
}

.d20-widget-close:hover {
  background: var(--parchment);
}

.d20-widget-close:focus-visible {
  outline: 2px solid var(--dragon);
  outline-offset: 1px;
}

.d20-widget-btn {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.d20-widget-btn .d20-svg {
  width: 100%;
  height: 100%;
}

.d20-widget-btn:hover .d20-svg {
  filter: drop-shadow(0 0 9px rgba(240, 132, 44, .75));
}

.d20-widget-btn:disabled {
  cursor: progress;
}

.d20-widget-btn:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 4px;
}

.page-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  overflow: hidden;
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: 1rem;
  background: radial-gradient(ellipse at center, var(--parchment), var(--paper) 72%);
  opacity: 1;
  transition: opacity .45s ease;
}

html.intro-active {
  overflow: hidden;
}

html.intro-active .page-intro {
  display: grid;
}

.page-intro.is-finished {
  opacity: 0;
  pointer-events: none;
}

.intro-message {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--tower);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  text-align: center;
}

.intro-die {
  position: relative;
  z-index: 2;
  width: min(210px, 48vw);
}

.intro-die .d20-svg {
  filter: drop-shadow(0 9px 10px rgba(27, 18, 16, .22));
}

.intro-die.is-rolling .d20-svg {
  animation: intro-d20-roll 1.2s cubic-bezier(.2, .7, .3, 1) both;
}

.intro-die.is-landed .d20-svg {
  animation: intro-d20-land .35s ease-out both;
}

.intro-die.is-landed .d20-body {
  fill: var(--flame);
}

@keyframes intro-d20-roll {
  0% {
    transform: translateY(0) rotate(0) scale(1);
  }

  24% {
    transform: translateY(-54px) rotate(300deg) scale(1.12);
  }

  52% {
    transform: translateY(8px) rotate(650deg) scale(.95);
  }

  76% {
    transform: translateY(-15px) rotate(900deg) scale(1.04);
  }

  100% {
    transform: translateY(0) rotate(1080deg) scale(1);
  }
}

@keyframes intro-d20-land {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.14);
  }

  100% {
    transform: scale(1);
  }
}

/* Fixed, click-through celebration layer: it never takes up space in the page layout. */
.six-seven-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.six-seven-gif {
  position: absolute;
  display: block;
  width: clamp(82px, 13vw, 175px);
  max-width: 28vw;
  height: auto;
  border: 2px solid var(--parchment);
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(27, 18, 16, .5);
  animation: six-seven-pop .35s cubic-bezier(.2, .8, .25, 1) both;
}

.six-seven-gif:nth-child(1) { top: 5%; left: 4%; --tilt: -10deg; }
.six-seven-gif:nth-child(2) { top: 9%; right: 5%; --tilt: 9deg; animation-delay: .04s; }
.six-seven-gif:nth-child(3) { top: 38%; left: 3%; --tilt: 7deg; animation-delay: .08s; }
.six-seven-gif:nth-child(4) { top: 42%; right: 3%; --tilt: -8deg; animation-delay: .12s; }
.six-seven-gif:nth-child(5) { bottom: 6%; left: 17%; --tilt: 8deg; animation-delay: .16s; }
.six-seven-gif:nth-child(6) { right: 17%; bottom: 5%; --tilt: -9deg; animation-delay: .2s; }

@keyframes six-seven-pop {
  from { opacity: 0; transform: rotate(var(--tilt)) scale(.45); }
  to { opacity: 1; transform: rotate(var(--tilt)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .six-seven-gif { animation: none; }
}

.intro-cards {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.intro-card {
  --card-accent: var(--dragon);
  position: absolute;
  top: -32vh;
  left: 16%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem;
  width: clamp(112px, 15vw, 160px);
  min-height: 205px;
  padding: .5rem;
  border: 3px solid var(--ink);
  border-radius: 9px;
  color: var(--ink);
  background: linear-gradient(145deg, #fffaf3, #e9d6bd);
  box-shadow: 3px 5px 0 rgba(27, 18, 16, .28);
  font: 700 .68rem/1.2 var(--font-body);
  opacity: 0;
}

.intro-card--ember {
  --card-accent: #a84227;
  left: 15%;
}

.intro-card--grove {
  --card-accent: #4c7041;
  left: 50%;
}

.intro-card--arcane {
  --card-accent: #486f9c;
  left: 82%;
}

.intro-card-cost {
  justify-self: end;
}

.intro-card-title {
  align-self: center;
}

.intro-card-art {
  grid-column: 1 / -1;
  min-height: 96px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: radial-gradient(circle at 52% 42%, #fff5ce 0 7%, transparent 8%),
    radial-gradient(ellipse at 50% 65%, var(--card-accent) 0 28%, transparent 29%),
    linear-gradient(145deg, var(--card-accent), #211c2c);
}

.intro-card-type {
  grid-column: 1 / -1;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--ink);
}

.intro-card-copy {
  grid-column: 1 / -1;
  font-weight: 400;
}

.intro-card-power {
  justify-self: end;
  padding: .1rem .3rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
}

.intro-cards.is-falling .intro-card {
  animation: intro-card-fall 1.35s cubic-bezier(.25, .65, .4, 1) both;
}

.intro-cards.is-falling .intro-card--grove {
  animation-delay: .12s;
}

.intro-cards.is-falling .intro-card--arcane {
  animation-delay: .24s;
}

@keyframes intro-card-fall {
  0% {
    opacity: 0;
    transform: translateY(-10vh) rotate(-12deg);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(145vh) rotate(22deg);
  }
}

.intro-skip {
  position: absolute;
  z-index: 3;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  padding: .5rem .9rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 .95rem var(--font-body);
  cursor: pointer;
}

.intro-skip:hover {
  background: var(--parchment);
}

.intro-skip:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .dice {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .d20-widget {
    right: .9rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .d20-widget-btn {
    width: 64px;
    height: 64px;
  }

  .order-body .d20-widget {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .intro-card--ember {
    left: 5%;
  }

  .intro-card--grove {
    left: 39%;
  }

  .intro-card--arcane {
    left: 73%;
  }

  .intro-card {
    width: clamp(92px, 26vw, 140px);
    min-height: 180px;
    font-size: .6rem;
  }

  .intro-card-art {
    min-height: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rolling .d20-svg {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-intro {
    transition-duration: .01ms;
  }

  .intro-die.is-rolling .d20-svg,
  .intro-die.is-landed .d20-svg,
  .intro-cards.is-falling .intro-card {
    animation: none;
  }

  .intro-cards.is-falling .intro-card {
    top: 1rem;
    opacity: 1;
  }
}