/*
 * Old Dudes D&D — Homepage D20 Roller
 */

.odr-launcher {
  position: fixed;
  left: max(17px, env(safe-area-inset-left));
  bottom: max(17px, env(safe-area-inset-bottom));
  z-index: 2147481500;

  width: 62px;
  height: 62px;
  padding: 3px;

  border: 1px solid rgba(218, 177, 89, .48);
  border-radius: 50%;

  background:
    radial-gradient(circle at 50% 45%,
      rgba(89, 43, 9, .92),
      rgba(8, 8, 10, .95) 72%);

  box-shadow:
    0 8px 24px rgba(0,0,0,.5),
    0 0 18px rgba(206,155,53,.13);

  cursor: pointer;
  appearance: none;
  touch-action: manipulation;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.odr-launcher img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.odr-launcher::after {
  content: "Roll a d20";

  position: absolute;
  left: calc(100% + 10px);
  top: 50%;

  padding: 7px 10px;

  border: 1px solid rgba(216,177,95,.35);
  border-radius: 999px;

  background: rgba(10,10,12,.93);
  color: #f6e5ba;

  white-space: nowrap;
  font: 700 .78rem/1 inherit;
  letter-spacing: .03em;

  box-shadow: 0 6px 18px rgba(0,0,0,.4);

  opacity: 0;
  transform: translate(-5px,-50%);
  pointer-events: none;

  transition:
    opacity .15s ease,
    transform .15s ease;
}

.odr-launcher:hover {
  transform: translateY(-3px) rotate(-4deg) scale(1.06);

  box-shadow:
    0 11px 28px rgba(0,0,0,.54),
    0 0 27px rgba(219,171,60,.3);
}

.odr-launcher:hover::after,
.odr-launcher:focus-visible::after {
  opacity: 1;
  transform: translate(0,-50%);
}

.odr-launcher:focus-visible {
  outline: 3px solid #fff2c5;
  outline-offset: 4px;
}

.odr-launcher:disabled {
  opacity: .48;
  cursor: default;
  transform: none;
}

.odr-stage {
  position: fixed;
  inset: 0;
  z-index: 2147481400;

  overflow: hidden;
  pointer-events: none;

  opacity: 1;
  transition: opacity .35s ease;
}

.odr-stage[hidden] {
  display: none;
}

.odr-stage-leaving {
  opacity: 0;
}

.odr-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.odr-result {
  position: fixed;
  z-index: 3;

  padding: 13px 18px;

  border: 1px solid rgba(222,183,99,.55);
  border-radius: 14px;

  text-align: center;

  background:
    linear-gradient(145deg,
      rgba(50,21,9,.97),
      rgba(10,10,12,.97));

  color: #fff3ce;

  box-shadow:
    0 13px 35px rgba(0,0,0,.55),
    0 0 26px rgba(199,139,39,.15);

  opacity: 0;
  transform: translateY(8px) scale(.96);

  transition:
    opacity .22s ease,
    transform .22s ease;
}

.odr-result strong {
  display: block;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;

  color: #f2ce72;
}

.odr-result span {
  display: block;
  margin-top: 5px;

  color: rgba(255,245,218,.8);
  font-size: .88rem;
}

.odr-result-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.odr-result.odr-nat20 {
  border-color: #f3cf68;

  box-shadow:
    0 13px 40px rgba(0,0,0,.6),
    0 0 42px rgba(245,191,52,.52);
}

.odr-result.odr-nat20 strong {
  color: #ffe38c;
  font-size: 1.65rem;
}

.odr-result.odr-nat1 {
  border-color: rgba(151,63,53,.75);
}

.odr-result.odr-nat1 strong {
  color: #e68b78;
  font-size: 1.65rem;
}

.odr-fumble {
  animation: odr-fumble .4s linear;
}

@keyframes odr-fumble {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (max-width: 640px) {
  .odr-launcher {
    width: 50px;
    height: 50px;

    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .odr-launcher::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .odr-launcher,
  .odr-result,
  .odr-stage {
    transition: none;
  }

  .odr-fumble {
    animation: none;
  }
}