/* NETHERNET — the prologue (js/prologue.js) */
#prologue { position: fixed; inset: 0; z-index: 9600; overflow: hidden; background: #020306; color: #ECE8DF; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-family: var(--f-body, 'Noto Sans TC', sans-serif); animation: pl-in 1s ease-out both; }
#prologue.out { animation: pl-out .7s ease-in forwards; }
@keyframes pl-in { from { opacity: 0; } }
@keyframes pl-out { to { opacity: 0; } }
.pl-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(63,224,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(63,224,255,.05) 1px, transparent 1px); background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); }
.pl-vig { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.85)); z-index: 3; }
.pl-black { position: absolute; inset: 0; background: #020306; opacity: 0; pointer-events: none; z-index: 6; transition: opacity .6s ease-in; }
#prologue.black .pl-black { opacity: 1; }

/* the picture area (upper part) and the line (lower part) */
.pl-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 30%; }
.pl-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.pl-v.on { opacity: 1; visibility: visible; transition: opacity .7s ease .15s, visibility 0s; }
.pl-line { position: absolute; left: max(8vw, calc(env(safe-area-inset-left) + 16px)); right: max(8vw, calc(env(safe-area-inset-right) + 16px)); bottom: max(15%, calc(env(safe-area-inset-bottom) + 64px));
  margin: 0; z-index: 4; text-align: center; font-size: clamp(17px, 2.3vw, 26px); font-weight: 700; line-height: 1.6; letter-spacing: .05em; text-shadow: 0 2px 12px #000; min-height: 1.6em; }
.pl-line .c { opacity: 0; }
.pl-line .c.on { opacity: 1; transition: opacity .12s; }
.pl-line em { font-style: normal; font-weight: 900; }
.k-o { color: #F2B630; text-shadow: 0 0 14px rgba(242,182,48,.45); } .k-g { color: #3CC8E6; text-shadow: 0 0 14px rgba(60,200,230,.45); }
.k-z { color: #3FD483; text-shadow: 0 0 14px rgba(63,212,131,.5); } .k-v { color: #B593FF; text-shadow: 0 0 14px rgba(181,147,255,.45); } .k-c { color: #FF5A5A; text-shadow: 0 0 14px rgba(255,90,90,.5); }
.pl-cta { position: absolute; right: max(4vw, calc(env(safe-area-inset-right) + 12px)); bottom: max(6%, calc(env(safe-area-inset-bottom) + 14px)); z-index: 4; font-size: 11px; letter-spacing: .14em; color: #6E6B63; animation: pl-nudge 1.6s ease-in-out infinite; }
#prologue.no-line .pl-cta { opacity: 0; }
@keyframes pl-nudge { 50% { opacity: .35; } }
.pl-skip { position: absolute; right: max(14px, calc(env(safe-area-inset-right) + 8px)); top: max(12px, calc(env(safe-area-inset-top) + 6px)); z-index: 7; padding: 4px 12px; font-size: 11px; letter-spacing: .1em;
  background: rgba(0,0,0,.4); border-color: rgba(236,232,223,.25); color: #8C897F; }

/* 1 · 207X: memories drifting up into the net */
.pl-year { position: relative; z-index: 2; font-family: 'Orbitron', var(--f-display), sans-serif; font-weight: 900; font-size: clamp(64px, 15vw, 190px); letter-spacing: .14em; color: #F4F1EA;
  text-shadow: -3px 0 rgba(255,62,165,.6), 3px 0 rgba(63,224,255,.7), 0 0 50px rgba(63,224,255,.35); }
.v-year.on .pl-year { animation: pl-year 2.4s cubic-bezier(.2,.8,.2,1) both, pl-glitch 4s steps(1) 2.4s infinite; }
@keyframes pl-year { 0% { opacity: 0; letter-spacing: .6em; filter: blur(10px); } 60% { opacity: 1; filter: blur(0); } 100% { letter-spacing: .14em; } }
@keyframes pl-glitch { 0%, 92%, 100% { transform: none; clip-path: none; } 93% { transform: translateX(4px); clip-path: inset(20% 0 55% 0); } 95% { transform: translateX(-3px); clip-path: inset(60% 0 10% 0); } }
.pl-motes { position: absolute; inset: 0; overflow: hidden; }
.pl-motes i { position: absolute; bottom: -10px; width: var(--sz); height: var(--sz); border-radius: 50%; background: #9FE8FF; box-shadow: 0 0 8px #3FE0FF; opacity: 0;
  animation: pl-mote var(--sp) linear var(--dl) infinite; }
@keyframes pl-mote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { transform: translateY(-75vh); opacity: 0; } }

/* 2 · two powers, then 3 · ZERO between them */
.v-two { gap: clamp(30px, 12vw, 220px); }
.pl-fac { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; }
.pl-fac b { font-family: 'Noto Serif TC', 'Noto Serif JP', serif; font-weight: 900; font-size: clamp(70px, 13vw, 170px); line-height: 1; }
.pl-fac small { font-size: clamp(9px, 1.1vw, 12px); letter-spacing: .3em; color: #8C897F; white-space: nowrap; }
.f-o b { color: #F2B630; text-shadow: 0 0 40px rgba(242,182,48,.45); }
.f-g b { color: #3CC8E6; text-shadow: 0 0 40px rgba(60,200,230,.45); }
.f-z b { color: #3FD483; text-shadow: -3px 0 rgba(255,62,165,.6), 3px 0 rgba(63,224,255,.6), 0 0 40px rgba(63,212,131,.6); }
.f-z { order: 0; width: 0; overflow: visible; }
.f-o { order: -1; } .f-g { order: 1; }
/* each power appears with the line that names it */
#prologue[data-v="two"].l1 .v-two.on .f-o { animation: pl-fac-l 1.1s cubic-bezier(.2,.8,.2,1) .1s both; }
#prologue[data-v="two"].l2 .v-two.on .f-g { animation: pl-fac-r 1.1s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes pl-fac-l { from { opacity: 0; transform: translateX(-60px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pl-fac-r { from { opacity: 0; transform: translateX(60px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
#prologue[data-v="zero"] .f-o, #prologue[data-v="zero"] .f-g { opacity: .22; filter: grayscale(.6); transition: opacity .8s, filter .8s; animation: none; }
#prologue[data-v="zero"] .f-z { animation: pl-zero 1.4s steps(1) .2s both, pl-glitch 2.2s steps(1) 1.6s infinite; }
@keyframes pl-zero { 0% { opacity: 0; } 10% { opacity: 1; transform: translateX(-8px) skewX(-8deg); } 20% { opacity: 0; } 30% { opacity: 1; transform: translateX(6px); } 45% { opacity: .4; } 55%, 100% { opacity: 1; transform: none; } }

/* 4 · three viruses fill, and the brain burns */
.v-virus { flex-direction: column; gap: 22px; }
.pl-chips { display: flex; gap: clamp(12px, 2.4vw, 26px); }
.pl-chips i { width: clamp(46px, 7vw, 86px); height: clamp(46px, 7vw, 86px); border-radius: 8px; border: 2px solid rgba(181,147,255,.35); background: rgba(181,147,255,.04); }
/* the viruses fill and the brain burns on the line that says so */
#prologue.l2 .v-virus.on .pl-chips i { animation: pl-chip .35s ease-out both; }
#prologue.l2 .v-virus.on .pl-chips i:nth-child(1) { animation-delay: .2s; } #prologue.l2 .v-virus.on .pl-chips i:nth-child(2) { animation-delay: .65s; } #prologue.l2 .v-virus.on .pl-chips i:nth-child(3) { animation-delay: 1.1s; }
@keyframes pl-chip { from { background: rgba(181,147,255,.04); transform: scale(1.2); } to { background: #8F63F0; border-color: #C9B0FF; box-shadow: 0 0 26px rgba(181,147,255,.7); transform: none; } }
.pl-crash { font-family: 'Orbitron', var(--f-display), sans-serif; font-weight: 900; font-size: clamp(30px, 5vw, 64px); letter-spacing: .3em; color: #FF5A5A; opacity: 0; text-shadow: 0 0 30px rgba(255,60,60,.7); }
#prologue.l2 .v-virus.on .pl-crash { animation: pl-crash .5s steps(2) 1.55s both; }
@keyframes pl-crash { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
#prologue.l2[data-v="virus"] .pl-vig { animation: pl-redflash .8s ease-out 1.55s both; }
@keyframes pl-redflash { 0% { box-shadow: inset 0 0 0 0 rgba(255,40,60,0); } 25% { box-shadow: inset 0 0 160px 40px rgba(255,40,60,.55); } 100% { box-shadow: inset 0 0 120px 10px rgba(255,40,60,.15); } }

/* 5 · the map of nodes; 0x207X goes red */
.pl-net { position: relative; width: min(82vw, 900px); height: 82%; }
.pl-net svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-net line { stroke: rgba(63,224,255,.35); stroke-width: .25; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 200; }
.v-node.on .pl-net line { animation: pl-draw 1.4s ease-out both; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
.pl-net b { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #3FE0FF; box-shadow: 0 0 10px #3FE0FF; opacity: 0; }
.v-node.on .pl-net b { animation: pl-pop .4s ease-out .5s both; }
@keyframes pl-pop { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
.v-node.on .pl-net b.hot { animation: pl-pop .4s ease-out .5s both, pl-hot 1s ease-in-out 1.6s infinite; }
@keyframes pl-hot { 0%, 100% { background: #FF3B5C; box-shadow: 0 0 0 0 rgba(255,59,92,.7), 0 0 14px #FF3B5C; } 50% { background: #FF3B5C; box-shadow: 0 0 0 16px rgba(255,59,92,0), 0 0 14px #FF3B5C; } }
.pl-lost { position: absolute; transform: translate(14px, -50%); display: flex; flex-direction: column; gap: 2px; opacity: 0; white-space: nowrap; }
.pl-lost span { font-size: clamp(12px, 1.5vw, 16px); color: #FF8A9A; letter-spacing: .1em; }
.pl-lost small { font-size: clamp(9px, 1vw, 11px); color: #FF3B5C; letter-spacing: .2em; animation: pl-nudge 1s steps(2) infinite; }
.v-node.on .pl-lost { animation: pl-fade .5s ease 1.7s both; }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }

/* 6 · the signatures the node knows, and the one it doesn't */
.pl-sigs { display: flex; flex-direction: column; gap: 8px; width: min(560px, 84vw); }
.pl-sig { display: flex; justify-content: space-between; gap: 14px; padding: 8px 14px; border: 1px solid rgba(255,59,92,.3); border-left: 3px solid #FF3B5C; background: rgba(255,59,92,.05); opacity: 0;
  font-size: clamp(11px, 1.3vw, 14px); }
.pl-sig span { color: #A8A49A; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-sig b { flex: none; color: #FF6B7E; letter-spacing: .08em; font-weight: 600; }
.pl-sig.me { border-color: rgba(63,212,131,.45); border-left-color: #3FD483; background: rgba(63,212,131,.07); }
.pl-sig.me span { color: #ECE8DF; } .pl-sig.me b { color: #3FD483; }
.v-sig.on .pl-sig { animation: pl-sig .35s ease-out calc(.3s + var(--i) * .45s) both; }
.v-sig.on .pl-sig.me { animation: none; }

@keyframes pl-sig { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes pl-ok { 50% { box-shadow: 0 0 22px -4px rgba(63,212,131,.7); } }

/* 7 · the dispatch order, and its stamp */
.pl-doc { position: relative; width: min(520px, 84vw); padding: 18px 22px 20px; background: linear-gradient(180deg, rgba(14,18,26,.96), rgba(8,10,16,.96)); border: 1px solid rgba(63,224,255,.4); border-top: 3px solid #3FE0FF;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px -14px #3FE0FF; opacity: 0; }
.v-order.on .pl-doc { animation: pl-doc .7s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes pl-doc { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.pl-doc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(63,224,255,.2); }
.pl-doc-h span { font-size: clamp(16px, 2vw, 22px); font-weight: 900; letter-spacing: .2em; color: #fff; }
.pl-doc-h small { font-size: 10px; letter-spacing: .16em; color: #6E8A94; }
.pl-doc dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: clamp(12px, 1.5vw, 15px); }
.pl-doc dt { color: #8C897F; letter-spacing: .1em; }
.pl-doc dd { margin: 0; color: #ECE8DF; font-weight: 700; }
.pl-doc dd.nm { color: #9FE8FF; font-family: var(--f-mono, monospace); letter-spacing: .06em; }
.pl-doc dd.unk { color: #FF8A9A; }
.pl-stamp { position: absolute; right: 18px; bottom: 16px; padding: 6px 14px; font-size: clamp(16px, 2.2vw, 24px); font-weight: 900; letter-spacing: .2em; color: #FF3B5C; border: 3px solid #FF3B5C; border-radius: 4px;
  transform: rotate(-9deg); opacity: 0; text-shadow: 0 0 10px rgba(255,59,92,.5); box-shadow: inset 0 0 12px rgba(255,59,92,.3); }
#prologue.stamped .pl-stamp { animation: pl-stamp .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pl-stamp { from { opacity: 0; transform: rotate(-9deg) scale(2.4); } to { opacity: .92; transform: rotate(-9deg) scale(1); } }
#prologue.stamped .pl-doc { animation: pl-doc .7s cubic-bezier(.2,.8,.2,1) .2s both, pl-thud .3s ease-out .15s; }
@keyframes pl-thud { 30% { translate: 0 3px; } }

/* phone held sideways */
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pl-stage { bottom: 32%; }
  .pl-line { font-size: 15px; line-height: 1.5; bottom: max(14%, calc(env(safe-area-inset-bottom) + 40px)); }
  .pl-cta { font-size: 9px; }
  .pl-fac b { font-size: 76px; } .pl-fac small { font-size: 8px; letter-spacing: .2em; }
  .pl-year { font-size: 84px; }
  .pl-sigs { gap: 5px; } .pl-sig { padding: 4px 10px; font-size: 10.5px; }
  .pl-doc { padding: 10px 14px 12px; } .pl-doc-h { padding-bottom: 6px; margin-bottom: 8px; } .pl-doc dl { gap: 4px 12px; font-size: 12px; }
  .pl-doc-h small { display: none; }
  .pl-stamp { right: 12px; bottom: 10px; font-size: 15px; padding: 3px 9px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { #prologue *, #prologue { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; } }
/* the dispatch order has no line under it: it takes the middle of the screen */
#prologue[data-v="order"] .pl-stage { bottom: 0; }

/* 1 · the years roll; the last digit locks into X */
.pl-year { font-variant-numeric: tabular-nums; }
.pl-year.lock { animation: pl-lock .45s steps(3) both, pl-glitch 4s steps(1) .45s infinite !important; }
@keyframes pl-lock { 0% { transform: scale(1.08); filter: brightness(1.8); } 40% { transform: translateX(-5px) scale(1.03); } 70% { transform: translateX(3px); } 100% { transform: none; filter: none; } }
/* 5 · three senior operators' signals run to the node and die there, one after another */
.pl-probe { position: absolute; height: 2px; margin-top: -1px; transform-origin: 0 50%; pointer-events: none; }
.pl-probe::before { content: ''; position: absolute; inset: 0; background: #7FE8FF; box-shadow: 0 0 8px #3FE0FF; transform-origin: 0 50%; transform: scaleX(0);
  animation: pl-probe 1.1s ease-in calc(.2s + var(--i) * .8s) both; }
@keyframes pl-probe { 0% { transform: scaleX(0); opacity: 1; } 62% { transform: scaleX(1); background: #7FE8FF; opacity: 1; } 70% { background: #FF3B5C; box-shadow: 0 0 12px #FF3B5C; } 78% { opacity: .15; } 86% { opacity: .8; } 100% { transform: scaleX(1); background: #3A3F48; box-shadow: none; opacity: .6; } }
/* 6 · the newcomer's name is typed in, then the node lets it through */
.pl-sig.me .nmx { font-style: normal; color: #9FE8FF; }
.pl-sig.me .cur { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: #3FD483; animation: pl-nudge .7s steps(2) infinite; }
.pl-sig.me.ok .cur { display: none; }
.pl-sig.me b { opacity: 0; transition: opacity .25s; }
.pl-sig.me.ok b { opacity: 1; }
#prologue.l2 .v-sig.on .pl-sig.me { animation: pl-sig .35s ease-out .3s both; }
#prologue.l2 .v-sig.on .pl-sig.me.ok { animation: pl-sig .35s ease-out .3s both, pl-ok 1.6s ease-in-out infinite; }
/* 7 · a note from the unknown sender, then the link counts down */
.pl-ps { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed rgba(63,224,255,.2); min-height: 1.6em; font-size: clamp(12px, 1.4vw, 14px); color: #CFE9F0; opacity: 0; transition: opacity .3s; }
#prologue.ps .pl-ps { opacity: 1; }
.pl-ps small { margin-right: 8px; color: #6E8A94; letter-spacing: .12em; }
.pl-ps span::after { content: '▌'; margin-left: 2px; color: #3FE0FF; animation: pl-nudge .7s steps(2) infinite; }
#prologue.count .pl-doc { opacity: 0 !important; transform: scale(.96); transition: opacity .4s, transform .4s; animation: none !important; }
.pl-count { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; pointer-events: none; transition: opacity .3s; }
#prologue.count .pl-count { opacity: 1; }
.pl-count small { font-size: clamp(11px, 1.3vw, 14px); letter-spacing: .35em; color: #7FE3F5; }
.pl-count b { font-size: clamp(70px, 12vw, 150px); font-weight: 600; line-height: 1; color: #fff; text-shadow: -3px 0 rgba(255,62,165,.6), 3px 0 rgba(63,224,255,.7), 0 0 40px rgba(63,224,255,.5); }
.pl-count b.pop { animation: pl-pop-n .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pl-pop-n { 0% { opacity: 0; transform: scale(1.6); filter: blur(6px); } 25% { opacity: 1; transform: none; filter: none; } 80% { opacity: 1; } 100% { opacity: .2; transform: scale(.9); } }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .pl-ps { margin-top: 8px; padding-top: 6px; font-size: 11.5px; }
  .pl-count b { font-size: 84px; }
}
.pl-net b, .pl-lost { z-index: 2; }   /* the nodes stay above the probe signals */
/* the stamp sits beside the fields, clear of the note typed underneath */
.pl-stamp { bottom: auto; top: 64px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .pl-stamp { top: 42px; } }
/* the full name of each power under its glyph, the faction word below it */
.pl-fac em { font-style: normal; font-weight: 900; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .12em; white-space: nowrap; margin-top: 2px; }
.f-o em { color: #F2B630; } .f-g em { color: #3CC8E6; } .f-z em { color: #3FD483; }
.pl-fac small { margin-top: -4px; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) { .pl-fac em { font-size: 11px; } }