:root { --ink: #0c0c0c; --paper: #fff; --white: #fff; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Noto Serif JP", serif;
  transition: background .4s;
}
body.dark { background: var(--ink); }
body.inv, body.inv * { cursor: none !important; }

/* #world holds the ordinary front page (hidden after the opener) */
#world { position: fixed; inset: 0; pointer-events: none; }
#world > * { pointer-events: auto; } /* empty #world must not swallow clicks meant for the terminal in #bg */
#sub { pointer-events: none;
  position: fixed; left: 50%; bottom: 5vh; transform: translateX(-50%); z-index: 20;
  max-width: min(90vw, 760px); text-align: center;
  background: var(--ink); color: var(--white);
  font: italic 700 clamp(15px, 1.9vw, 22px)/1.3 "Comic Neue", "Comic Sans MS", sans-serif; /* manga lettering */
  text-transform: uppercase; letter-spacing: .02em; padding: .45em 1em; opacity: 0;
}
#flash { position: fixed; inset: 0; background: var(--white); opacity: 0; pointer-events: none; z-index: 30; }
#cur {
  position: fixed; left: 0; top: 0; width: 22px; height: 22px; z-index: 50; pointer-events: none; display: none;
  background: var(--ink); clip-path: polygon(0 0, 100% 62%, 52% 60%, 30% 100%);
  outline: 2px solid var(--white);
}
body.inv #cur { display: block; }

button { font: inherit; cursor: pointer; }

/* ---- the "normal" portfolio: monochrome, editorial, current ---- */
#site {
  --fg: #0c0c0c; --muted: #6e6e6e; --line: #e4e4e4; --card: #f4f4f4;
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr minmax(260px, 340px); grid-template-rows: auto 1fr auto;
  gap: 0 clamp(16px, 3vw, 48px); padding: 0 clamp(16px, 3.2vw, 48px);
  font-family: "Geist", system-ui, sans-serif; color: var(--fg);
}
#site[hidden] { display: none; }
#site em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }
.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: .07; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 0; position: relative; z-index: 1; }
.top a { color: inherit; text-decoration: none; }
.mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fg); color: #fff !important; font-weight: 600; font-size: 14px; letter-spacing: -.02em; }
.pill { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); font-size: 14px; }
.pill a { padding: 7px 14px; border-radius: 999px; transition: background .2s; }
body:not(.inv) .pill a:hover, .pill a.hov { background: var(--card); }
.status { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #22a55a; box-shadow: 0 0 0 0 rgba(34,165,90,.5); animation: ping 1.8s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 8px rgba(34,165,90,0); } }

.hero { align-self: end; padding-bottom: clamp(16px, 4vh, 48px); position: relative; z-index: 1; }
.eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.big { display: flex; flex-direction: column; font-weight: 600; font-size: clamp(64px, 13.5vw, 230px); line-height: .84; letter-spacing: -.055em; margin-left: -.04em; }
.lede { max-width: 36ch; margin-top: clamp(16px, 2.6vh, 28px); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.45; color: #333; }
.lede em { font-size: 1.12em; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2.6vh, 28px); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; font: 500 15px/1 "Geist", sans-serif; text-decoration: none; transition: transform .2s; }
#go { background: var(--fg); color: #fff; border: 0; }
.btn.ghost { border: 1px solid var(--line); color: var(--fg); background: #fff; }
body:not(.inv) .btn:hover, .btn.hov { transform: translateY(-2px); }

.bento { align-self: end; display: grid; gap: 10px; padding-bottom: clamp(16px, 4vh, 48px); position: relative; z-index: 1; }
.card { padding: 16px 18px; border-radius: 18px; background: var(--card); }
.card .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card .v { margin-top: 6px; font-size: 16px; line-height: 1.35; }
.thumbs { display: flex; gap: 8px; margin-top: 12px; }
.thumbs img { flex: 1; min-width: 0; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; display: block; filter: grayscale(1); }

.marquee { grid-column: 1 / -1; border-top: 1px solid var(--line); overflow: hidden; padding: 14px 0; margin: 0 calc(-1 * clamp(16px, 3.2vw, 48px)); position: relative; z-index: 1; }
.track { display: flex; width: max-content; animation: marquee 28s linear infinite; font-size: clamp(14px, 1.3vw, 17px); color: var(--muted); }
.track > span { white-space: pre; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 860px) {
  #site { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; overflow-y: auto; }
  .top .pill { display: none; }
  .hero { align-self: start; padding-top: 6vh; }
  .bento { grid-template-columns: 1fr 1fr; align-self: start; }
  .bento .card:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .track, .dot { animation: none; } }

.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }

/* ---- manga scene (screen-fixed, under the world) ---- */
#bg, #nbg { position: fixed; inset: 0; overflow: hidden; background: var(--white); transform-origin: 50% 40%; will-change: transform; }
/* while scrolling, the sky's lower edge dissolves into white so the two chapters blend instead of meeting at a hard line
   (--fade is 0 during the opener, grows with scroll progress, set in JS) */
#bg, #nbg {
  -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade, 0px)), transparent 100%);
  mask-image: linear-gradient(#000 calc(100% - var(--fade, 0px)), transparent 100%);
}
#bg[hidden], #nbg[hidden] { display: none; }
#bg .page, #nbg .page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* the name, up top by Shinji's feet, upside down, solid black */
.name {
  position: absolute; left: 0; right: 0; top: 17vh; /* low enough that Shinji's legs cross it */
  text-align: center; white-space: nowrap; pointer-events: none;
  font: 800 clamp(40px, 10.5vw, 160px)/1 "Montserrat", sans-serif; letter-spacing: -.01em;
  color: var(--ink); transform: rotate(180deg);
}
#name .ch { opacity: 0; }
/* letters filled with Shinji's own pixels (synced in JS), then inverted → only the overlap flips */
#nameInv {
  color: transparent; opacity: 0;
  -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat;
  filter: invert(1);
}

#shinji {
  position: absolute; left: 50%; top: 4vh; height: min(84vh, 125vw); width: auto;
  margin-left: calc(min(84vh, 125vw) * -0.345); /* image is 760x1100 → half width */
  filter: drop-shadow(0 0 1px #000);
}

/* round manga balloons: thick ink ring, vertical Japanese in antique type */
.balloon {
  position: absolute; opacity: 0; display: grid; place-content: center;
  width: clamp(104px, 13vw, 180px); aspect-ratio: 1; border-radius: 50%;
  background: var(--white); border: clamp(3px, .4vw, 6px) solid var(--ink);
  font: 400 clamp(16px, 2vw, 28px)/1.25 "Zen Antique", serif; color: var(--ink);
  writing-mode: vertical-rl; letter-spacing: .05em;
}
#o1 { left: 9vw; top: 52vh; }
#o2 { right: 9vw; top: 38vh; }

/* ---- chapter 2: Shinji profile (slides up from below) ---- */
#profile, #nprofile {
  position: fixed; inset: 0; z-index: 1; overflow: hidden; will-change: transform;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center;
  gap: clamp(20px, 4vw, 72px); padding: clamp(16px, 4vw, 72px);
  background: var(--white); color: var(--ink);
}
#profile[hidden], #nprofile[hidden] { display: none; }
/* video sits straight on the page (no frame); edges feathered into the white so it isn't a box */
.pf-media {   /* manga panel: hard ink frame + offset shadow, same frame weight as the Sakanade panels */
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #fff;
  border: clamp(3px, .35vw, 5px) solid var(--ink); box-shadow: clamp(6px, .6vw, 10px) clamp(6px, .6vw, 10px) 0 var(--ink);
}
.pf-media.square { aspect-ratio: 1; width: min(100%, 72vh); justify-self: center; }  /* try with ?panel=square */
.pf-media.square video, .pf-media.square img { object-position: 58% 50%; }
.pf-media video, .pf-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.3) brightness(1.03);
}
#maskStill, #nStill { opacity: 0; }
.pf-name { margin-top: 10px; font: 800 clamp(40px, 5.6vw, 96px)/.92 "Montserrat", sans-serif; letter-spacing: -.02em; }
.pf-kanji { display: block; font: 400 clamp(22px, 3vw, 52px)/1.2 "Yuji Syuku", serif; letter-spacing: .1em; margin-bottom: .1em; }
.pf-body { margin-top: clamp(14px, 2.4vh, 26px); max-width: 46ch; font: 400 clamp(15px, 1.25vw, 18px)/1.6 "Geist", sans-serif; color: #222; }
.pf-facts { margin-top: clamp(14px, 2.4vh, 26px); display: grid; grid-template-columns: max-content 1fr; gap: 9px 18px; font: 400 14px/1.45 "Geist", sans-serif; border-top: 2px solid var(--ink); padding-top: 14px; }
.pf-facts dt { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; padding-top: 2px; }
.pf-facts dd { margin: 0; }
.pf-facts [lang="ja"] { font-family: "Zen Antique", serif; }
@media (max-width: 860px) {
  #profile, #nprofile { grid-template-columns: 1fr; align-content: start; overflow-y: auto; }
}

/* ---- chapter 3: Sakanade, laid out like a manga page ---- */
#sakanade, #njutsu {
  position: fixed; inset: 0; z-index: 1; overflow: hidden; will-change: transform;
  display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; align-items: center;
  gap: clamp(20px, 4vw, 64px); padding: clamp(16px, 4vw, 64px);
  background: var(--white); color: var(--ink);
}
#sakanade[hidden], #njutsu[hidden] { display: none; }
.sk-title { margin-top: 10px; font: 800 clamp(40px, 5.2vw, 88px)/.92 "Montserrat", sans-serif; letter-spacing: -.02em; }
.sk-kanji { display: block; font: 400 clamp(44px, 6vw, 104px)/1 "Yuji Syuku", serif; margin-bottom: .12em; }
.sk-release { margin-top: 12px; font: 400 clamp(19px, 1.7vw, 26px)/1.3 "Gilda Display", "Instrument Serif", serif; }
.sk-release [lang="ja"] { font: normal 400 1.1em "Zen Antique", serif; }
.sk-body { margin-top: clamp(12px, 2vh, 22px); max-width: 44ch; font: 400 clamp(15px, 1.2vw, 17px)/1.6 "Geist", sans-serif; color: #222; }
.sk-quote { position: relative; margin: clamp(10px, 1.6vh, 18px) 0 0; padding-left: 1.3em;
  font: 400 clamp(18px, 1.6vw, 24px)/1.3 "Gilda Display", "Instrument Serif", serif; }
.sk-quote::before { /* manga-style corner bracket instead of a side rule */
  content: "「"; position: absolute; left: 0; top: -.15em; font: 400 1.25em/1 "Yuji Syuku", serif; }
.sk-quote cite { display: block; margin-top: 4px; font: normal 500 12px/1 "Geist", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #666; }

.sk-grid {
  display: grid; gap: 10px; height: min(78vh, 680px);
  grid-template-columns: 1fr 1fr .9fr; grid-template-rows: 1fr 1fr .8fr;
  grid-template-areas: "a a b" "a a c" "t t c";
}
.sk-panel { margin: 0; overflow: hidden; border: clamp(3px, .35vw, 5px) solid var(--ink); background: #fff; }
.sk-panel img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.3) brightness(1.03); }
.sk-a { grid-area: a; } .sk-b { grid-area: b; } .sk-c { grid-area: c; }
.sk-b img { object-position: 50% 30%; }
.sk-try {
  grid-area: t; display: grid; place-content: center; gap: 6px; text-align: center; cursor: pointer;
  background: var(--ink); color: var(--white); font: inherit;
}
.sk-try-jp { font: 400 clamp(26px, 2.6vw, 42px)/1 "Yuji Syuku", serif; transition: transform .6s cubic-bezier(.6,-0.4,.3,1.4); }
.sk-try-en { font: 400 13px/1.45 "Geist", sans-serif; color: #cfcfcf; }
body:not(.inv) .sk-try:hover .sk-try-jp, .sk-try.hov .sk-try-jp, .sk-try.on .sk-try-jp { transform: rotate(180deg); }
.sk-try .on-touch { display: none; }
@media (hover: none) { .sk-try .on-hover { display: none; } .sk-try .on-touch { display: inline; } }
@media (max-width: 860px) {
  #sakanade, #njutsu { grid-template-columns: 1fr; align-content: start; overflow-y: auto; }
  .sk-grid { height: 92vw; }
}

/* ---- chapter 4: Harsh's work (normal world again; this chapter scrolls inside itself) ---- */
#work {
  position: fixed; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior: contain; will-change: transform;
  padding: clamp(24px, 6vh, 72px) clamp(16px, 4vw, 64px) clamp(32px, 8vh, 96px);
  background: var(--white); color: var(--ink);
}
#work[hidden] { display: none; }
.wk-head { max-width: 1200px; margin: 0 auto clamp(20px, 4vh, 40px); }
.wk-jp { font: 400 clamp(22px, 2.6vw, 40px)/1.2 "Yuji Syuku", serif; display: inline-block; }
.wk-title { margin-top: 8px; font: 800 clamp(40px, 6.5vw, 108px)/.92 "Montserrat", sans-serif; letter-spacing: -.02em; }
.wk-title span { font: 400 clamp(22px, 3.6vw, 60px)/1 "Gilda Display", serif; letter-spacing: 0; margin-left: .2em; }
.wk-lede { margin-top: 12px; max-width: 52ch; font: 400 clamp(16px, 1.4vw, 20px)/1.5 "Geist", sans-serif; color: #333; }

.wk-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 2vw, 24px);
}
.wk-card { border: clamp(3px, .3vw, 4px) solid var(--ink); padding: 0 0 16px; background: #fff; display: flex; flex-direction: column; }
.wk-card > :not(.wk-shot) { margin-left: 16px; margin-right: 16px; }
.wk-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: clamp(3px, .3vw, 4px) solid var(--ink); background: #111; }
.wk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.15); transition: filter .5s, transform .6s; }
body:not(.inv) .wk-card:hover .wk-shot img, .wk-card.hov .wk-shot img, .wk-card:focus-within .wk-shot img { filter: none; transform: scale(1.03); }
.wk-card h3 { margin-top: 14px; font: 800 clamp(19px, 1.6vw, 24px)/1.15 "Montserrat", sans-serif; }
.wk-card p { margin-top: 6px; font: 400 15px/1.5 "Geist", sans-serif; color: #333; }
.wk-card .wk-tags { margin-top: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #666; }
.wk-link { margin-top: auto; padding-top: 12px; font: 500 14px/1 "Geist", sans-serif; color: var(--ink); }
a.wk-link { text-decoration: underline; text-underline-offset: 3px; }
span.wk-link { color: #777; }

.wk-more-title { max-width: 1200px; margin: clamp(36px, 7vh, 72px) auto 10px; font: 800 clamp(22px, 2vw, 30px)/1 "Montserrat", sans-serif; }
.wk-more { max-width: 1200px; margin: 0 auto; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.wk-more li { display: grid; grid-template-columns: minmax(150px, 240px) 1fr auto; gap: 12px 20px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid #ddd; font: 400 15px/1.45 "Geist", sans-serif; }
.wk-more b { font-weight: 600; }
.wk-more span { color: #444; }
.wk-more a { color: var(--ink); font-weight: 500; }
.wk-contact { max-width: 1200px; margin: clamp(40px, 8vh, 80px) auto 0; font: 400 18px/1.5 "Geist", sans-serif; }
.wk-contact a { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .wk-more li { grid-template-columns: 1fr; gap: 2px; }
}

/* brush line between chapters: ink with a white halo so it reads over grey sky and white page alike */
#poem {
  position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  display: grid; place-content: center; text-align: center; gap: 14px;
}
.poem-jp {
  font: 400 clamp(30px, 4.6vw, 72px)/1.35 "Yuji Syuku", serif; color: var(--ink); letter-spacing: .08em;
  text-shadow: 0 0 6px #fff, 0 0 18px #fff, 0 0 36px rgba(255,255,255,.9);
}
.poem-en {
  font: italic 400 clamp(16px, 1.6vw, 22px)/1.3 "Instrument Serif", serif; color: #222;
  text-shadow: 0 0 8px #fff, 0 0 20px #fff;
}


/* .hov = hover under the mirrored cursor in Shinji's world (set in JS); real :hover only outside it */
/* command box: Linux terminal. Near-solid dark glass so the text stays readable over any photo or manga panel */
#term {
  position: relative; width: 100%; height: 100%; min-height: 300px; margin: 0;
  display: flex; flex-direction: column;
  background: rgba(13, 13, 13, .93); color: #d8d8d8; border: 1px solid #3a3a3a; border-radius: 8px;
  -webkit-backdrop-filter: blur(10px) grayscale(1); backdrop-filter: blur(10px) grayscale(1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 50px rgba(0, 0, 0, .45);
  font: 13px/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; overflow: hidden;
}
#term.docked {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: clamp(280px, 30vw, 480px); height: clamp(200px, 34vh, 320px); min-height: 0;
}
.wk-slot { padding: 0; border: 0; background: transparent; }
.wk-slot.emptied { display: none; } /* the terminal has moved to the corner */
#term[hidden] { display: none; }
.tm-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #1b1b1b; border-bottom: 1px solid #2a2a2a; }
.tm-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3a; }
.tm-bar span { flex: 1; text-align: center; color: #8a8a8a; font-size: 12px; }
#tmMin { width: 22px; height: 22px; border: 1px solid #3a3a3a; border-radius: 4px; background: transparent; color: #d8d8d8; font: inherit; line-height: 1; cursor: pointer; }
body:not(.inv) #tmMin:hover, #tmMin.hov { background: #2a2a2a; }
/* minimized terminal: pixel Shinji in the corner (click him to reopen) */
#chibi { position: fixed; right: 16px; bottom: 12px; z-index: 40; padding: 0; border: 0; background: none; cursor: pointer; }
#chibi[hidden] { display: none; }
/* pixel Shinji sitting on the open terminal's top edge (placed by JS each frame) */
#perch { position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none; height: clamp(96px, 13vh, 124px);
  aspect-ratio: 178 / 161; background: url(art/shinji/chibi_sit_sheet.webp) 0 0 / 600% 600% no-repeat; }
#perch[hidden] { display: none; }
#chibi .sprite { display: block; position: relative; height: clamp(90px, 13vh, 132px); aspect-ratio: 175 / 169; background: url(art/shinji/chibi_sheet.webp) 0 0 / 600% 400% no-repeat; }
#out { flex: 1; min-height: 0; overflow-y: auto; white-space: pre-wrap; padding: 8px 12px 0; scrollbar-width: none; }
#out::-webkit-scrollbar { display: none; } /* still scrolls with wheel/touch, no visible bar */
#out .me { color: #fff; }
#out a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
#out b { color: #fff; }
#out .jp { font-family: "Noto Serif JP", serif; font-weight: 900; }
#out .mirror { display: inline-block; transform: scaleX(-1); }
#cmd { display: flex; gap: .6em; align-items: center; padding: 2px 12px 10px; }
#cmd label { color: #fff; font-weight: 700; white-space: nowrap; }
#in { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: transparent; color: #fff; caret-color: #fff; }

/* sleeping pixel Shinji: one still frame, three "z"s drift up from his head and fade, one after another */
.sprite i { position: absolute; left: var(--zx); top: var(--zy); opacity: 0; font: 900 15px/1 ui-monospace, Consolas, monospace;
  font-style: normal; color: #000; text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff; pointer-events: none; }
.sprite.zz i { animation: zz 2.4s steps(8) infinite; }
.sprite.zz i:nth-child(2) { animation-delay: .8s; font-size: 18px; }
.sprite.zz i:nth-child(3) { animation-delay: 1.6s; font-size: 21px; }
@keyframes zz {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -26px); }
}
#perch { --zx: 44%; --zy: 36%; }
#chibi .sprite { --zx: 58%; --zy: 38%; }
@media (prefers-reduced-motion: reduce) { .sprite.zz i { animation: none; } .sprite.zz i:first-child { opacity: 1; } }

/* ===== Naruto world ===== */
/* chapter 1: Konoha; the name reads upright here, Naruto lands in front of it with his clones */
#nname { transform: none; top: 7vh; }
#naruto { position: absolute; left: 50%; bottom: 2vh; height: min(70vh, 105vw); width: auto; /* centred by GSAP (xPercent) */
  filter: drop-shadow(0 0 1px #000); }
/* shadow clones: copies of Naruto in the same pose, stacked behind him; GSAP slides them out (xPercent -50 centres them) */
.nclone { position: absolute; left: 50%; bottom: 2vh; height: min(66vh, 100vw); width: auto; opacity: 0; }
.poofs { position: absolute; pointer-events: none; background: url(art/naruto/clone_poof.webp) 0 0 / 700% 400% no-repeat; }
/* during the jutsu the town dims and Naruto glows, like the clone shot in the anime */
#nbg .page, #naruto { transition: filter .45s ease; }
#nbg.jutsu-on .page { filter: brightness(.38) contrast(1.15); }
#nbg.jutsu-on #naruto { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 18px rgba(255, 255, 255, .75)); }
#n1 { left: 5vw; top: 30vh; } #n2 { right: 5vw; top: 22vh; }

/* chapter 3: the try-it panel (no flip here; the word just bounces) */
.nt-jp { font: 400 clamp(26px, 2.6vw, 42px)/1 "Yuji Syuku", serif; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
body:not(.inv) .n-try:hover .nt-jp, .n-try.on .nt-jp { transform: scale(1.15); }

/* shadow-clone cursors: faint copies trailing the real pointer (more of them inside the try-it panel) */
#ncur i { position: fixed; left: 0; top: 0; width: 18px; height: 18px; z-index: 49; pointer-events: none; display: none;
  background: var(--ink); clip-path: polygon(0 0, 100% 62%, 52% 60%, 30% 100%); opacity: .28; }
body.realm-naruto.fine #ncur i { display: block; }

/* between worlds: hand seals flash full-frame, then a burst of smoke covers the switch */
#jutsu { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#jutsu[hidden] { display: none; }
.seal { position: absolute; inset: 0; margin: 0; background: #000; opacity: 0; }
.seal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.seal b { position: absolute; left: 5vw; top: 6vh; font: 400 clamp(56px, 10vw, 150px)/1 "Yuji Syuku", serif; color: #fff;
  text-shadow: 0 0 0 #000, 3px 3px 0 #000; }
.smoke { position: absolute; inset: 0; overflow: hidden; }
.puff { position: absolute; border-radius: 50%; background: #fff; border: clamp(3px, .4vw, 6px) solid var(--ink); }
.bofun { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  font: 900 clamp(64px, 14vw, 220px)/1 "Noto Serif JP", serif; color: #fff;
  -webkit-text-stroke: clamp(3px, .5vw, 8px) var(--ink); paint-order: stroke fill; }

/* end of the work page: way into the next world */
.wk-next { margin-top: 18px; padding: .7em 1.2em; background: var(--ink); color: var(--white); border: 0;
  font: 500 15px/1 "Geist", sans-serif; letter-spacing: .02em; }
.wk-next span { font-family: "Yuji Syuku", serif; margin-right: .5em; }
body:not(.inv) .wk-next:hover, .wk-next.hov { background: #333; }

/* the terminal's pixel buddy is whoever owns the current world */
body.realm-naruto #perch { background-image: url(art/naruto/sit_sheet.webp); aspect-ratio: 197 / 176; }
body.realm-naruto #chibi .sprite { background-image: url(art/naruto/chibi_sheet.webp); aspect-ratio: 161 / 171; }

/* ===== Naruto typography: shōnen title lettering, loud and slanted (Bangers), Japanese in an energetic brush
   (Potta One); layout mirrors Shinji's (text left, picture right) with the Uzumaki spiral behind ===== */
#nname { font: 400 clamp(60px, 12.5vw, 200px)/1 "Bangers", sans-serif; letter-spacing: .03em;
  text-shadow: .03em .03em 0 var(--white), .06em .06em 0 var(--ink); }
#nbg .balloon { font-family: "Potta One", sans-serif; }

#nprofile { grid-template-columns: 1fr 1.1fr; isolation: isolate; }
#nprofile .pf-text { order: -1; }
#nprofile::before { /* the Uzumaki spiral (渦), huge and faint behind the text */
  content: ""; position: absolute; z-index: -1; left: -12vmin; top: 50%; width: 82vmin; aspect-ratio: 1; transform: translateY(-50%);
  opacity: .07; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0 0 C2 -4 8 -2 8 3 C8 10 -2 13 -8 8 C-15 2 -11 -12 0 -15 C14 -18 23 -4 20 9 C16 25 -6 29 -18 20 C-32 10 -30 -14 -16 -25 C-2 -36 22 -33 33 -18 C42 -6 42 12 34 25' fill='none' stroke='%23000' stroke-width='5.5' stroke-linecap='round'/%3E%3Ccircle r='46' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E"); }
#nprofile .pf-media { transform: rotate(1.5deg); border-width: clamp(4px, .45vw, 7px);
  box-shadow: clamp(8px, .8vw, 14px) clamp(8px, .8vw, 14px) 0 var(--ink); }
#nprofile .pf-kanji { font: 400 clamp(26px, 3.2vw, 56px)/1.15 "Potta One", sans-serif; letter-spacing: .04em; transform: rotate(-3deg); transform-origin: 0 100%; }
#nprofile .pf-name { font: 400 clamp(60px, 7.6vw, 132px)/.9 "Bangers", sans-serif; letter-spacing: .03em;
  text-shadow: .025em .025em 0 var(--white), .05em .05em 0 var(--ink); }
#nprofile .pf-facts dt { font: 400 17px/1.2 "Bangers", sans-serif; letter-spacing: .08em; text-transform: none; }
#nprofile .pf-facts [lang="ja"] { font-family: "Potta One", sans-serif; }

#njutsu .sk-kanji { font: 400 clamp(46px, 6vw, 108px)/1 "Potta One", sans-serif; transform: rotate(-3deg); transform-origin: 0 100%; }
#njutsu .sk-title { font: 400 clamp(54px, 6.6vw, 112px)/.9 "Bangers", sans-serif; letter-spacing: .03em;
  text-shadow: .025em .025em 0 var(--white), .05em .05em 0 var(--ink); }
#njutsu .sk-release { font: 400 clamp(22px, 2vw, 32px)/1.2 "Bangers", sans-serif; letter-spacing: .04em; }
#njutsu .sk-release [lang="ja"] { font: 400 .9em "Potta One", sans-serif; }
#njutsu .sk-quote { font: 400 clamp(21px, 1.8vw, 28px)/1.2 "Bangers", sans-serif; letter-spacing: .03em; }
#njutsu .sk-quote::before { font-family: "Potta One", sans-serif; }
#njutsu .sk-panel { border-width: clamp(4px, .45vw, 7px); }
@media (min-width: 861px) { /* panels on the left, text on the right */
  #njutsu { grid-template-columns: 1.15fr minmax(280px, .85fr); }
  #njutsu .sk-grid { order: -1; }
}
.nt-jp { font-family: "Potta One", sans-serif; }
.sk-panel img.kurama { object-position: 50% 22%; } /* keep the fox's grin and Naruto both in frame */

/* ---- gate: a world's address opened directly; one tap lets the sound in ---- */
#gate { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 22px;
  border: 0; padding: 16px; background: var(--white); color: var(--ink); cursor: pointer; text-align: center;
  transition: opacity .3s; }
#gate[hidden] { display: none; }
#gate > span { display: none; flex-direction: column; align-items: center; gap: 6px; }
#gate[data-world="shinji"] .g-shinji, #gate[data-world="naruto"] .g-naruto { display: flex; }
#gate b { font-weight: 400; }
.g-shinji { transform: rotate(180deg); } /* his world is upside down from the first look */
.g-shinji b { font: 400 clamp(48px, 9vw, 120px)/1 "Yuji Syuku", serif; }
.g-shinji strong { font: 800 clamp(28px, 5vw, 64px)/1 "Montserrat", sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.g-naruto b { font: 400 clamp(40px, 7vw, 96px)/1 "Potta One", sans-serif; transform: rotate(-3deg); }
.g-naruto strong { font: 400 clamp(48px, 8vw, 120px)/.9 "Bangers", sans-serif; letter-spacing: .03em;
  text-shadow: .025em .025em 0 var(--white), .05em .05em 0 var(--ink); }
#gate small { font: 500 13px/1.4 "Geist", sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .65;
  animation: gate-pulse 1.6s ease-in-out infinite; }
@keyframes gate-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #gate small { animation: none; } }