/* The first screen (owner, 2026-11-06; public/world/firstscreen.js, preview: design/first-screen-preview.html).
   Everything is under #fs-stage; the old first screen (#demo-cta-banner) is hidden while it shows
   and comes back with FIRST_SCREEN_V2 = false. */
#fs-stage { display: none; position: absolute; inset: 0; z-index: 24; overflow: hidden; pointer-events: none; color: #d6eaf2;
  font-family: 'Share Tech Mono', Consolas, monospace; transition: opacity 0.5s ease; }
#fs-stage.on { display: block; }
#fs-stage.out { opacity: 0; }
#fs-win, #fs-win * { pointer-events: auto; }
body.fs2 #demo-cta-banner, body.fs2 #demo-mission { display: none !important; }
/* the sign-up starts under the flash: nothing of the old first screen may show meanwhile */
body.fs-joining #demo-cta-banner, body.fs-joining #demo-mission { display: none !important; }
#fs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fs-stage .fs-crt { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.08) 2px 3px),
              radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.38) 100%); }
#fs-stage .fs-tag { position: absolute; left: 16px; bottom: 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .22em; color: rgba(215,244,246,.8); pointer-events: none; }
#fs-stage .fs-tag i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: fs-rec 1.2s steps(2) infinite; }
@keyframes fs-rec { 50% { opacity: .15; } }
@keyframes fs-blink { 50% { opacity: .25; } }

#fs-feed { position: absolute; left: 16px; bottom: 36px; width: min(430px, 60%); display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; line-height: 1.35; pointer-events: none; }
#fs-feed div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fs-feedin .35s ease-out; text-shadow: 0 0 6px rgba(0,0,0,.9); }
#fs-feed div:nth-last-child(n+4) { opacity: .55; } #fs-feed div:nth-last-child(n+5) { opacity: .3; } #fs-feed div:nth-last-child(n+6) { opacity: .12; }
#fs-feed .t { color: #7d97a6; } #fs-feed .k { letter-spacing: .08em; }
@keyframes fs-feedin { from { opacity: 0; transform: translateX(-10px); } }

#fs-boot { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(430px, 90%); font-size: 13px; line-height: 1.7; color: #37d5f5; text-shadow: 0 0 8px rgba(55,213,245,.7); pointer-events: none; }
#fs-boot div { opacity: 0; animation: fs-bootln .2s forwards; } #fs-boot b { color: #37f5a3; font-weight: 400; }
@keyframes fs-bootln { to { opacity: 1; } }

/* the window */
#fs-win { position: absolute; left: 50%; top: 8%; width: min(480px, calc(100% - 28px)); transform: translateX(-50%); opacity: 0; padding: 0 0 14px;
  background: linear-gradient(180deg, rgba(5,14,22,0.88), rgba(3,9,15,0.92)); backdrop-filter: blur(3px);
  border: 1px solid rgba(55,213,245,0.55); box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 34px rgba(55,213,245,0.22), inset 0 0 40px rgba(55,213,245,0.05); }
#fs-win.in { animation: fs-winin .7s cubic-bezier(.2,.9,.2,1) forwards; }
#fs-win.gone { animation: fs-wingone .45s ease-in forwards; }
@keyframes fs-winin { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scaleY(.92); filter: brightness(2.2) contrast(1.2); }
  12% { opacity: 1; transform: translateX(calc(-50% - 7px)); } 22% { transform: translateX(calc(-50% + 6px)); } 34% { transform: translateX(-50%); filter: none; } 100% { opacity: 1; transform: translateX(-50%); filter: none; } }
@keyframes fs-wingone { to { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.96); filter: brightness(2); } }
#fs-win::before, #fs-win::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid #00fff5; pointer-events: none; }
#fs-win::before { left: -4px; top: -4px; border-right: 0; border-bottom: 0; } #fs-win::after { right: -4px; bottom: -4px; border-left: 0; border-top: 0; }
#fs-win .fs-wbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 10.5px; letter-spacing: .2em; color: rgba(215,244,246,.75);
  border-bottom: 1px solid rgba(55,213,245,.2); background: rgba(55,213,245,.05); }
#fs-win .fs-wbar i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: fs-rec 1.2s steps(2) infinite; }
#fs-win .fs-wbar > span:nth-child(2) { white-space: nowrap; flex: 0 0 auto; }
#fs-win .fs-sig { margin-left: auto; color: #f5a337; animation: fs-blink 1.4s steps(2) infinite; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#fs-win .fs-body { padding: 16px 20px 0; text-align: center; }
#fs-win .fs-logo { width: 62px; height: 62px; margin: 0 auto 4px; display: block; filter: drop-shadow(0 0 14px rgba(224,91,216,.7)); animation: fs-float 4s ease-in-out infinite; }
@keyframes fs-float { 50% { transform: translateY(-3px); filter: drop-shadow(0 0 20px rgba(55,213,245,.8)); } }
#fs-win h1 { margin: 6px 0 0; font: 900 clamp(22px, 5.2vw, 35px)/1.08 'Orbitron', 'Chakra Petch', sans-serif; letter-spacing: .05em; color: #fff; text-shadow: 0 0 18px rgba(55,213,245,.55); text-wrap: balance; }
#fs-win h1 .fs-z { color: #e05bd8; text-shadow: 0 0 16px rgba(224,91,216,.9); display: inline-block; animation: fs-glitch 3.2s infinite; }
@keyframes fs-glitch { 0%, 88%, 100% { transform: none; } 90% { transform: translate(-3px, 1px); text-shadow: 3px 0 #37d5f5, -3px 0 #ff3b5c; } 93% { transform: translate(3px, -1px); text-shadow: -3px 0 #37d5f5, 3px 0 #ff3b5c; } 96% { transform: translate(-1px, 0); } }
#fs-win .caret::after { content: '▌'; color: #00fff5; animation: fs-blink 1s steps(2) infinite; margin-left: 2px; font-size: .8em; }
#fs-win .fs-what { margin: 8px 0 0; font: 600 14px/1.3 'Chakra Petch', 'Segoe UI', sans-serif; letter-spacing: .05em; color: #37f5a3; text-shadow: 0 0 10px rgba(55,245,163,.35); text-wrap: balance; }
#fs-win .fs-tagline { margin: 10px 0 0; font: 600 16px/1.3 'Chakra Petch', 'Segoe UI', sans-serif; letter-spacing: .06em; color: #e8f6fb; }
#fs-win .fs-tagline b { color: #00fff5; font-weight: 700; }
#fs-win form { margin: 16px 0 0; display: flex; gap: 8px; align-items: stretch; }
#fs-win .fs-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(2,8,13,.9); border: 1px solid rgba(55,213,245,.5); transition: border-color .15s, box-shadow .15s; }
#fs-win .fs-field:focus-within { border-color: #00fff5; box-shadow: 0 0 16px rgba(0,255,245,.3); }
#fs-win .fs-ps { color: #37f5a3; font-size: 15px; }
#fs-win .fs-field input { flex: 1; min-width: 0; padding: 13px 0; background: transparent; border: 0; outline: none; color: #eafcff; caret-color: #00fff5; font: 15px 'Share Tech Mono', Consolas, monospace; letter-spacing: .1em; }
#fs-win .fs-field input::placeholder { color: rgba(125,200,220,.5); }
#fs-win button.fs-go { position: relative; overflow: hidden; flex: 0 0 auto; padding: 0 22px; cursor: pointer; border: 0; background: #00fff5; color: #02181a;
  font: 900 14px 'Orbitron', 'Chakra Petch', sans-serif; letter-spacing: .14em; box-shadow: 0 0 22px rgba(0,255,245,.5); animation: fs-pulse 2.2s ease-in-out infinite; white-space: nowrap; }
#fs-win button.fs-go::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); animation: fs-shine 2.8s ease-in-out infinite; }
@keyframes fs-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes fs-pulse { 50% { box-shadow: 0 0 34px rgba(0,255,245,.85), 0 0 4px #fff inset; } }
#fs-win button.fs-go:hover { background: #7bfff8; } #fs-win button.fs-go:active { transform: translateY(1px); }
#fs-win .fs-err { min-height: 16px; margin-top: 6px; font-size: 11px; color: #ff7088; letter-spacing: .04em; }
#fs-win .fs-live { margin-top: 2px; display: flex; justify-content: center; gap: 4px 14px; flex-wrap: wrap; font-size: 11px; letter-spacing: .12em; color: #7d97a6; text-transform: uppercase; }
#fs-win .fs-live span::before { content: '●'; margin-right: 6px; color: #37f5a3; animation: fs-blink 1.6s steps(2) infinite; }
#fs-win .fs-live span.v::before { color: #e05bd8; } #fs-win .fs-live span.o::before { color: #f5a337; }
#fs-win .fs-links { margin-top: 12px; display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; }
#fs-win .fs-links button { padding: 0; background: none; border: 0; cursor: pointer; color: #6a8a98; font: 11px 'Share Tech Mono', Consolas, monospace; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; }
#fs-win .fs-links button:hover, #fs-win .fs-links button:focus-visible { color: #37d5f5; }
#fs-win .shake { animation: fs-shake .35s; } @keyframes fs-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
#fs-stage .fs-flash { position: absolute; inset: 0; background: #bffffb; opacity: 0; pointer-events: none; }
#fs-stage .fs-flash.on { animation: fs-flash .6s ease-out; } @keyframes fs-flash { 0% { opacity: .75; } 100% { opacity: 0; } }

/* a phone held sideways: the window moves left and shrinks, the map keeps the right side */
@media (max-height: 520px) {
  #fs-win { left: 10px; top: 10px; transform: none; width: min(400px, 56%); }
  #fs-win.in { animation-name: fs-winin-s; } #fs-win.gone { animation-name: fs-wingone-s; }
  @keyframes fs-winin-s { 0% { opacity: 0; transform: translateY(10px); filter: brightness(2); } 100% { opacity: 1; transform: none; filter: none; } }
  @keyframes fs-wingone-s { to { opacity: 0; transform: translateY(-10px); } }
  #fs-win .fs-body { padding: 8px 12px 0; } #fs-win .fs-logo { display: none; } #fs-win h1 { font-size: clamp(15px, 3.2vw, 21px); } #fs-win .fs-tagline { margin-top: 6px; font-size: 12.5px; }
  #fs-win form { margin-top: 10px; } #fs-win .fs-field input { padding: 8px 0; font-size: 13px; } #fs-win button.fs-go { padding: 0 14px; font-size: 12px; }
  #fs-win .fs-live { display: none; } #fs-win .fs-links { margin-top: 6px; } #fs-win .fs-err { min-height: 12px; margin-top: 3px; }
  #fs-win .fs-wbar > span:nth-child(2) { display: none; } #fs-win .fs-sig { margin-left: 0; }
  #fs-feed { display: none; } #fs-boot { top: 40%; }
}
@media (prefers-reduced-motion: reduce) { #fs-stage *, #fs-stage { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* hacker stories typed out in a corner terminal */
#fs-term { position: absolute; left: 16px; top: 14px; width: min(340px, 34%); min-height: 78px; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; color: #7fe7ff;
  background: rgba(2,8,13,.72); border: 1px solid rgba(55,213,245,.35); border-left: 2px solid #00fff5; pointer-events: none; text-shadow: 0 0 6px rgba(55,213,245,.5); }
#fs-term:empty { display: none; }
#fs-term div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fs-term .r { color: #ff5c7a; } #fs-term .w { color: #f5a337; } #fs-term .ok { color: #37f5a3; }
#fs-term .caret::after { content: '▌'; margin-left: 2px; animation: fs-blink 1s steps(2) infinite; }
@media (max-height: 520px), (max-width: 759px) { #fs-term { display: none; } }