/* ui/AdUnavailable — the one dialog for a rewarded ad that did not play.
   Contract: ./AdUnavailable.spec.md
   Styled like ui/TutorialOffer: a glass panel over a scrim, above every
   screen and dialog an ad can be offered from. */

.sp-adna {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  pointer-events: none;
}

.sp-adna__scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--sp-space-0) 60%, transparent);
  pointer-events: auto;
}

.sp-adna__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(400px, calc(100vw - 32px));
  padding: 18px 20px 18px;
  color: var(--sp-text);
  background: var(--sp-glass);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  box-shadow: 0 30px 90px -34px var(--sp-space-0);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  animation: sp-adna-in var(--sp-dur-fast, 160ms) ease-out;
}

@keyframes sp-adna-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.sp-adna__title {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sp-adna__text {
  margin: 0;
  color: var(--sp-text-dim);
  font-size: 0.95rem;
  line-height: 1.45;
}

.sp-adna__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.sp-adna__ok {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 28px;
  justify-content: center;
}

@media (max-width: 480px) {
  .sp-adna__ok { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-adna__panel { animation: none; }
}