/* comingsoon.css — SPEC phase 7: the friendly "coming soon" screen.
   Consistent with home.css / gate.css: warm palette, Baloo 2, soft rounded
   card, gentle shadows. A blocking overlay with one big "back home" button. */

:root {
  --cs-card:#FFFFFF; --cs-stage:#FBF5EA;
  --cs-ink:#44403C; --cs-ink-soft:#7C746C;
  --cs-wood-deep:#A85F1E; --cs-teal:#38B2AC; --cs-sec-teal:#D6F0EE;
  --cs-shadow-lift:0 16px 34px rgba(80,60,40,.16);
  --cs-shadow-soft:0 6px 14px rgba(80,60,40,.10);
}

.cs-overlay {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,6vw,48px);
  background:rgba(48,36,24,.46);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  font-family:'Baloo 2', system-ui, sans-serif;
  animation:cs-fade .18s ease;
}
@keyframes cs-fade { from { opacity:0; } to { opacity:1; } }

.cs-card {
  width:100%;
  max-width:400px;
  background:var(--cs-card);
  border-radius:28px;
  box-shadow:var(--cs-shadow-lift);
  padding:clamp(28px,7vw,42px) clamp(24px,6vw,36px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,3vh,22px);
  text-align:center;
  animation:cs-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cs-pop { from { transform:scale(.9); opacity:0; } to { transform:scale(1); opacity:1; } }

/* soft round emblem holding the sparkle */
.cs-emblem {
  width:clamp(84px,24vw,104px);
  height:clamp(84px,24vw,104px);
  border-radius:50%;
  background:radial-gradient(circle at 50% 36%, #E7F7F5 0%, var(--cs-sec-teal) 100%);
  box-shadow:var(--cs-shadow-soft), inset 0 3px 8px rgba(255,255,255,.7);
  display:grid;
  place-items:center;
  font-size:clamp(2.4rem,10vw,3.2rem);
  line-height:1;
}

.cs-title {
  margin:0;
  font-weight:800;
  font-size:clamp(2rem,9vw,2.6rem);
  color:var(--cs-wood-deep);
  line-height:1;
}

.cs-sub {
  margin:0;
  font-weight:600;
  font-size:clamp(1rem,4vw,1.15rem);
  color:var(--cs-ink-soft);
  line-height:1.4;
}

.cs-back {
  margin-top:clamp(4px,1vh,10px);
  border:none;
  cursor:pointer;
  border-radius:20px;
  padding:clamp(12px,3vw,16px) clamp(28px,8vw,44px);
  background:radial-gradient(circle at 50% 34%, #E7F7F5 0%, var(--cs-sec-teal) 100%);
  box-shadow:var(--cs-shadow-soft);
  font-family:inherit;
  font-weight:800;
  font-size:clamp(1.1rem,4.6vw,1.35rem);
  color:var(--cs-wood-deep);
  transition:transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.cs-back:active { transform:scale(.95); box-shadow:var(--cs-shadow-lift); }