/* =========================================================
   The Dancer's Desk, the countdown page
   ---------------------------------------------------------
   Its own stylesheet rather than the site's, because this page
   has one job and should stay light: a visitor on a phone from
   a TikTok link is the whole audience, and the site's full
   stylesheet carries a great deal this page never uses.

   Brand tokens repeated here on purpose, for the same reason.
   ========================================================= */

:root{
  --bone:#F5F1E8;
  --paper:#FBF9F5;
  --ink:#2B2622;
  --ink-80:#57504A;
  --ink-60:#857D75;
  --line:#E2DCD1;
  --blue:#2E5090;
  --blue-soft:#9DBEDC;
  --display:'Figtree','Helvetica Neue',sans-serif;
  --round:'Quicksand','Figtree',sans-serif;
  --label:'Space Grotesk',ui-monospace,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bone); color:var(--ink);
  font-family:var(--display); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.dot{ color:var(--ink-60); }

/* the star field sits behind everything and never catches a tap */
#sky{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.soon{
  position:relative; z-index:1;
  max-width:760px; margin:0 auto;
  padding:clamp(1.6rem,5vw,3rem) clamp(1.2rem,5vw,2rem) clamp(3rem,8vw,5rem);
  display:grid; gap:clamp(2.5rem,7vw,4.5rem);
}

/* ---------------- wordmark ---------------- */
.soon__top{ display:flex; justify-content:center; }
.wordmark{ text-decoration:none; color:var(--ink); display:inline-grid; justify-items:center; gap:.1rem; }
.wordmark__mark{
  font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
}
.wordmark__lock{ position:relative; display:inline-block; }
.wordmark__strong{ font-size:1.5rem; font-weight:800; letter-spacing:-.045em; line-height:.95; }
.wordmark__barre{
  display:block; position:relative; height:2px; background:var(--ink); margin-top:5px;
}
.wordmark__barre::before,.wordmark__barre::after{
  content:''; position:absolute; top:0; width:2px; height:9px; background:var(--ink);
}
.wordmark__barre::before{ left:0; }
.wordmark__barre::after{ right:0; }

/* ---------------- hero ---------------- */
.soon__hero{ text-align:center; display:grid; gap:1.1rem; justify-items:center; }
.eyebrow{
  margin:0; font-family:var(--label); font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-60);
}
.soon__title{
  margin:0; font-size:clamp(2.6rem,10vw,4.6rem); font-weight:800;
  letter-spacing:-.05em; line-height:.96; text-wrap:balance;
}
.soon__title span{ display:block; }
.soon__accent{ color:var(--blue); }
.soon__lede{
  margin:.2rem 0 0; max-width:46ch; font-size:1.05rem; line-height:1.65; color:var(--ink-80);
}
.soon__lede strong{ color:var(--ink); font-weight:800; }

/* ---------------- the clock ---------------- */
.clock{
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-top:.6rem;
}
.clock[hidden]{ display:none; }
.clock__unit{
  min-width:4.6rem; padding:.75rem .5rem .6rem;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  display:grid; gap:.1rem;
}
.clock__unit strong{
  font-size:1.8rem; font-weight:800; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.clock__unit span{
  font-family:var(--label); font-size:.54rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}

/* ---------------- notify ---------------- */
.notify{
  margin-top:.8rem; width:min(430px,100%);
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.notify input{
  flex:1; min-width:11rem; padding:.85rem 1rem; border-radius:10px;
  border:1px solid var(--line); background:var(--paper);
  font:inherit; font-size:1rem; color:var(--ink);
}
.notify input::placeholder{ color:var(--ink-60); }
.notify input:focus{ outline:2px solid var(--blue-soft); outline-offset:1px; }
.btn{
  border:0; border-radius:10px; padding:.85rem 1.3rem; cursor:pointer;
  font-family:var(--label); font-size:.68rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:transform .18s ease, background .18s ease;
}
.btn--ink{ background:var(--ink); color:var(--bone); }
.btn--ink:hover{ transform:translateY(-1px); background:#3a332d; }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.notify__fine{
  margin:0; max-width:42ch; font-size:.85rem; line-height:1.5; color:var(--ink-60);
}
.notify__msg{
  margin:0; min-height:1.2em;
  font-family:var(--label); font-size:.64rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
.notify__msg.is-good{ color:#2E7D5B; }
.notify__msg.is-warn{ color:#9A4A3C; }

/* ---------------- the game ---------------- */
.game{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:clamp(1.4rem,5vw,2.2rem);
  display:grid; gap:1.2rem; justify-items:center; text-align:center;
}
.game__head{ display:grid; gap:.5rem; justify-items:center; }
.game__title{ margin:0; font-size:clamp(1.3rem,4vw,1.7rem); font-weight:800; letter-spacing:-.03em; }
.game__sub{ margin:0; max-width:44ch; font-size:.92rem; line-height:1.55; color:var(--ink-80); }
.game__stage{ display:grid; gap:1rem; justify-items:center; }
#turns{ width:min(320px,78vw); height:min(320px,78vw); touch-action:manipulation; cursor:pointer; }
.game__tap{
  min-width:9rem; padding:.8rem 1.4rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:var(--bone);
  font-family:var(--label); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:transform .1s ease;
}
.game__tap:active{ transform:scale(.97); }
.game__scores{ display:flex; gap:2.2rem; }
.game__scores div{ display:grid; gap:.1rem; }
.game__scores strong{ font-size:1.6rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.game__scores span{
  font-family:var(--label); font-size:.54rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}
.game__note{ margin:0; max-width:40ch; font-size:.88rem; line-height:1.5; color:var(--ink-60); font-style:italic; }

/* ---------------- foot ---------------- */
.soon__foot{ text-align:center; }
.soon__foot p{
  margin:0; font-family:var(--label); font-size:.58rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-60);
}
.soon__foot a{ color:var(--ink-60); }
.soon__foot a:hover{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .btn, .game__tap{ transition:none; }
}