/* ASTLINE — the countdown before the game opens (soon.html) */
:root {
  --bg: #05060f; --txt: #eaf0ff; --dim: #8f9ac4; --c1: #4df3ff; --c2: #ff4f8b; --c3: #ffd34d;
  --font: "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--txt); font-family: var(--font); line-height: 1.5; }
body { background: radial-gradient(120% 80% at 50% 0%, #121a44 0%, #070a1c 55%, #05060f 100%) fixed; -webkit-text-size-adjust: 100%; }
.hidden { display: none !important; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

main {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

.logo svg { width: 112px; height: 65px; filter: drop-shadow(0 0 10px rgba(77, 243, 255, .65)); }
.logo h1 {
  margin: -2px 0 0; font-size: clamp(40px, 11vw, 64px); line-height: 1.05; font-weight: 900; letter-spacing: .16em; padding-left: .16em;
  background: linear-gradient(180deg, #fff 20%, #9fe9ff 60%, #4df3ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(77, 243, 255, .45));
}
.logo .tag { margin: 4px 0 0; color: var(--dim); font-size: 14px; letter-spacing: .34em; padding-left: .34em; }

.beta {
  margin: 26px 0 0; display: inline-block; padding: 4px 16px 4px calc(16px + .38em); border: 1.5px solid rgba(255, 79, 139, .7); border-radius: 999px;
  color: #ff8fbf; font-size: 13px; font-weight: 900; letter-spacing: .38em; background: rgba(255, 79, 139, .08); box-shadow: 0 0 18px rgba(255, 79, 139, .25);
}
.lead { margin: 16px 0 10px; font-size: clamp(16px, 4.4vw, 20px); font-weight: 800; letter-spacing: .08em; }

.count { display: flex; gap: clamp(6px, 2.2vw, 14px); justify-content: center; width: 100%; }
.count .u {
  flex: 1 1 0; max-width: 150px; min-width: 0; padding: clamp(10px, 2.6vw, 16px) 4px clamp(8px, 2vw, 12px); border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 30, 70, .82), rgba(10, 14, 34, .82)); border: 1px solid rgba(77, 243, 255, .28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35), 0 0 26px rgba(77, 243, 255, .1);
}
.count b {
  display: block; font-size: clamp(34px, 11.5vw, 76px); line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff 30%, #8fe8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(77, 243, 255, .5));
}
.count span { display: block; margin-top: 2px; color: var(--dim); font-size: clamp(11px, 3vw, 14px); font-weight: 800; letter-spacing: .12em; }
.count .u.tick b { animation: tick .5s ease-out; }
@keyframes tick { 0% { transform: translateY(-6%); opacity: .55; } 100% { transform: none; opacity: 1; } }
.soon { margin: 14px 0 0; font-size: clamp(20px, 6vw, 30px); font-weight: 900; color: var(--c1); letter-spacing: .08em; text-shadow: 0 0 18px rgba(77, 243, 255, .6); animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .55; } to { opacity: 1; } }

.when {
  margin: 18px 0 0; font-size: clamp(15px, 4.2vw, 19px); font-weight: 900; letter-spacing: .1em; color: #fff;
  padding: 7px 20px; border-radius: 12px; border: 1.5px solid rgba(255, 79, 139, .75); background: rgba(255, 79, 139, .1); box-shadow: 0 0 22px rgba(255, 79, 139, .22);
}
.when:empty { display: none; }
.play {
  margin: 20px 0 0; display: inline-block; padding: 14px 44px; border-radius: 14px; text-decoration: none; color: #04121a; font-size: 19px; font-weight: 900; letter-spacing: .1em;
  background: linear-gradient(180deg, #8ff7ff, #4df3ff); box-shadow: 0 0 28px rgba(77, 243, 255, .55);
}

.chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips li { padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(140, 170, 255, .28); background: rgba(12, 16, 36, .7); font-size: 13px; font-weight: 700; color: #cfe0ff; }

.social { margin: 30px 0 0; width: 100%; }
.social h2 { margin: 0 0 12px; font-size: 13px; font-weight: 800; color: var(--dim); letter-spacing: .14em; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sns {
  display: inline-flex; align-items: center; gap: 9px; min-width: 132px; justify-content: center; padding: 11px 18px; border-radius: 14px; text-decoration: none;
  color: #fff; font-weight: 800; font-size: 15px; background: rgba(12, 16, 36, .82); border: 1px solid rgba(140, 170, 255, .3); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sns svg { width: 22px; height: 22px; flex: none; }
.sns.yt svg { color: #ff3b3b; } .sns.tt svg { color: #fff; filter: drop-shadow(1.5px 1px 0 #ff2d6f) drop-shadow(-1.5px -1px 0 #25f4ee); } .sns.x svg { color: #fff; }
.sns:hover, .sns:focus-visible { transform: translateY(-2px); border-color: var(--c1); box-shadow: 0 0 20px rgba(77, 243, 255, .3); outline: none; }

footer { margin: 34px 0 0; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: #6f7aa6; }
footer a { color: #8f9ac4; text-decoration: none; } footer a:hover { color: #fff; }

@media (max-height: 640px) { .beta { margin-top: 14px; } .social { margin-top: 20px; } footer { margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .count .u.tick b, .soon { animation: none; } }
@media (max-width: 420px) {
  .links { flex-wrap: nowrap; gap: 8px; }
  .sns { flex: 1 1 0; min-width: 0; max-width: 170px; padding: 11px 6px; gap: 6px; font-size: 14px; }
  .sns svg { width: 20px; height: 20px; }
}