/* D&D component presentation; shared primitives are canonical /ui assets. */
html,
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#tiles,
.hank-tiles,
.hank-tile-stage,
.hank-page {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  box-sizing: border-box;
}

.hank-page-safe-bottom {
  padding-bottom: 140px;
}

.hank-button,
button.hank-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-height: 72px;
  height: auto;
  padding: 16px 24px;
  box-sizing: border-box;
  border-radius: 16px;
  font: inherit;
  cursor: pointer;
  color: #f4f7f2;
}

.hank-button.danger-button,
button.hank-button.danger-button {
  background: #7a1c1c;
  color: #fff;
}

.hank-info-box textarea {
  width: 100%;
}

.hank-flip-card-face {
  -webkit-backface-visibility: hidden;
}

.hank-flip-card-front {
  transform: rotateY(0deg);
}

/* Keep the D&D product mark attached to the H.A.N.K. masthead without allowing
   the historical absolute desktop offsets to push it outside narrow viewports. */
.hank-app-badge {
  left: auto !important;
  right: clamp(24px, 8vw, 140px) !important;
  top: clamp(108px, 9vw, 138px) !important;
  transform: rotate(10deg) !important;
  font-size: clamp(38px, 5vw, 72px) !important;
  max-width: calc(100vw - 48px);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .hank-app-badge {
    right: max(20px, env(safe-area-inset-right, 0px)) !important;
    top: clamp(112px, 29vw, 154px) !important;
    font-size: clamp(34px, 10vw, 48px) !important;
  }
}