body.release-pending { background: #17223a; }

body.release-pending .app,
body.release-pending .modal-shade,
body.release-pending .call-overlay,
body.release-pending .toast { visibility: hidden; }

.release-gate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(18px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  color: #f9f2e8;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 24%),
    radial-gradient(circle at 82% 70%, rgba(62,131,181,.16), transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.025) 31px 32px),
    #17223a;
}

.release-gate[hidden] { display: none; }

.release-gate::before,
.release-gate::after {
  content: "";
  position: fixed;
  width: 170px;
  height: 90px;
  border: 4px solid rgba(213,184,52,.68);
  border-color: rgba(213,184,52,.68) transparent transparent;
  border-radius: 50%;
  pointer-events: none;
}

.release-gate::before { top: 7vh; left: -38px; transform: rotate(18deg); }
.release-gate::after { right: -52px; bottom: 8vh; border-color: rgba(202,94,141,.7) transparent transparent; transform: rotate(-31deg); }

.release-sheet {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(18px, 4vw, 34px);
  border: 3px solid #302b28;
  border-radius: 2% 4% 3% 2% / 4% 2% 5% 3%;
  color: #302b28;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(80,70,60,.045) 30px 31px),
    #fffaf0;
  box-shadow: 9px 10px 0 rgba(0,0,0,.55);
  transform: rotate(-.18deg);
}

.release-sheet::after {
  content: "";
  position: absolute;
  inset: 7px 6px 5px 8px;
  border: 1px solid rgba(48,43,40,.3);
  border-radius: 4% 2% 3% 5%;
  pointer-events: none;
}

.release-kicker {
  margin-bottom: 8px;
  color: #c93c45;
  font: 900 .75rem "Courier New", monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.release-heading {
  max-width: none;
  margin: 0 0 8px;
  font-size: clamp(3.2rem, 11vw, 6rem);
  line-height: .9;
  transform: rotate(-1deg);
}

.release-intro { max-width: 48ch; margin-bottom: 18px; font-size: clamp(.95rem, 2vw, 1.08rem); }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 1.6vw, 12px);
  margin: 12px 0 8px;
}

.countdown__unit {
  min-width: 0;
  padding: clamp(9px, 2.5vw, 17px) 4px 8px;
  border: 2px solid #302b28;
  background: #fff0b7;
  box-shadow: 3px 3px 0 #302b28;
  text-align: center;
  transform: rotate(var(--unit-tilt, -1deg));
}

.countdown__unit:nth-child(2) { --unit-tilt: 1deg; background: #e1f0f9; }
.countdown__unit:nth-child(3) { --unit-tilt: -.5deg; background: #f8dfe9; }
.countdown__unit:nth-child(4) { --unit-tilt: 1.2deg; background: #e8f2da; }
.countdown__unit b { display: block; overflow: hidden; font: 1000 clamp(1.8rem, 8vw, 3.5rem)/1 "Courier New", monospace; }
.countdown__unit span { display: block; margin-top: 4px; color: #756b63; font-size: clamp(.63rem, 2vw, .8rem); font-weight: 900; }

.release-date { margin: 6px 0 18px; color: #756b63; font: 900 .76rem "Courier New", monospace; text-align: right; }

.waiting-lab {
  display: grid;
  grid-template-columns: minmax(140px, .72fr) minmax(0, 1.28fr);
  gap: clamp(12px, 3vw, 24px);
  align-items: center;
  margin-top: 12px;
}

.waiting-thing {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 175px;
}

.waiting-thing::before,
.waiting-thing::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border: 3px dashed #3e83b5;
  border-radius: 46% 54% 48% 52%;
  animation: waiting-orbit 13s linear infinite;
}

.waiting-thing::after { width: 156px; height: 106px; border-color: #df7e38; animation-direction: reverse; animation-duration: 9s; }

.waiting-thing__button {
  z-index: 2;
  display: grid;
  place-items: center;
  width: 96px;
  min-width: 96px;
  height: 96px;
  border: 3px solid #302b28;
  border-radius: 50%;
  background: #fff;
  box-shadow: 5px 5px 0 #302b28;
  font: 1000 2.4rem "Segoe Print", cursive;
  cursor: pointer;
}

.waiting-thing__button.is-thinking { animation: thing-think .55s ease; }
.waiting-controls { min-width: 0; }
.waiting-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.waiting-button {
  position: relative;
  flex: 1 1 150px;
  min-height: 52px;
  padding: 9px 12px;
  border: 0;
  background: #fff;
  font-weight: 1000;
  cursor: pointer;
}

.waiting-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 2px solid #302b28;
  border-radius: 45% 55% 48% 52% / 55% 45% 54% 46%;
}

.waiting-button--red { color: #fff; background: #c93c45; }
.waiting-button.is-knocking { animation: door-knock .38s ease; }

.waiting-response {
  min-height: 55px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 2px dashed #302b28;
  background: rgba(255,255,255,.72);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
}

.waiting-progress { height: 12px; margin-top: 10px; overflow: hidden; border: 2px solid #302b28; border-radius: 50%; background: #fff; }
.waiting-progress i { display: block; width: 0; height: 100%; background: #c93c45; transition: width .2s ease; }
.waiting-note { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #756b63; font-size: .72rem; }

.gate-effects { position: fixed; z-index: 1002; inset: 0; overflow: hidden; pointer-events: none; }
.gate-spark { position: fixed; color: #d5b834; font-style: normal; font-weight: 1000; animation: gate-spark-out .85s ease-out forwards; }
.gate-goose { position: fixed; left: -70px; bottom: 12vh; font-size: 2.8rem; animation: gate-goose-run 3.4s linear forwards; }
.release-gate.is-opening .release-sheet { animation: gate-open 1.05s ease-in forwards; }

@keyframes waiting-orbit { to { transform: rotate(360deg); } }
@keyframes thing-think { 35% { transform: rotate(-8deg) scale(.92); } 70% { transform: rotate(8deg) scale(1.06); } }
@keyframes door-knock { 25%, 75% { transform: translateX(-4px) rotate(-1deg); } 50% { transform: translateX(4px) rotate(1deg); } }
@keyframes gate-spark-out { to { opacity: 0; transform: translate(var(--gate-x), var(--gate-y)) rotate(180deg) scale(.5); } }
@keyframes gate-goose-run { from { transform: translateX(0) rotate(-7deg); } to { transform: translateX(calc(100vw + 150px)) rotate(8deg); } }
@keyframes gate-open { 55% { transform: rotate(1deg) scale(1.02); } 100% { opacity: 0; transform: translateY(-35px) rotate(-2deg) scale(.96); } }

@media (max-width: 620px) {
  .release-gate { place-items: start center; padding-top: max(14px, env(safe-area-inset-top)); }
  .release-sheet { padding: 17px 14px 18px; }
  .release-heading { font-size: clamp(3rem, 17vw, 4.4rem); }
  .waiting-lab { grid-template-columns: 1fr; gap: 3px; }
  .waiting-thing { min-height: 134px; }
  .waiting-thing::before { width: 106px; height: 106px; }
  .waiting-thing::after { width: 132px; height: 86px; }
  .waiting-thing__button { width: 78px; min-width: 78px; height: 78px; font-size: 2rem; }
  .waiting-button { flex-basis: 130px; }
  .waiting-note { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .waiting-thing::before,
  .waiting-thing::after,
  .gate-goose,
  .gate-spark,
  .release-gate.is-opening .release-sheet { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}