html.test-phase-open,
html.test-phase-open body {
  overflow: hidden;
}

.test-phase-notice {
  margin: auto;
  max-width: 560px;
  padding: clamp(26px, 5vw, 42px);
  color-scheme: light;
  background: linear-gradient(135deg, #f1dfbc, #e4cba0);
  border-radius: 13px 7px 17px 8px;
  box-shadow: 7px 10px 0 #101e1970, inset 0 0 0 2px #fff0cc;
}

.test-phase-notice[open] {
  animation: test-phase-arrive 240ms cubic-bezier(.2, .7, .3, 1) both;
}

.test-phase-notice::backdrop {
  background: #13251eb8;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.test-phase-label {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid #725237;
  border-radius: 4px 7px 3px 5px;
  color: #543c29;
  font-size: .875rem;
  font-weight: 900;
  letter-spacing: .07em;
  transform: rotate(-2deg);
}

.test-phase-notice h2 {
  margin: 24px 0 20px;
  color: #493729;
  font-size: clamp(2.25rem, 6vw, 3rem);
  line-height: 1.08;
  text-wrap: balance;
}

.test-phase-notice p {
  font-size: 1rem;
  line-height: 1.65;
  color: #604c38;
}

.test-phase-notice .test-phase-money {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px dashed #a080555c;
}

.test-phase-notice .primary-button {
  min-height: 52px;
  margin-top: 26px;
  font-size: 1rem;
  color: #34271e;
}

.test-phase-notice .primary-button:focus-visible {
  outline: 3px dashed #674527;
}

.support-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.support-actions .primary-button,
.support-actions .support-secondary {
  margin: 0;
  min-height: 52px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 900;
}

.support-secondary {
  color: #543c29;
  background: #f6e8c9;
  border: 2px solid #725237;
  border-radius: 5px 9px 4px 7px;
  box-shadow: 2px 3px 0 #72523733;
}

.support-secondary:hover { background: #fff0cf; }
.support-secondary:focus-visible { outline: 3px dashed #674527; }

@keyframes test-phase-arrive {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .test-phase-notice[open] { animation: none; }
}
